Guida alle immagini in formato WebP

Un po’ di storia

WebP è stato annunciato per la prima volta da Google il 30 settembre 2010 come un nuovo formato aperto per la grafica true color con compressione con perdita sul Web, producendo file più piccoli di qualità dell’immagine paragonabile al vecchio schema JPEG. Si basava sulla tecnologia acquisita da Google con l’acquisto di On2 Technologies. Come derivato del formato video VP8, è un progetto gemello del formato contenitore multimediale WebM. Il software relativo a WebP è rilasciato con una licenza software gratuita BSD.

Il 3 ottobre 2011, Google ha aggiunto un “Formato file esteso” che consente il supporto WebP per animazioni, profilo ICC, metadati XMP ed Exif e tiling (composizione di immagini molto grandi da un massimo di 16384 × 16384 tessere). Il supporto per l’animazione consente di convertire vecchie GIF animate in WebP animati.

Il 18 novembre 2011, Google ha annunciato una nuova modalità di compressione lossless, senza perdita di informazioni, e il supporto per la trasparenza (canale alfa) sia in modalità senza perdita che con perdita. Secondo le misurazioni di Google nel novembre 2011, una conversione da PNG a WebP ha comportato una riduzione del 45% delle dimensioni del file quando si inizia con PNG trovati sul Web e una riduzione del 28% rispetto ai PNG che vengono ricompressi con pngcrush e PNGOUT.

Nel luglio 2016, Apple ha aggiunto il supporto WebP alle prime versioni beta di macOS Sierra e iOS 10, ma il supporto è stato successivamente rimosso nelle versioni seed GM di iOS 10 e macOS Sierra rilasciate a settembre 2016. A settembre 2020, il supporto WebP è stato aggiunto nella versione di Safari 14.

A partire da febbraio 2021, WebP era supportato dal 92% dei browser web in uso in tutto il mondo.

Tecnologia dietro a WebP

L’algoritmo di compressione con perdita di WebP si basa sulla codifica intra-frame del formato video VP8 e sul formato RIFF (Resource Interchange File Format) come formato contenitore. In quanto tale, è uno schema di trasformazione basato su blocchi con otto bit di profondità di colore e un modello di luminanza-crominanza con sottocampionamento della crominanza con un rapporto di 1: 2 (YCbCr 4: 2: 0). Senza ulteriore contenuto, il contenitore RIFF obbligatorio ha un overhead di soli venti byte, sebbene possa anche contenere metadati aggiuntivi. La lunghezza laterale delle immagini WebP è limitata a 16.383 pixel.

WebP si basa sulla previsione dei blocchi. Ogni blocco è previsto sui valori dei tre blocchi sopra di esso e da un blocco a sinistra di esso (la decodifica del blocco viene eseguita in ordine di scansione raster: da sinistra a destra e dall’alto verso il basso). Sono disponibili quattro modalità di base per la previsione dei blocchi: orizzontale, verticale, DC (un colore) e TrueMotion. I dati errati e i blocchi non previsti vengono compressi in un sottoblocco di 4 × 4 pixel con una trasformata del coseno discreta o una trasformata di Walsh-Hadamard. Entrambe le trasformazioni vengono eseguite con aritmetica in virgola fissa per evitare errori di arrotondamento. L’output è compresso con la codifica entropica. WebP ha anche un supporto esplicito per la decodifica parallela.

L’implementazione di riferimento consiste in un software di conversione sotto forma di un programma a riga di comando per Linux (cwebp) e una libreria di programmazione per la decodifica, la stessa di WebM. La comunità open source è riuscita rapidamente a portare il convertitore su altre piattaforme, come Windows.

La compressione WebP lossless – senza perdita (un formato più recente non correlato a VP8) è stata progettata dall’ingegnere del software di Google Jyrki Alakuijala. Utilizza tecniche avanzate come codici entropici dedicati per diversi canali di colore, sfruttando la località 2D delle distanze di riferimento all’indietro e una cache dei colori usati di recente. Questo integra le tecniche di base come la codifica del dizionario, la codifica di Huffman e la trasformazione dell’indicizzazione del colore. Questo formato utilizza una definizione ricorsiva: tutte le immagini di controllo come la selezione del codice entropico locale sono codificate allo stesso modo dell’immagine intera stessa.

