Les nouveaux formats d’images WebP et AVIF apportent des améliorations conséquentes sur les temps de chargement des pages Web. En fonction de la qualité de compression définie, le poids des images peut être divisé par 6 !
Prérequis pour la conversion des images WebP et AVIF
Afin de pouvoir convertir vos images aux formats WebP et AVIF, vous devrez au préalable avoir un accès en ligne de commande à une machine Linux ou macOS. Il est possible d’utiliser des services en ligne pour convertir vos images, mais ce n’est pas le moyen le plus optimisé. Voici donc les paquets à installer :
sudo apt install webp imagemagick
Ces paquets permettront l’accès aux commandes cwebp et convert.
Conversion des images au format WebP
Pour convertir une image au format WebP, rien de plus simple :
cwebp -quiet -q 75 mon-image-source.jpg -o mon-image-destination.jpg.webp
- -quiet : permet de désactiver le verbose de la commande
- -q : qualité de l’image de sortie en %.
Pour convertir un lot d’images, vous pouvez par exemple passer la commande suivante :
IFS=$'\n' && for image in $(ls *.jpeg); do cwebp -quiet -q 75 ${image} -o ${image}.webp; done
Conversion des images au format Avif
Comme indiqué sur leur site, depuis la version 7.0.25, ImageMagick supporte le format AVIF. Très bonne nouvelle pour nous, nous allons pouvoir faire des conversions en toute simplicité. Plusieurs techniques :
convert -quality 75 mon-image-source.jpg mon-image-destination.jpg.avif
ou
magick -quality 80 mon-image-source.jpg mon-image-destination.jpg.avif
de la même manière, pour convertir un lot d’images, voici la commande :
IFS=$'\n' && for image in $(ls *.jpeg); do magic -quality 80 ${image} -o ${image}.avif; done
Configuration du fichier htaccess pour délivrer les images WebP et AVIF
La raison pour laquelle je conserve l’extension d’origine dans les fichiers destination (image-destination.jpg.webp), c’est qu’il est bien plus facile de rediriger la requêtes vers les formats souhaités via le htaccess. Voici la configuration à ajouter à votre fichier :
# BWA Begin - webp & avif image <IfModule mod_mime.c> AddType image/webp webp AddType image/avif avif AddType image/avif-sequence avifs </IfModule> <Files *.webp> Header set Vary "Accept-Encoding" AddType "image/webp" .webp AddEncoding webp .webp </Files> <Files *.avif> Header set Vary "Accept-Encoding" AddType "image/avif" .avif AddEncoding avif .avif </Files> RewriteCond %{HTTP:Accept} image/avif RewriteCond %{REQUEST_FILENAME}.avif -f RewriteRule \.(jpe?g|png)$ %{REQUEST_FILENAME}.avif [L] RewriteCond %{HTTP:Accept} image/webp RewriteCond %{REQUEST_FILENAME}.webp -f RewriteRule \.(jpe?g|png)$ %{REQUEST_FILENAME}.webp [L] # BWA End - webp & avif image
Dans cette condition, le serveur va d’abord vérifier si une version WebP est disponible, dans le cas contraire, vérifier si une version WebP est disponible, sinon il chargera la version originale (jpg ou png).
Bien-sûr, si vous avez des moyens plus simples ou plus optimisés d’arriver à ce stade, ils sont les bienvenues dans les commentaires et n’hésitez-pas à parcourir nos articles sur l’auto-hébergement et les performances.
Bonjour
Quand on a mis le code dans htaccess devons nous voir la conversion dans le code source et pagespeed en tient il compte?
Bonjour Jean-Paul,
Il s’agit ici d’une règle de redirection, au niveau réseau, les URLs en jpg-png seront rewrite en webp. Au niveau code source de la page, tu ne devrais voir aucun changement, mais dans la console navigateur, dans l’onglet Network, tu devrais voir les redirections passer. Et PageSpeed verra bien les bonnes versions en Webp, c’est l’intérêt.
En fait dans pagespeed il n’y a aucune différence
Peut etre que je devrais mattre
sudo apt install webp imagemagick à un endroit mais lequel??
Dans tous les cas merci de votre aide