WebP et WordPress

WebP et WordPress = amélioration du temps de chargement et des performances ?

Beaucoup s'intéressent au format d'image WebP parce qu'il combine les avantages du JPG et du PNG. Mais en même temps, il ne remplace pas les deux formats d'image les plus courants. Pour WordPress avec beaucoup d'images, WebP devrait être particulièrement utile. Nous t'expliquons pourquoi dans cet article.

De nos jours, il est de plus en plus important de rendre l'expérience utilisateur de ton groupe cible aussi agréable et simple que possible. Les gens sont visuels et peuvent souvent assimiler plus rapidement et mieux les informations qu'ils voient. Le coup d'œil rapide sur un panneau publicitaire, le défilement sur une page d'accueil avant que le bus n'arrive dans cinq minutes. Nous connaissons tous ces situations. 

Comme les images représentent généralement plus de la moitié de l'espace de stockage d'un site web, le potentiel d'optimisation est important.

Maintenant, quelques faits supplémentaires sur le WebP avant de passer aux sujets.

  • WebP prend en charge le format vidéo VP8, qui convient par exemple aux petites images animées, comme celles que nous connaissons avec les GIF.
  • La taille maximale de l'image pour WebP est de 16 383 x 16 383 pixels.
  • Tu peux également redimensionner une image WebP vers le haut ou vers le bas, comme les fichiers SVG, mais beaucoup ne le permettent pas pour des raisons de sécurité.

"*" indique les champs requis

Je souhaite m'abonner à la newsletter pour être informé des nouveaux articles de blog, des ebooks, des fonctionnalités et des nouvelles de WordPress. Je peux retirer mon consentement à tout moment. Merci de prendre connaissance de notre politique de confidentialité.
Ce champ sert à la validation et ne doit pas être modifié.

Différences par rapport au PNG et au JPG 

WebP et PNG

Une image WebP est jusqu'à 25-30% plus petite qu'une image PNG, sans perte de qualité. L'arrière-plan peut quand même être transparent. Cela ne varie qu'en fonction de l'image elle-même, de la profondeur de l'image, des détails, de l'espace chromatique, etc. En raison de la petite taille du fichier, le format WebP offre un net avantage en termes de performance.

En se basant sur les deux images, on peut dire que l'image WebP est 30,1 pour cent plus petite que la version PNG. J'ai choisi ici la méthode sans perte et j'ai délibérément réglé le curseur de la qualité sur 80%. Les 20 % restants sur 100 % ne sont presque jamais visibles, donc 80 % suffisent amplement pour les applications en ligne. 

Inconvénients du format PNG

Les PNG ne sont pas adaptés aux photographies, car ils créent un fichier image beaucoup plus grand. Le format PNG est le plus souvent utilisé pour les captures d'écran, car les PC enregistrent les images en PNG. Pourquoi ? - Parce que les captures d'écran sont souvent un mélange d'image et de texte. 

Le PNG est utilisé par exemple pour les images qui nécessitent un arrière-plan transparent. Cela rend le format très polyvalent et populaire dans le design graphique, où de nombreux éléments sont souvent réunis.

Le PNG existe aux formats PNG 8 et PNG 24. Le PNG 8 utilise une profondeur de couleur de 8 bits et un maximum de 256 couleurs. PNG 24 utilise une profondeur de couleur de 24 bits avec jusqu'à 16,7 millions de couleurs. Ainsi, le PNG 24 est comparable au format JPEG. Continuons donc avec le format JPG :

Le format d'image JPG

En comparaison directe avec JPG, l'image WebP est environ 25 à 35% plus petite - malgré la même qualité d'image. Ici, il n'y a rien à dire entre les deux candidats JPG et WebP - WebP est tout simplement le meilleur choix.

En se basant sur les deux images, on peut dire que l'image WebP est plus petite de 24,7% que la version JPG. Pour la version JPG, j'ai réglé la qualité sur "élevée".

Le format JPG est idéal si tu peux vivre avec une perte de qualité et si la netteté et les détails ne sont pas importants. Le format est souvent utilisé pour les images riches en couleurs, car la composition du JPG permet d'afficher beaucoup de couleurs et de nuances.  

Petite remarque : l'apparence finale des images dépend de nombreux facteurs : par exemple de la résolution d'écran (HD, QHD, UHD/4K, 8K, etc.), des paramètres d'affichage tels que sRGB, Adobe RGB, du mode d'affichage respectif de tes moniteurs et du terminal avec lequel tu regardes les images. Ces derniers jours, j'ai moi-même rencontré le problème de la différence d'apparence de mes images sur mon écran et sur le site web. 

