Utiliser l’une des commandes suivantes pour convertir les images au format webp :
cwebp -q 70 picture_with_alpha.png -o picture_with_alpha.webp
cwebp -q 50 picture.jpg -o picture.webp
cwebp -preset photo photo.jpg -o photo.webp
cwebp -preset picture -resize 768 0 picture.png -o picture.webp
Valeurs possibles de preset : default, photo, picture, drawing, icon, text.
-resize width height Redimensionner la source sous la forme d’un rectangle de taille width x height. Si un des paramètres est 0, l’autre valeur sera calculée automatiquement pour conserver le ratio de la source.
Intégrer le code suivant dans la page html :
<picture>
<source srcset='image-480.webp' type="image/webp" media="(max-width: 480px)">
<source srcset='image-768.webp' type="image/webp" media="(max-width: 768px)">
<source srcset='image-1024.webp' type="image/webp" media="(min-width: 769px)">
<source srcset='image-480.jpg' type="image/jpg" media="(max-width: 480px)">
<source srcset='image-768.jpg' type="image/jpg" media="(max-width: 768px)">
<source srcset='image-1024.jpg' type="image/jpg" media="(min-width: 769px)">
<img src="image-1024.jpg" />
</picture>