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

Stefan Römershäuser Dernière mise à jour le 21.10.2020
8 Min.
webp wordpress
Dernière mise à jour le 21.10.2020

De nombreux utilisateurs de WordPress s'intéressent au format d'image WebP car il combine les avantages du JPG et du PNG. Cependant, il ne remplace pas les deux formats d'image courants. Toutefois, pour les utilisateurs de WordPress qui utilisent beaucoup d'images, WebP devrait être particulièrement utile. Nous expliquons pourquoi dans cet article.

Dans le monde d'aujourd'hui, il est de plus en plus important de rendre l'expérience des visiteurs de votre site web aussi agréable et facile que possible. Les gens sont visuels et peuvent souvent absorber les informations qu'ils voient plus rapidement et mieux. Ce rapide coup d'œil sur un panneau d'affichage, qui fait défiler 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.
  • Vous pouvez également augmenter ou diminuer l'échelle d'une image WebP, comme pour les fichiers SVG, mais beaucoup ne le permettent pas pour des raisons de sécurité.

Nous abordons aujourd'hui les sujets suivants dans cet article :

  1. Différences par rapport à JPG et PNG

- Comparaison de la taille des fichiers
- Espace couleur/profondeur
- Soutien/appui

  1. Quelles sont les conditions requises pour le site WebP sur WordPress ?
  2. Comment insérer des images WebP dans WordPress ?

- Utilisez un Plugin
- Ajoutez quelque chose dans le .htaccess de votre serveur
- Le fichier Function.php de votre WordPress -Themes ajoute quelque chose.

  1. Ma conclusion sur le WebP

Différences par rapport à PNG et JPG

WebP et PNG

Une image WebP est jusqu'à 25-30% plus petite qu'un PNG, sans perte de qualité. Les arrière-plans peuvent toujours être transparents. Cela ne varie qu'entre l'image elle-même, la profondeur de l'image, les détails, l'espace colorimétrique, etc. En raison de la petite taille du fichier, le format WebP apporte un avantage évident en termes de performance.

png vs webp

Sur la base de ces deux images, on peut dire que l'image WebP est 30,1 % 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 qualité sur 80 %. Les 20 % restants ne sont presque jamais visibles, donc 80 % sont parfaitement suffisants pour les demandes en ligne. 

Inconvénients du format PNG

Les PNG ne sont pas adaptés aux photographes car ils créent un fichier image beaucoup plus volumineux. Le format PNG est surtout 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'image et de texte. 

Le PNG est utilisé, par exemple, pour les images qui nécessitent un fond transparent. Cela rend le format très polyvalent et très populaire dans le domaine de la conception graphique, où de nombreux éléments se rejoignent souvent.

PNG est disponible aux formats PNG-8 et PNG-24. 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, PNG-24 est comparable au format JPEG. Continuons 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é la même qualité d'image. Il n'y a rien à dire ici entre les deux candidats JPG et WebP - WebP est tout simplement le meilleur choix.

jpg vs webp

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

Le format JPG convient si vous pouvez vivre avec une perte de qualité et que 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 de représenter de nombreuses couleurs et dégradés.  

Petit indice :

L'aspect final des images dépend de nombreux facteurs : par exemple, la résolution de l'écran (HD, QHD, UHD/4K, 8K, etc.), les paramètres de l'écran tels que sRGB, adobeRGB, le mode d'affichage respectif de vos moniteurs, ainsi que le dispositif avec lequel vous visualisez les images. Récemment, j'ai moi-même eu le problème que mes images avaient un aspect différent sur mon écran et sur le site web. 

Mon conseil : Aujourd'hui, tous les navigateurs sont en mode sRGB. Donc, si vous créez quelque chose pour le web dans Photoshop, réglez votre moniteur sur sRGB. Vous pouvez ensuite voir directement à quoi elle ressemble lorsqu'elle atterrit sur votre page. 🙂

Espace/profondeur des couleurs

C'est là que ça se complique un peu. Le 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 des PNG va de 8 à 48 bits, bien que cette dernière soit peu logique en raison de la taille importante du fichier,

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

