En quoi cela vous concerne-t-il ?
Les images WebP sont plus petites que leurs équivalents JPEG et PNG, généralement sur le une réduction de 25 à 35% de la taille du fichier. Cela réduit la taille des pages et améliore les performances.
- YouTube a constaté que le passage aux miniatures WebP entraînait un gain de 10% de chargement plus rapide des pages.
- Facebook expérimenté Économisez 25 à 35% de la taille de fichier pour les JPEG et 80% de taille de fichier pour les PNG lorsque ils sont passés à WebP.
WebP est un excellent moyen de remplacer les images JPEG, PNG et GIF. De plus, WebP offre une compression sans perte et avec pertes. Avec la compression sans perte, aucune donnée est perdu. La compression avec perte réduit la taille des fichiers, mais peut réduisant la qualité de l'image.
Convertir des images au format WebP
Les gens utilisent généralement l'une des méthodes suivantes pour convertir leurs images vers WebP: le Outil de ligne de commande cwebp ou le plug-in Imagemin WebP (npm) package). Le plug-in Imagemin WebP est généralement le meilleur choix si votre projet utilise des des scripts ou des outils de création (comme Webpack ou Gulp), alors que la CLI est un bon choix pour des 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 pouvez définir de nombreuses les paramètres de compression, mais pour la plupart des utilisateurs, la seule chose dont vous aurez besoin se soucie est le paramètre de qualité. Vous pouvez spécifier un niveau de qualité de 0 (la moins bonne) à 100 (la meilleure). Cela vaut la peine de s'y retrouver, quel niveau est le bon compromis entre qualité d'image et taille de fichier 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
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 ou le fichier de configuration de votre outil de compilation. Voici des exemples de la façon de procéder Webpack Gulp Grognement.
Si vous n'utilisez pas l'un de ces outils, vous pouvez utiliser Imagemin seul,
un script Node. Ce script convertit les fichiers du répertoire images et
enregistrez-les 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'accepte que le format WebP navigateurs, vous pouvez arrêter la lecture. Sinon, diffuser des images 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>
La
<picture>,
<source>,
et <img>, y compris l'ordre dans lequel ils sont organisés les uns par rapport aux autres,
interagissent pour atteindre
ce résultat final.
<picture>
Le tag <picture> fournit un wrapper pour zéro, une ou plusieurs balises <source> et un tag <img>.
<source>
Le tag <source> spécifie une ressource multimédia.
Le navigateur utilise la première source répertoriée dans un format pris en charge. Si le navigateur n'accepte aucun des formats répertoriés dans les tags <source>, il charge l'image spécifiée par le tag <img>.
<img>
La balise <img> permet à ce code de fonctionner sur les navigateurs.
qui ne sont pas compatibles avec la balise <picture>.
Si un navigateur n'accepte pas la balise <picture>, il
ignorer les balises non prises en charge. Ainsi, il « voit » uniquement la
<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 annoncera les autres formats d'image 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 permet de simplifier le balisage de votre image. Le balisage <picture> peut devenir assez long avec de nombreuses sources. Vous trouverez ci-dessous une règle Apache mod_rewrite pouvant diffuser des versions 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]
Dans ce cas, vous devez 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 recherche une version WebP de toute image JPEG ou PNG demandée. Si une version WebP de remplacement 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 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 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), puis recherchez les résultats de la procédure Diffuser des images dans la nouvelle génération des formats d'annonces. Lighthouse affiche toutes les images qui ne sont pas diffusées WebP.