La plupart d’entre nous savent maintenant que l’optimisation de l’image est très importante car elle joue un rôle énorme dans les temps de chargement totaux de votre site Web WordPress. Aujourd’hui, nous souhaitons partager avec vous une alternative simple sur la façon d’intégrer les fichiers WebP de Google dans votre site WordPress. Certains utilisateurs ont constaté une réduction de la taille des fichiers image de plus de 70%!

Qu’est-ce que WebP?

Si vous n’êtes pas familier avec WebP, il s’agit d’un format de fichier image créé par l’équipe de performance Web de Google dans le but de créer des images plus petites et plus rapides. Il a été annoncé pour la première fois en 2010 et propose des méthodes de compression avec et sans perte. Les images sont livrées au navigateur Web à partir d’un serveur Web en fonction du type MIME qu’il utilise, qui est image/webp.

Les images WebP sans perte sont 26% plus petit par rapport aux images PNG et WebP avec perte 25 à 34% plus petit que les JPEG.

Des entreprises comme YouTube et eBay utilisent déjà WebP pour alimenter en silence un grand nombre de leurs sites. Vous trouverez ci-dessous un exemple d’eBay, où sur leur page d’accueil, ils ont en moyenne environ 30 fichiers WebP.

Pourquoi WebP est-il si important? Selon httparchive, à partir d’août 2016, les images représentent plus de 64% du poids moyen d’une page Web. En général, c’est plus que votre CSS, JS et HTML combinés. Il est donc crucial de choisir une méthode d’optimisation d’image et un format d’image robustes tels que WebP afin de pouvoir réduire au maximum le poids de votre page. En général, plus votre page est petite, plus elle se charge rapidement. Et cela plaira non seulement à vos visiteurs, mais aussi à Google, car la vitesse de la page est un facteur de classement.

Prise en charge WebP

Maintenant que WebP est très excitant, il est également important de mentionner la prise en charge des navigateurs. Tous les navigateurs modernes ne prennent pas en charge WebP pour le moment. Selon puis-je utiliser, WebP est actuellement pris en charge dans Chrome 23+, Opera 39+, toutes les versions d’Opera mini, le navigateur Android 4.3+ et Chrome pour Android.

prise en charge du navigateur Webp

Mais attendez! Ne soyez pas trop déçu, car dans le tutoriel que nous allons vous montrer ci-dessous, il existe une méthode pour fournir des fichiers WebP aux navigateurs pris en charge et aux JPG / PNG comme solution de secours. Cela signifie que les navigateurs non pris en charge ne verront pas d’image cassée, ils verront simplement ce qu’ils voyaient auparavant. Pensez à WebP comme un ajout à votre site WordPress, plutôt qu’une migration.

Selon W3Schools, Chrome a le monopole de la part de marché des navigateurs à un peu plus de 70%. Mais ne prenez pas seulement la part de marché comme une preuve solide, regardez les données de vos propres visiteurs et voyez quels navigateurs ils utilisent, car cela peut différer en fonction de votre niche. Vous pourriez être surpris de voir à quel point les statistiques sont biaisées. Dans Google Analytics, sous “Audience”, vous pouvez cliquer sur “Navigateur et système d’exploitation” et voir quels navigateurs les gens utilisent lorsqu’ils accèdent à votre site. Nous avons créé un site Web au hasard et comme vous pouvez le voir ci-dessous, 67% des visiteurs proviennent de Chrome et 1% d’Opera. Alors 68% de ces personnes peuvent voir et bénéficier du WebP format de fichier image!

navigateurs chrome webp

Comment utiliser les fichiers WebP dans WordPress

Dans l’exemple d’aujourd’hui, nous allons utiliser une combinaison de deux plugins WordPress différents pour que WebP soit opérationnel dans WordPress. Ceux-ci sont créés et développés par l’équipe de KeyCDN, qui est un réseau mondial de diffusion de contenu (CDN).

  1. [premium] Optimus Image Optimizer: Plugin de compression d’image sans perte pour WordPress, convertit les images en WebP
  2. [free] Activateur de cache WordPress: Plugin de mise en cache qui vous permet de servir WebP aux navigateurs pris en charge

Optimus Image Optimizer

Vous pouvez télécharger Optimus Image Optimizer à partir du Dépôt WordPress, de optimus.io, ou depuis le tableau de bord de votre plugin. Remarque: il nécessite une licence premium si vous souhaitez convertir vos images en WebP. Une fois installé, vous pouvez activer la «Création de fichiers WebP» dans les paramètres du plugin.

création de fichiers webp