Espace/profondeur des couleurs

C'est là que les choses se compliquent un peu. WebP est basé sur l'algorithme de compression vidéo avec perte VP8, avec une compression jusqu'à 24 bits et une taille maximale de 16 383 x 16 383 pixels. Il a donc toujours une profondeur de couleur de 24 bits, tout comme le JPG. La profondeur de couleur du PNG va de 8 à 48 bits, mais ce dernier n'a pas beaucoup de sens en raison de la taille importante du fichier,

En tant que flux binaire VP8, la création d'images WebP sans perte ne fonctionne qu'avec le format d'image 8 bits - également connu sous le nom de format d'image YUV420.

Le format YUV420 décomposé : Considérons d'abord comment un moniteur affiche une image par défaut : Chaque couleur peut être représentée par trois couleurs (le soi-disant modèle RGB), c'est-à-dire le rouge, le vert et le bleu.

Chaque couleur individuellement - c'est-à-dire le rouge, le vert et le bleu - peut être enregistrée sur le PC en 1 octet (8 bits). Ainsi, UN pixel d'un moniteur a 3 octets (chaque octet contient des informations sur la couleur respective rouge, verte et bleue).

L'œil humain est très sensible à la luminosité, mais moins aux couleurs et à leurs dégradés. Ainsi, le terme YUV est composé de Y = luminance (luminosité) et U et V moyenne de la chrominance (couleur). YUV est donc comme RGB, avec lequel une couleur est représentée.

Mais pourquoi en avons-nous besoin ?

Parce que la taille du fichier est importante. Dans le modèle RGB, nous devons utiliser 3 octets (24 bits) pour stocker une couleur. En YUV, la taille est divisée par deux en raison de la manière dont elle est calculée puis enregistrée. C'est compliqué, mais je pense qu'à ce stade, les informations sont suffisantes et apportent un peu de clarté.

Soutien/appui

Les statistiques montrent quel navigateur est le plus utilisé par quel "terminal" tel que PC, tablette ou smartphone. Comme le WebP n'est pas pris en charge par tous les navigateurs, vous devez garder un œil sur ce point.

Bien sûr, on constate que les "appareils mobiles" sont davantage mis en avant, ce qui explique pourquoi un meilleur support pour WebP est disponible pour les smartphones. Il est donc important de consulter tes statistiques d'utilisateurs et de voir à partir de quel navigateur et de quel terminal tu reçois le plus de visiteurs.

La liste suivante montre quelles versions de navigateur bénéficient déjà de WebP et sur quels terminaux.

Prise en charge actuelle des navigateurs de bureau

  • Firefox à partir de la version 65.xOpera à partir de la version 39.xChrome à partir de la version 23.xEdge à partir de la version 17.xInternet Explorer à partir de la version 11.x

Un soutien actualisé pour les appareils mobiles

  • Navigateur Android à partir de la version 5.6 (Chromium 67)Android Chrome à partir de la version 73.xOpera Mini toutes les versionsOpera Mobile à partir de la version 12.xAndroid Firefox à partir de la version 66.xInternet Explorer Mobile à partir de la version 11.x

WebP VP8 (Images animées)

  • Google Chrome (Desktop et Android) à partir de la version 32.xMicrosoft Edge à partir de la version 18.xFirefox à partir de la version 65.xOpera à partir de la version 19.x

Je n'ai pas trouvé de support WebP pour d'autres navigateurs et appareils actuellement.

Conditions préalables de WebP dans WordPress

Malheureusement, la mauvaise nouvelle est que WordPress ne prend pas en charge les images WebP de manière autonome. C'est pourquoi nous passons maintenant au point suivant.

Les moyens d'inclure WebP dans WordPress :

  1. Utilisation d'un Plugin

Par exemple, on peut utiliser le Plugins ShortPixel (version gratuite), l'Optimus (version payante) ou le EWWW Image Optimizer (version gratuite).

Optimus

Optimus WebP

Malheureusement, WebP n'est pris en charge que par la version payante d'Optimus. Comme Raidboxes intègre déjà la mise en cache côté serveur, tu n'as d'ailleurs pas besoin d'un plugin "Cache Enabler" comme recommandé ici par Optimus.

ShortPixel

WebP à pixels courts

Sur ShortPixel , vous pouvez cocher la case comme vous pouvez le voir ci-dessus. Mais avant cela, je réinitialiserais toutes les images que vous avez à l'original et les optimiserais toutes en même temps avec le Plugin . Vous devriez alors voir en même temps que vous avez différents types de fichiers de vos images.

EWWW Image Optimizer

