Creazione di immagini WebP con la riga di comando

Katie Hempenius

Lo strumento a riga di comando webP è già installato, quindi puoi iniziare subito. Questo strumento converte immagini JPG, PNG e TIFF in WebP.

Converti immagini in WebP

1. Fai clic su Remixa per modificare per rendere modificabile il progetto.
2. Fai clic su Terminale. Nota: se il pulsante Terminale non viene visualizzato, potresti dover utilizzare l'opzione Schermo intero.
3. Digita il seguente comando:

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

Questo comando converte, con una qualità di 50 (0 è il peggiore; 100 è il migliore), il file images/flower1.jpg e lo salva come images/flower1.webp.

Al termine di questa operazione, nella console dovresti vedere qualcosa di simile a questo:

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 |

Hai appena convertito l'immagine in WebP.

Tuttavia, l'esecuzione del comando cwebp un'immagine alla volta, come questa, richiederebbe molto tempo per convertire molte immagini. Per farlo, puoi usare uno script.

• Esegui questo script nella console (non dimenticare gli apici inversi):

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

Questo script converte, con una qualità di 50, tutti i file nella directory images/ e li salva come un nuovo file (stesso nome file, ma con un'estensione di file .webp) nella stessa directory.

✔✔ Fai il check-in

A questo punto dovresti avere sei file nella directory images/:

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

Successivamente, aggiorna questo Glitch per mostrare immagini WebP ai browser che la supportano.

Aggiungi immagini WebP utilizzando il tag <picture>

Il tag <picture> ti consente di pubblicare WebP su browser più recenti, mantenendo al contempo il supporto per i browser meno recenti.

• In index.html, sostituisci <img src="images/flower1.jpg"/> con il seguente HTML:

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

• Poi sostituisci i tag <img> di flower2.jpg e flower3.png con <picture> tag.

✔✔ Fai il check-in

Al termine, i tag <picture> in index.html dovrebbero avere il seguente aspetto:

<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>

Poi, utilizza Lighthouse per verificare di aver implementato correttamente le immagini WebP sul sito.

Verifica l'utilizzo di WebP con Lighthouse

La funzionalità di controllo del rendimento di Pubblica immagini nei formati di nuova generazione di Lighthouse ti consente di sapere se tutte le immagini sul tuo sito usano formati di nuova generazione come WebP.

1. Per visualizzare l'anteprima del sito, premi Visualizza app, quindi Schermo intero .
2. Premi "Ctrl+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.
3. Fai clic sulla scheda Lighthouse.
4. Assicurati che la casella di controllo Rendimento sia selezionata nell'elenco Categorie.
5. Fai clic sul pulsante Genera report.
6. Verifica che il controllo Pubblica immagini nei formati di nuova generazione sia stato superato.

Operazione riuscita. Ora stai pubblicando immagini WebP sul tuo sito.