Cosa può contenere un file WebP? Il contenitore WebP (ovvero il contenitore RIFF per WebP) consente il supporto delle funzionalità oltre il caso d’uso di base di WebP (ovvero un file contenente una singola immagine codificata come fotogramma chiave VP8). Il contenitore WebP fornisce supporto aggiuntivo per:

• Compressione senza perdita: un’immagine può essere compressa senza perdita di dati utilizzando il formato WebP senza perdita.
• Metadati: un’immagine può contenere metadati archiviati nei formati Exif o XMP.
• Trasparenza: un’immagine può avere trasparenza, ovvero un canale alfa.
• Profilo colore: un’immagine può avere un profilo ICC incorporato come descritto dall’International Color Consortium.
• Animazione: un’immagine può avere più fotogrammi con pause tra di loro, rendendola un’animazione.

Perché si parla tanto di WebP

Le immagini WebP sono più piccole delle loro controparti JPEG e PNG, di solito i file sono più leggeri nell’ordine del 25–35%. Immagini più leggere riducono le dimensioni della pagina e migliora le prestazioni ed i tempi di caricamento.

• YouTube ha scoperto che il passaggio alle miniature WebP ha portato a caricamenti delle pagine più veloci del 10%.
• Facebook, passando al formato WebP, ha registrato un risparmio di dimensioni del file del 25-35% per i JPEG e un risparmio della dimensione del file dell’80% per i PNG.

WebP è un eccellente sostituto per le immagini JPEG, PNG e GIF. Inoltre, WebP offre sia compressione senza perdita che con perdita di qualità (lossless and lossy compression).

• Nella compressione senza perdita – lossless, non vengono persi dati.
• La compressione con perdita – lossy, riduce le dimensioni del file, ma a scapito della possibile riduzione della qualità dell’immagine.

Convertire immagini in WebP

Gli sviluppatori generalmente utilizzano uno dei seguenti approcci per convertire le proprie immagini in WebP: lo strumento da riga di comando cwebp o il plug-in imagemin WebP (pacchetto npm).

Quale scegliere? Il plug-in imagemin WebP è la scelta migliore se il tuo progetto utilizza script di compilazione o strumenti di compilazione (ad esempio Webpack o Gulp), mentre la CLI è una buona scelta per progetti semplici o se dovrai convertire le immagini solo una volta.

Quando converti le immagini in WebP, hai la possibilità di impostare un’ampia varietà di impostazioni di compressione, ma per la maggior parte dei casi l’unica cosa di cui avrai bisogno è l’impostazione della qualità. È possibile specificare un livello di qualità compreso tra 0 (peggiore) e 100 (migliore). Vale la pena giocare con questo valore e trovare quale livello è il giusto compromesso tra qualità dell’immagine e dimensione del file per le tue esigenze.

Usa cwebp

Converti un singolo file, utilizzando le impostazioni di compressione predefinite di cwebp:

cwebp images/flower.jpg -o images/flower.webp

Converti un singolo file, utilizzando un livello di qualità di 80:

cwebp -q 80 images/flower.jpg -o images/flower.webp

Converti tutti i file in una directory:

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

Usa imagemin

Il plug-in imagemin WebP può essere utilizzato da solo o con il tuo strumento di compilazione preferito (Webpack / Gulp / Grunt / ecc.). Questo di solito comporta l’aggiunta di circa 10 righe di codice a uno script di build o al file di configurazione del tuo strumento di build. Ecco alcuni esempi di come convertire le immagini in WebP con imagemin per Webpack, Gulp e Grunt.

Se non stai usando uno di questi strumenti di compilazione, puoi usare imagemin da solo come script Node. Questo script convertirà i file nella directory delle immagini e li salverà nella directory compressed_images.

const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');

imagemin(['images/*'], {
  destination: 'compressed_images',
  plugins: [imageminWebp({quality: 80})]
}).then(() => {
  console.log('Done!');
});

Servire immagini WebP

Se il tuo sito supporta solo browser compatibili con WebP, puoi interrompere la lettura. Altrimenti, offri WebP ai browser più recenti e un’immagine di fallback ai browser meno recenti:

Prima:

<img src="flower.jpg" alt="">

Dopo:

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

I tag <picture>, <source> , e <img>, incluso il modo in cui sono ordinati l’uno rispetto all’altro, interagiscono tutti per ottenere questo risultato finale.

• <picture> il tag fornisce un wrapper per zero o più tag e un tag .
• <source> il tag specifica una risorsa multimediale. Il browser utilizza la prima fonte elencata in un formato che supporta. Se il browser non supporta nessuno dei formati elencati nei tag , ricorre al caricamento dell’immagine specificata dal tag .
  • Il tag <source> per il formato immagine “preferito” (in questo caso è WebP) dovrebbe essere elencato per primo, prima degli altri tag <source>.
  • Il valore dell’attributo type dovrebbe essere il tipo MIME corrispondente al formato dell’immagine. Il tipo MIME di un’immagine e la sua estensione di file sono spesso simili, ma non sono necessariamente la stessa cosa (ad es. .jpg vs. image/jpeg).
• <img> il tag è ciò che fa funzionare questo codice sui browser che non supportano il tag . Se un browser non supporta il tag , ignorerà i tag che non supporta. Pertanto, “vede” solo il tag e carica quell’immagine.
  • Il tag <img> dovrebbe essere sempre incluso e dovrebbe essere sempre elencato per ultimo, dopo tutti i tag <source>.
  • La risorsa specificata dal tag <img> deve essere in un formato universalmente supportato (ad esempio JPEG), quindi può essere utilizzata come riserva.

Verifica utilizzo WebP

Lighthouse può essere utilizzato per verificare che tutte le immagini sul tuo sito vengano servite tramite WebP. Esegui il controllo delle prestazioni di Lighthouse (Lighthouse> Opzioni> Prestazioni) e cerca i risultati dell’audit di pubblicazione di immagini nei formati di nuova generazione. Lighthouse elencherà tutte le immagini che non vengono servite in WebP.

La sezione Opportunities del rapporto Lighthouse elenca tutte le immagini nei formati precedenti, mostrando i potenziali risparmi ottenuti offrendo versioni WebP di tali immagini.

Perché offrire immagini in formato WebP

JPEG 2000, JPEG XR e WebP sono formati di immagine che hanno caratteristiche di compressione e qualità superiori rispetto alle loro controparti JPEG e PNG precedenti. La codifica delle immagini in questi formati anziché in JPEG o PNG permette di ottenere caricamenti più rapidi e leggeri soprattutto sui cellulari.

WebP è supportato in Chrome e Opera e fornisce una migliore compressione con e senza perdita di dati per le immagini sul Web. Vedere Un nuovo formato di immagine per il Web per ulteriori informazioni su WebP.

Come Lighthouse calcola i potenziali risparmi

Lighthouse raccoglie ciascuna immagine BMP, JPEG e PNG sulla pagina, quindi le converte in WebP, riportando i potenziali risparmi in base ai dati di conversione.

Compatibilità dei browser

Il supporto del browser non è universale per WebP, ma risparmi simili dovrebbero essere disponibili nella maggior parte dei browser principali in un formato alternativo di nuova generazione. Dovrai pubblicare un’immagine PNG o JPEG di riserva per il supporto di altri browser. Vedi Come posso rilevare il supporto del browser per WebP? per una panoramica delle tecniche di fallback e l’elenco seguente per il supporto browser dei formati di immagine.

Per vedere il supporto del browser corrente per ogni formato di nuova generazione, controlla le voci seguenti:

• WebP
• JPEG 2000
• JPEG XR

Linee guida specifiche per lo stack

• WordPress: prendi in considerazione l’utilizzo di un plug-in o di un servizio che convertirà automaticamente le immagini caricate nei formati ottimali. Io mi trovo bene con Imagify.
• Magento: considera la possibilità di cercare nel Marketplace di Magento estensioni di terze parti per sfruttare i formati di immagine più recenti. Una delle estensioni più votate è WebP Optimized Images.
• Drupal: prendi in considerazione l’installazione e la configurazione di un modulo per sfruttare i formati di immagine WebP nel tuo sito, come ad esempio WebP. Tali moduli generano automaticamente una versione WebP delle immagini caricate per ottimizzare i tempi di caricamento.
• Joomla: prendi in considerazione l’utilizzo di una estensione o di un servizio che convertirà automaticamente le immagini caricate nei formati ottimali. Ad esempio potresti provare DJ-WebP.
• AMP: considera l’idea di visualizzare tutti i componenti amp-img nei formati WebP specificando un fallback appropriato per altri browser.

<amp-img
  alt="Misty road"
  width="550"
  height="368"
  src="image.webp"
>
  <amp-img
    alt="Misty road"
    fallback
    width="550"
    height="368"
    src="image.png"
  >
  </amp-img>
</amp-img>