Le format YUV420 en panne : Tout d'abord, voyons comment un moniteur affiche une image par défaut : Chaque couleur peut être représentée par trois couleurs (connues sous le nom de modèle RGB), à savoir 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 ici. Dans le modèle RGB, nous devons utiliser 3 octets (24 bits) pour stocker une couleur. Alors qu'avec YUV, la taille est divisée par deux en raison de la façon dont elle est calculée puis stockée. C'est compliqué, mais je pense qu'à ce stade, les informations sont suffisantes et apportent une certaine 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 peut voir que les "appareils mobiles" sont plus mis en avant, ce qui explique aussi pourquoi le smartphone bénéficie d'un meilleur support pour le WebP. Par conséquent, jetez un coup d'œil à vos statistiques d'utilisation et voyez de quel navigateur et de quel appareil vous obtenez le plus de visiteurs.

La liste suivante indique les versions de navigateur sur lesquelles les appareils peuvent déjà profiter de WebP.

Prise en charge actuelle des navigateurs de bureau

- Firefox à partir de la version 65.x
- Opera à partir de la version 39.x
- Chrome à partir de la version 23.x
- Edge à partir de la version 17.x
- Internet 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.x
- Opera Mini toutes versions
- Opera Mobile à partir de la version 12.x
- Android Firefox à partir de la version 66.x
- Internet Explorer Mobile à partir de la version 11.x

WebP VP8 (Images animées)

- Google Chrome (Desktop et Android) à partir de la version 32.x
- Microsoft Edge à partir de la version 18.x
- Firefox à partir de la version 65.x
- Opera à partir de la version 19.x

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

Quelles sont les conditions requises pour le WebP sur WordPress ?

Aucune jusqu'à présent, mais... Malheureusement, la mauvaise nouvelle est que WordPress ne prend pas en charge les images WebP à lui seul pour le moment. Nous en arrivons donc 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. Au fait, puisque RAIDBOXES dispose déjà d'une mise en cache intégrée côté serveur, vous n'avez pas besoin de "Cache Enabler" Plugin, comme le recommande ici 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;

Au fait, cette règle de réécriture est déjà prise en charge par défaut sur RAIDBOXES . 

Où puis-je la trouver ?

Le fichier se trouve sur le serveur web sur lequel WordPress a été installé. Le répertoire racine est le répertoire principal où se trouve le domaine chez l'hébergeur. Si vous ne pouvez pas le voir, vous devez régler le masque de fichier distant sur -la pour voir les fichiers cachés. Bien entendu, cela suppose que vous ayez des droits d'accès ou même que vous vous hébergiez et que vous utilisiez un programme FTP comme FileZilla.

Il existe une troisième possibilité - un peu compliquée - d'ajouter quelque chose dans le fichier function.php de votre WordPress -Themes afin que vous puissiez télécharger des images au format WebP par défaut. Comment cela fonctionne, vous pouvez lire par exemple. dans cet article article.

Conclusion

Malheureusement, le WebP n'est pas encore courant comme le JPG et le PNG, mais il deviendra certainement de plus en plus important à l'avenir. Après tout, WebP peut améliorer les performances de votre site et donc l'expérience de l'utilisateur et la satisfaction des visiteurs de votre site.

Plugin Oui | Non ?

Il existe un très bon Plugins qui fait le travail de support WebP pour vous et optimise également vos images. Personnellement, j'ai utilisé Plugin Optimus pour cela. Sinon, il serait certainement utile d'envisager de l'inclure dans la page en tant que code, d'autant plus que vous vous épargnerez un Plugin . Mais en fin de compte, vous êtes bien avisé d'utiliser Plugin pour cela.

À qui s'adresse WebP ?

Le WebP est en principe utile pour toute page. Bien entendu, ce format est particulièrement adapté aux sites web comportant de nombreuses images. Par exemple, pour les photographes qui veulent maintenir la qualité de leurs images au plus haut niveau possible, mais qui attachent une grande importance à un temps de chargement rapide. Mais aussi les autres utilisateurs de WordPress tels que les créatifs ou ceux qui ont quelque chose à montrer sous forme d'images doivent faire tout leur possible pour rendre l'expérience utilisateur de leurs clients et fans potentiels aussi agréable que possible.

J'espère que vous avez apprécié l'article et j'ai hâte d'entendre ce que vous en pensez ! 

Stefan est un blogueur en herbe avec son site web aspiring-artist.com. Il blogue sur l'art, réalise des sites WordPress pour d'autres artistes en herbe et agit comme consultant. Parce que même les artistes ont besoin d'un site web individuel et d'un logo et d'une marque significatifs. - Aspirer à la grandeur

Articles connexes

Commentaires sur cet article

Laisse un commentaire

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