Une fois WebP activé, cela crée essentiellement une image supplémentaire pour tout ce qui est converti. Donc, si vous téléchargez un fichier PNG ou JPG, il existe également une version .webp de votre image. N’oubliez pas que le PNG / JPG est toujours nécessaire car ils sont encore utilisés pour servir aux navigateurs non pris en charge. Optimus effectue une compression sans perte, donc vos PNG et JPG sont également compressés.

fichiers webp et png

Il existe également une option d’optimisation en masse au cas où vous auriez déjà compressé vos images auparavant et que vous auriez encore besoin de les convertir en WebP.

optimiseur d'image en masse

Activateur de cache WordPress

Alors maintenant que vous avez des images WebP, vous avez besoin d’un moyen de dire à WordPress de servir des images WebP aux navigateurs pris en charge et PNG / JPG aux autres navigateurs. Cela peut être accompli avec le plugin gratuit WordPress Cache Enabler. Vous pouvez télécharger le plugin depuis le Dépôt WordPress ou installez-le depuis le tableau de bord de votre plugin. Une fois installé, vous pouvez activer «Créer une version supplémentaire en cache WebP» dans les paramètres du plugin.

paramètres d'activation de cache

Une fois que vous activez cette option, une version WebP mise en cache supplémentaire de votre page est créée.versions webp

Et c’est tout! Vous devriez maintenant avoir des fichiers WebP en cours d’exécution sur votre site Web WordPress.

Comparaison JPG vers WebP

Nous avons effectué une comparaison de JPG à WebP pour montrer les différences que vous pouvez réaliser.

NOM DE FICHIER JPG ORIGINAL JPG COMPRIMÉ FORMAT WEBP DIFFÉRENCE DE TAILLE%
jpg-vers-webp-1.jpg 758 Ko 685 Ko 109 Ko 86%
jpg-vers-webp-2.jpg 599 Ko 529 Ko 58,8 Kio 90%
jpg-vers-webp-3.jpg 960 Ko 881 Ko 200 Ko 79%
jpg-vers-webp-4.jpg 862 Ko 791 Ko 146 Ko 83%
jpg-vers-webp-5.jpg 960 Ko 877 Ko 71,7 Ko 93%

WebP a abouti à un 85,87% de diminution de la taille d’image moyenne.

Comparaison PNG à WebP

Encore une fois, nous avons également effectué une comparaison de PNG à WebP pour montrer les différences que vous pouvez réaliser.

Nom de fichier PNG d’origine PNG compressé Format WebP Différence de taille%
png-vers-webp-1.png 44 Ko 34 Ko 30 Ko 32%
png-vers-webp-2.png 46 Ko 35 Ko 33 Ko 28%
png-vers-webp-3.png 43 Ko 31 Ko 25 Ko 42%
png-vers-webp-4.png 30 Ko 24 Ko 18 Ko 40%
png-vers-webp-5.png 15 Ko 11 Ko 8 Ko 47%
png-vers-webp-6.png 34 Ko 24 Ko 18 Ko 47%
png-vers-webp-7.png 15 Ko 13 Ko 8 Ko 47%
png-vers-webp-8.png 63 Ko 47 Ko 44 Ko 30%
png-vers-webp-9.png 48 Ko 36 Ko 33 Ko 31%
png-vers-webp-10.png 17 Ko 14 Ko 11 Ko 35%
png-vers-webp-11.png 18 Ko 13 Ko 9 Ko 50%
png-vers-webp-12.png 61 Ko 45 Ko 39 Ko 36%
png-vers-webp-13.png 32 Ko 25 Ko 21 Ko 35%
png-vers-webp-14.png 26 Ko 21 Ko 17 Ko 35%
png-vers-webp-15.png 14 Ko 12 Ko 9 Ko 36%
png-vers-webp-16.png 36 Ko 27 Ko 24 Ko 33%
png-vers-webp-17.png 14 Ko 12 Ko 8 Ko 43%
png-vers-webp-18.png 21 Ko 18 Ko 13 Ko 38%
png-vers-webp-19.png 42 Ko 30 Ko 27 Ko 36%
png-vers-webp-20.png 23 Ko 20 Ko 18 Ko 22%

WebP a abouti à un Diminution de 42,8% de la taille d’image moyenne.

Sommaire

Comme vous pouvez le voir, WebP est très facile à implémenter sur votre site WordPress et vous pouvez obtenir des tailles de fichier image considérablement plus petites! Il n’y a pas de compression d’image qui puisse se comparer aux économies de WebP. Oh, et avons-nous mentionné que WebP a la capacité d’utiliser la compression sans perte? Cela signifie que vous ne verrez aucune perte de qualité notable. Si vous recherchez un meilleur moyen d’accélérer WordPress, WebP peut être une excellente solution.

Share: