Utiliser des images WebP

Katie Hempenius
Katie Hempenius
X

Quel est l'intérêt pour vous ?

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

WebP remplace parfaitement les images JPEG, PNG et GIF. De plus, WebP propose une compression avec et sans perte. Avec la compression sans perte, aucune donnée n'est perdue. La compression avec perte réduit la taille des fichiers, mais au détriment de la qualité de l'image.

Convertir des images au format WebP

Les utilisateurs utilisent généralement l'une des approches suivantes pour convertir leurs images au format WebP: l'outil de ligne de commande cwebp ou le plug-in Imagemin WebP (package npm). Le plug-in Imagemin WebP est généralement le meilleur choix si votre projet utilise des scripts 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 n'avez besoin de convertir les images qu'une seule fois.

Lorsque vous convertissez des images au format WebP, vous avez la possibilité de définir une grande variété de paramètres de compression. Toutefois, pour la plupart des utilisateurs, le seul aspect à prendre en compte est la qualité. Vous pouvez spécifier un niveau de qualité compris entre 0 (le pire) et 100 (excellent). Il est utile d'effectuer quelques tests afin de déterminer quel niveau est le meilleur compromis entre qualité d'image et 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 le niveau de qualité 50:

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

Convertissez tous les fichiers d'un répertoire:

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

Utiliser Imagemin

Le plug-in Imagemin WebP peut être utilisé seul ou avec votre outil de compilation préféré (Webpack/Gulp/Grunt/etc.). Cela implique généralement d'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 aucun 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 WebP, vous pouvez arrêter la lecture. Sinon, diffusez le format WebP dans les navigateurs plus récents et une image de remplacement pour les 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 classées les unes par rapport aux autres, interagissent toutes pour atteindre ce résultat final.

<picture>

La balise <picture> fournit un wrapper pour zéro, une 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 répertoriée dont le format est compatible. Si le navigateur n'accepte aucun des formats répertoriés dans les tags <source>, l'image spécifiée par le tag <img> est chargée à nouveau.

<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 non compatibles. Ainsi, il ne "voit" que le tag <img src="flower.jpg" alt=""> et charge cette image.

Lire l'en-tête HTTP Accept

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

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

Le fait de lire cet en-tête de requête et de réécrire la réponse en fonction de son contenu permet de simplifier le balisage des images. Le balisage <picture> peut être assez long avec de nombreuses sources. Vous trouverez ci-dessous une règle Apache mod_rewrite qui peut diffuser des versions WebP de substitution:

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 optez pour cette solution, vous devrez définir l'en-tête de réponse HTTP Vary pour vous assurer que les caches comprendront que l'image peut être diffusée avec différents types de contenus:

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

La règle de réécriture ci-dessus recherchera une version WebP de toute image JPEG ou PNG demandée. Si une version WebP est trouvée, elle est diffusée avec l'en-tête Content-Type approprié. Vous pourrez ainsi utiliser un balisage d'image semblable à ce qui suit avec la prise en charge automatique du format WebP:

<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 vous permet de vérifier que toutes les images de votre site sont diffusées à l'aide de WebP. Exécutez l'audit de performances Lighthouse (Lighthouse > Options > Performance) et examinez les résultats de l'audit Diffuser des images aux formats nouvelle génération. Lighthouse affichera la liste de toutes les images qui ne sont pas diffusées dans WebP.