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.
- YouTube a constaté que le passage aux miniatures WebP accélérait le chargement des pages de 10 %.
- Facebook a économisé entre 25 et 35% de la taille des fichiers JPEG et 80% de la taille des fichiers PNG lorsqu'il est passé à WebP.
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 petits projets 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 à l'aide des 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 dans les navigateurs plus récents et une image de remplacement dans les navigateurs plus anciens:
Avant :
<img src="flower.jpg" alt="">
Après :
<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 pas compatible avec l'un 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. Voici 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 différemment en fonction de l'en-tête Accept
:
<FilesMatch ".(jpe?g|png)$">
<IfModule mod_headers.c>
Header set Vary "Accept"
</IfModule>
</FilesMatch>
La règle de réécriture précédente recherche une version WebP de toute image JPEG ou PNG demandée. Si une alternative WebP est détectée, elle est 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 Diffuser des images dans des formats de nouvelle génération. Lighthouse liste toutes les images qui ne sont pas diffusées au format WebP.