webp wordpress

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

De nombreux utilisateurs de WordPress s'intéressent au format d'image WebP parce qu'il combine les avantages du JPG et du PNG. En même temps, il ne remplace toutefois pas les deux formats d'image courants. Pour les utilisateurs de WordPress qui utilisent beaucoup d'images, WebP devrait toutefois être particulièrement utile. Nous expliquons dans cet article pourquoi il en est ainsi.

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 plus facilement les informations qu'ils voient. Un coup d'œil rapide sur un panneau publicitaire, le défilement d'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 telles que nous les connaissons dans 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é.
Consentement*
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 pour cent plus petite qu'une image PNG, sans perte de qualité. L'arrière-plan peut tout de 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 colorimétrique, etc. En raison de la petite taille des fichiers, le format WebP présente un avantage certain en termes de performance.

Sur la base des 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 volontairement réglé le curseur de la qualité sur 80 pour cent. Les 20 pour cent restants ne sont quasiment jamais visibles, donc 80 pour cent suffisent amplement pour les applications en ligne. 

Inconvénients du format PNG

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

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

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

Le format d'image JPG

En comparaison directe avec le JPG, l'image WebP est environ 25 à 35 % plus petite - malgré une qualité d'image identique. Il n'y a rien à dire ici entre les deux candidats JPG et WebP - WebP est tout simplement le meilleur choix.

Sur la base des 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 "Haute".

Le format JPG est idéal si l'on peut s'accommoder d'une perte de qualité et si la netteté et les détails ne sont pas importants. Ce format est souvent utilisé pour les images riches en couleurs, car la composition du JPG permet d'afficher de nombreuses couleurs et nuances.  

Petite remarque : l'apparence finale des images dépend de nombreux facteurs : par exemple de la résolution de l'écran (HD, QHD, UHD/4K, 8K, etc.), des paramètres d'affichage tels que sRGB, Adobe RGB, du mode d'affichage respectif de vos moniteurs ainsi que du terminal avec lequel vous visualisez les images. Ces derniers jours, j'ai moi-même été confronté au 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, cette dernière option ayant peu 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 tout d'abord la manière dont un moniteur affiche une image par défaut : Chaque couleur peut être représentée par trois couleurs (le modèle dit RVB), 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 ?

Car la taille du fichier est importante à cet égard. Dans le modèle RGB, nous devons utiliser 3 octets (24 bits) pour enregistrer une couleur. En revanche, 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 permettent d'y voir un peu plus clair.

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.

On constate bien sûr que les "appareils mobiles" sont davantage mis en avant, ce qui explique aussi pourquoi un meilleur support pour WebP est mis à disposition pour les smartphones. C'est pourquoi il faut absolument que tu consultes tes statistiques d'utilisateurs et que tu regardes à 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 and 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.

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 supporté 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ôtes ont délibérément bloqué la possibilité de modifier quoi que ce soit dans le fichier .htaccess pour des raisons de sécurité. Si vous êtes hébergé sur un serveur Apache, vous pouvez procéder à l'ajustement suivant :

<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 sur lequel 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 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 de pouvoir télécharger d'office des images au format WebP. Tu peux lire comment cela fonctionne dans cet article.

À qui s'adresse WebP ?

WebP est en principe utile pour chaque site. Le format est bien sûr particulièrement adapté aux sites web contenant de nombreuses images. Par exemple, pour les photographes qui souhaitent maintenir une qualité d'image aussi élevée que possible tout en accordant 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 tout mettre en œuvre pour rendre l'expérience utilisateur de leurs clients et fans potentiels aussi agréable que possible.

Conclusion sur WebP et WordPress

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

Plugin : oui ou non ?

Il existe d'excellents plug-ins qui te déchargent du travail de support WebP et qui optimisent en outre tes images. Personnellement, j'ai opté pour le plugin Optimus. Sinon, cela vaudrait certainement la peine de l'intégrer dans la page sous forme de code, d'autant plus qu'on économiserait 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 cet article vous a plu et j'attends votre avis avec impatience !

Tes questions sur WebP et WordPress

Quelles questions as-tu à poser à Stefan ? N'hésite pas à utiliser la fonction de commentaire. Tu veux être informé(e) des nouveaux articles sur le thème du marketing en ligne ? Alors suis-nous sur Twitter, Facebook, LinkedIn ou sur notre Bulletin d'information.

As-tu aimé cet article ?

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

Laisse un commentaire

Ton adresse e-mail ne sera pas publiée.