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

Katie Hempenius
Katie Hempenius
X

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

Convertir des images au format WebP

  1. Cliquez sur Remixer pour modifier pour rendre le projet modifiable.
  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.

Toutefois, 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 qui les prennent en charge.

Ajouter des images WebP à l'aide de la balise <picture>

La balise <picture> vous permet de diffuser des fichiers WebP auprès des navigateurs plus récents tout en conservant 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>
  • Ensuite, remplacez les balises <img> de flower2.jpg et flower3.png par des balises <picture>.

✔︎ Enregistrement

Une fois l'opération terminée, les balises <picture> dans index.html doivent 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 des performances Diffuser 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) plein écran.
  2. Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir DevTools.
  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.

Réussir l&#39;audit &quot;Diffuser des images aux formats nouvelle génération&quot; dans Lighthouse

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