Utiliser des images WebP

Katie Hempenius
Katie Hempenius
X

En quoi cela vous concerne-t-il ?

Les images WebP sont plus petites que leurs homologues JPEG et PNG, généralement de l'ordre de 25 à 35% de réduction de la taille de fichier. Cela réduit la taille des pages et améliore les performances.

WebP est un excellent remplacement pour les images JPEG, PNG et GIF. De plus, WebP propose une compression avec et sans pertes. Dans la compression sans perte, aucune donnée n'est perdue. La compression avec perte réduit la taille des fichiers, mais peut réduire la qualité des images.

Convertir des images au format WebP

Pour convertir leurs images au format WebP, les utilisateurs utilisent généralement l'une des approches suivantes: l'outil de ligne de commande cwebp ou le plug-in WebP Imagemin (package npm). Le plug-in WebP Imagemin est généralement le meilleur choix si votre projet utilise des scripts de compilation ou des outils de compilation (par exemple, Webpack ou Gulp), tandis que la CLI est un bon choix pour les projets simples ou si vous ne devez convertir les images qu'une seule fois.

Lorsque vous convertissez des images au format WebP, vous pouvez définir un large éventail de paramètres de compression. Toutefois, pour la plupart des utilisateurs, le seul paramètre qui vous intéresse est celui de la qualité. Vous pouvez spécifier un niveau de qualité compris entre 0 (pire) et 100 (meilleur). Il est intéressant de jouer avec ce paramètre pour trouver le bon compromis entre la qualité d'image et la taille de fichier en fonction de vos besoins.

Utiliser cwebp

Convertissez un seul fichier, en utilisant les paramètres de compression par défaut de cwebp:

cwebp images/flower.jpg -o images/flower.webp

Convertissez un seul fichier, en utilisant un niveau de qualité de 50:

cwebp -q 50 images/flower.jpg -o images/flower.webp

Convertir tous les fichiers d'un répertoire:

for file in images/*; do cwebp "$file" -o "${file%.*}.webp"; done

Utiliser Imagemin

Le plug-in WebP Imagemin peut être utilisé seul ou avec votre outil de compilation préféré (Webpack/Gulp/Grunt/etc.). Pour ce faire, vous devez généralement ajouter environ 10 lignes de code à un script de compilation ou au fichier de configuration de votre outil de compilation. Voici des exemples de la façon de procéder pour Webpack, Gulp et Grunt.

Si vous n'utilisez pas l'un de ces outils de compilation, vous pouvez utiliser Imagemin seul en tant que script Node. Ce script convertit les fichiers du répertoire images et les enregistre dans le répertoire compressed_images.

const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');

imagemin(['images/*'], {
  destination: 'compressed_images',
  plugins: [imageminWebp({quality: 50})]
}).then(() => {
  console.log('Done!');
});

Diffuser des images WebP

Si votre site n'est compatible qu'avec les navigateurs compatibles avec WebP, vous pouvez arrêter de lire. Sinon, diffusez WebP auprès des navigateurs plus récents et une image de remplacement auprès des navigateurs plus anciens:

Avant:html <img src="flower.jpg" alt="">

Après: html <picture> <source type="image/webp" srcset="flower.webp"> <source type="image/jpeg" srcset="flower.jpg"> <img src="flower.jpg" alt=""> </picture>

Les balises <picture>, <source> et <img>, y compris la façon dont elles sont ordonnées les unes par rapport aux autres, interagissent pour obtenir ce résultat final.

<picture>

La balise <picture> fournit un wrapper pour zéro ou plusieurs balises <source> et une balise <img>.

<source>

La balise <source> spécifie une ressource multimédia.

Le navigateur utilise la première source listée dans un format compatible. Si le navigateur n'est compatible avec aucun des formats listés dans les balises <source>, il charge l'image spécifiée par la balise <img>.

<img>

La balise <img> permet à ce code de fonctionner dans les navigateurs qui ne sont pas compatibles avec la balise <picture>. Si un navigateur n'est pas compatible avec la balise <picture>, il ignore les balises qu'il n'est pas compatible. Par conséquent, il ne "voit" que la balise <img src="flower.jpg" alt=""> et charge cette image.

Lire l'en-tête HTTP Accept

Si vous disposez d'un backend d'application ou d'un serveur Web qui vous permet de réécrire les requêtes, vous pouvez lire la valeur de l'en-tête HTTP Accept, qui indique les formats d'image alternatifs compatibles:

Accept: image/webp,image/svg+xml,image/*,*/*;q=0.8

Lire cet en-tête de requête et réécrire la réponse en fonction de son contenu présente l'avantage de simplifier votre balisage d'image. La balise <picture> peut être assez longue avec de nombreuses sources. Vous trouverez ci-dessous une règle mod_rewrite Apache pouvant diffuser des alternatives WebP:

RewriteEngine On
RewriteCond %{HTTP:Accept} image/webp [NC]
RewriteCond %{HTTP:Content-Disposition} !attachment [NC]
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f [NC]
RewriteRule (.+)\.(png|jpe?g)$ $1.webp [T=image/webp,L]

Si vous choisissez cette option, vous devez définir l'en-tête de réponse HTTP Vary pour vous assurer que les caches comprennent que l'image peut être diffusée avec différents types de contenu:

<FilesMatch ".(jpe?g|png)$">
  <IfModule mod_headers.c>
    Header set Vary "Content-Type"
  </IfModule>
</FilesMatch>

La règle de réécriture ci-dessus recherche une version WebP de toute image JPEG ou PNG demandée. Si une alternative WebP est détectée, elle sera diffusée avec l'en-tête Content-Type approprié. Vous pourrez ainsi utiliser un balisage d'image semblable au suivant avec la compatibilité WebP automatique:

<img src="flower-320w.jpg" srcset="flower-320w.jpg 320w, flower-640w.jpg 640w, flower-960w.jpg 960w">

Vérifier l'utilisation de WebP

Lighthouse peut être utilisé pour vérifier que toutes les images de votre site sont diffusées à l'aide de WebP. Exécutez l'audit des performances Lighthouse (Lighthouse > Options > Performances) et recherchez les résultats de l'audit Afficher des images dans des formats de nouvelle génération. Lighthouse liste toutes les images qui ne sont pas diffusées au format WebP.