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 !

bldwebagency-delivrer-images-webp-htaccess-apache-o2switch

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.