Eww Image Optimizer WebP
  1. Effectuer des ajustements dans le .htaccess de WordPress

Certains hébergeurs ont délibérément bloqué la possibilité de modifier quelque chose dans le fichier .htaccess pour des raisons de sécurité. Si tu héberges sur un serveur Apache, tu peux faire la modification suivante :

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{HTTP_ACCEPT} image/webp
    RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
    RewriteRule ^(wp-content/uploads.+)\.(jpe?g|png)$ $1.webp
[T=image/webp,E=accept:1]

</IfModule>
<IfModule mod_headers.c>
    Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp

Et sur un Nginx :

# http config block
map $http_accept $webp_ext {
default "";
"~*webp" ".webp";
}
# server config block
location ~* ^/wp-content/.+\.(png|jpg)$ {
add_header Vary Accept;
try_files $uri$webp_ext $uri =404;

Sur Raidboxes , cette règle de réécriture est d'ailleurs déjà prise en charge de manière native.

Où puis-je la trouver ?

Ce fichier se trouve sur le serveur web sur lequel WordPress a été installé. Le répertoire root est le répertoire principal où se trouve le domaine chez l'hébergeur web. Si tu ne peux pas le voir, tu dois définir le "remote file mask" sur -la pour que tu puisses aussi voir les fichiers cachés. Cela suppose bien sûr que tu aies des droits d'accès ou même que tu héberges toi-même et que tu utilises un programme FTP comme FileZilla.

Il existe une troisième possibilité - un peu compliquée - qui consiste à ajouter quelque chose dans le fichier function.php de ton thème WordPress afin que tu puisses télécharger des images au format WebP dès le départ. Tu peux lire comment cela fonctionne dans cet article.

À qui s'adresse WebP ?

WebP est en principe utile pour chaque site web. Le format est bien sûr particulièrement adapté aux sites web avec beaucoup d'images. Par exemple, pour les sites de photographes qui souhaitent conserver une qualité d'image aussi élevée que possible, mais qui accordent tout de même une grande importance à la rapidité de chargement. Mais d'autres utilisateurs de WordPress, comme les créatifs ou ceux qui ont quelque chose à montrer sous forme d'image, devraient faire tout leur possible pour rendre l'expérience utilisateur aussi agréable que possible.

Conclusion sur WebP et WordPress

Malheureusement, le WebP n'est pas encore courant aujourd'hui, contrairement au JPG et au PNG, mais il deviendra certainement de plus en plus important à l'avenir. Après tout, WebP permet d'améliorer les performances de ton site Web et donc l'expérience utilisateur et la satisfaction de ton groupe cible.

Plugin : oui ou non ?

Il existe d'excellents plugins qui te soulagent du travail de support WebP et qui optimisent en plus tes images. Personnellement, j'ai choisi le plugin Optimus. Sinon, cela vaut certainement la peine de l'intégrer dans la page en tant que code, d'autant plus que tu économiserais ainsi un plugin de plus. Mais en fin de compte, tu es bien conseillé d'utiliser un plugin pour cette question.

J'espère que tu as apprécié cet article et j'attends ton avis avec impatience !

Tes questions sur WebP et WordPress

Quelles questions poses-tu à Stefan ? N'hésite pas à utiliser la fonction de commentaire. Tu veux être informé des nouveaux articles sur le marketing en ligne ? Alors suis-nous sur Twitter, Facebook, LinkedIn ou via notre Newsletter.

As-tu aimé cet article ?

Tes évaluations nous permettent d'améliorer encore plus notre contenu.

Un commentaire sur "WebP et WordPress = temps de chargement et performances améliorés ?"

  1. Personnellement, je ne pense pas passer au Webp. L’optimisation de 20 à 30% annoncée est basée sur les chiffres de Google et ne se confirment pas sur mes tests persos avec des jpg optimisés.
    L’équipe WP avait annoncé un passage au Webp par défaut avec WP 6.1 et a dû faire marche arrière. Pour garantir une compatibilité totale, WP créait des miniatures jpg et webp, nécessitant le double d’espace serveur pour les utilisateurs – déjà que la génération de miniatures est problématique dans WP.
    Webp a de réels désavantages : sous Win10, elles nécessitent l’installation d’un codec spécifique pour les visualiser dans l’Explorateur. Et c’est un format propriétaire à Google. Depuis la cuisante expérience AMP, beaucoup de monde s’est rendu compte qu’il ne fallait pas trop compter sur Google pour une expérience utilisateur vraiment honnête.

Laisse un commentaire

Ton adresse e-mail ne sera pas publiée. Les champs obligatoires sont marqués d'un *.