Creazione di immagini WebP con la riga di comando

Katie Hempenius

Lo strumento a riga di comando webp è già stato installato, quindi è tutto pronto per iniziare. Questo strumento converte le immagini JPG, PNG e TIFF in WebP.

Converti le immagini in WebP

1. Fai clic su Remix per modificare per rendere il progetto modificabile.
2. Fai clic su Terminale (nota: se il pulsante Terminale non viene visualizzato, potrebbe essere necessario 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à pari a 50 (0 è il peggiore; 100 è il migliore), il file images/flower1.jpg e lo salva come images/flower1.webp.

Al termine dell'operazione, nella console dovresti vedere qualcosa di simile:

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 potrebbe richiedere molto tempo per la conversione di molte immagini. Se hai bisogno di farlo, puoi usare uno script.

• Esegui questo script nella console (non dimenticare l'accento grave):

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

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

✔︎ Check-in

Ora dovresti avere 6 file nella directory images/:

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

Quindi, aggiorna questo Glitch per pubblicare immagini WebP sui browser che lo supportano.

Aggiungi immagini WebP utilizzando il tag <picture>

Il tag <picture> ti consente di pubblicare WebP nei 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>

• Dopodiché sostituisci i tag <img> per flower2.jpg e flower3.png con i tag <picture>.

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

Il controllo delle prestazioni Pubblica immagini nei formati di nuova generazione di Lighthouse può indicare se tutte le immagini sul tuo sito utilizzano formati di nuova generazione come WebP.

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

Success! Ora stai pubblicando immagini WebP sul tuo sito.