Créer des images WebP à l'aide de la ligne de commande

Katie Hempenius

L'outil de ligne de commande webp a déjà été installé. Vous pouvez donc commencer à l'utiliser. Cet outil convertit les images JPG, PNG et TIFF au format WebP.

Convertir des images au format WebP

1. Cliquez sur Remix to Edit (Remixer pour modifier) pour pouvoir modifier le projet.
2. Cliquez sur Terminal (remarque: si le bouton Terminal ne s'affiche pas, vous devrez peut-être utiliser l'option plein écran).
3. Tapez la commande suivante :

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

Cette commande convertit le fichier images/flower1.jpg avec une qualité de 50 (0 est la pire ; 100 est la meilleure) et l'enregistre en tant que images/flower1.webp.

Une fois cette opération effectuée, vous devriez obtenir un résultat semblable à celui-ci dans la console:

Saving file 'images/flower1.webp'
File:      images/flower1.jpg
Dimension: 504 x 378
Output:    29538 bytes Y-U-V-All-PSNR 34.57 36.57 36.12   35.09 dB
           (1.24 bpp)
block count:  intra4:        750  (97.66%)
              intra16:        18  (2.34%)
              skipped:         0  (0.00%)
bytes used:  header:            116  (0.4%)
             mode-partition:   4014  (13.6%)
 Residuals bytes  |segment 1|segment 2|segment 3|segment 4|  total
    macroblocks:  |      22%|      26%|      36%|      17%|     768
      quantizer:  |      52 |      42 |      33 |      24 |
   filter level:  |      16 |       9 |       6 |      26 |

Vous venez de convertir l'image au format WebP.

Cependant, exécuter la commande cwebp une image à la fois de cette manière prendrait beaucoup de temps pour convertir de nombreuses images. Si vous devez effectuer cette opération, vous pouvez utiliser un script à la place.

• Exécutez ce script dans la console (n'oubliez pas les accents graves):

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

Ce script convertit, avec une qualité de 50, tous les fichiers du répertoire images/ et les enregistre en tant que nouveau fichier (même nom de fichier, mais avec une extension de fichier .webp) dans le même répertoire.

✔✔ Arrivée

Votre répertoire images/ doit maintenant contenir six fichiers:

flower1.jpg
flower1.webp
flower2.jpg
flower2.webp
flower3.png
flower3.webp

Ensuite, mettez à jour ce Glitch pour diffuser des images WebP dans les navigateurs compatibles.

Ajouter des images WebP à l'aide du tag <picture>

La balise <picture> vous permet de diffuser des annonces WebP sur des navigateurs plus récents tout en maintenant la compatibilité avec les navigateurs plus anciens.

• Dans index.html, remplacez <img src="images/flower1.jpg"/> par le code HTML suivant:

<picture>
  <source type="image/webp" srcset="images/flower1.webp">
  <source type="image/jpeg" srcset="images/flower1.jpg">
  <img src="images/flower1.jpg">
</picture>

• Remplacez ensuite les balises <img> pour flower2.jpg et flower3.png par les balises <picture>.

✔✔ Arrivée

Une fois l'opération terminée, les balises <picture> dans index.html devraient se présenter comme suit:

<picture>
  <source type="image/webp" srcset="images/flower1.webp">
  <source type="image/jpeg" srcset="images/flower1.jpg">
  <img src="images/flower1.jpg">
</picture>
<picture>
  <source type="image/webp" srcset="images/flower2.webp">
  <source type="image/jpeg" srcset="images/flower2.jpg">
  <img src="images/flower2.jpg">
</picture>
<picture>
  <source type="image/webp" srcset="images/flower3.webp">
  <source type="image/png" srcset="images/flower3.png">
  <img src="images/flower3.png">
</picture>

Ensuite, utilisez Lighthouse pour vérifier que vous avez correctement implémenté les images WebP sur le site.

Vérifier l'utilisation de WebP avec Lighthouse

L'audit de performances Diffusez des images aux formats nouvelle génération de Lighthouse peut vous indiquer si toutes les images de votre site utilisent des formats nouvelle génération tels que WebP.

1. Pour prévisualiser le site, appuyez sur View App (Afficher l'application), puis sur Fullscreen (Plein écran) .
2. Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir les outils de développement.
3. Cliquez sur l'onglet Lighthouse.
4. Assurez-vous que la case Performances est cochée dans la liste Catégories.
5. Cliquez sur le bouton Générer un rapport.
6. Vérifiez que l'audit Diffuser des images aux formats nouvelle génération a réussi.

Opération réussie. Vous diffusez maintenant des images WebP sur votre site.