Google è costantemente alla ricerca di nuovi modi per velocizzare il caricamento delle pagine web. Un modo per farlo è ridurre le immagini web. Le immagini comprendono fino al 60%-65% di byte sulla maggior parte delle pagine web e le dimensioni delle pagine sono un fattore importante del tempo totale di rendering. Le dimensioni delle pagine sono particolarmente importanti per i dispositivi mobili, in cui le immagini più piccole fanno risparmiare larghezza di banda e durata della batteria.
WebP è un nuovo formato di immagini sviluppato da Google e supportato in Chrome, Opera e Android, ottimizzato per consentire immagini più veloci e di dimensioni più piccole sul web. Le immagini WebP hanno dimensioni circa il 30% più piccole rispetto alle immagini PNG e JPEG con qualità visiva equivalente. Inoltre, il formato dell'immagine WebP ha le stesse caratteristiche anche con altri formati. Supporta:
Compressione con perdita di dati: la compressione con perdita di dati si basa sulla codifica dei fotogrammi chiave VP8. VP8 è un formato di compressione video creato da On2 Technologies come successore dei formati VP6 e VP7.
Compressione senza perdita di dati: il formato di compressione senza perdita di dati è sviluppato dal team WebP.
Trasparenza. Il canale alfa a 8 bit è utile per le immagini grafiche. Il canale alfa può essere utilizzato insieme all'RGB con perdita di dati, una funzionalità che al momento non è disponibile con altri formati.
Animazione:supporta immagini animate a colori reali.
Metadati: possono contenere metadati EXIF e XMP (utilizzati dalle fotocamere, ad esempio).
Profilo colore: potrebbe avere un profilo ICC incorporato.
Grazie alla migliore compressione delle immagini e al supporto di tutte queste funzionalità, WebP può essere un ottimo sostituto per la maggior parte dei formati delle immagini: PNG, JPEG o GIF. Ancora meglio, sapevi che WebP consente nuove opportunità di ottimizzazione delle immagini, come il supporto di immagini con perdita di dati e trasparenza? Esatto. WebP è il coltellino svizzero dei formati delle immagini.
Come si fa a fare la magia? Rimboccati le maniche e diamo un'occhiata dietro il cofano.
WebP con perdita di dati
La compressione con perdita di WebP utilizza la stessa metodologia di VP8 per la previsione dei frame (video). VP8 si basa sulla previsione dei blocchi e, come qualsiasi codec basato su blocchi, VP8 suddivide il frame in segmenti più piccoli chiamati macroblocchi.
All'interno di ogni macroblocco, l'encoder può prevedere informazioni ridondanti sui movimenti e sui colori in base ai blocchi elaborati in precedenza. Il frame dell'immagine è "chiave", nel senso che utilizza solo i pixel già decodificati nell'immediato quartiere spaziale di ciascuno dei macroblocchi e cerca di riempire la parte sconosciuta di questi. Questa procedura è chiamata codifica predittiva (consulta la codifica intra-frame del video VP8).
I dati ridondanti possono essere quindi sottratti dal blocco, il che si traduce in una compressione più efficiente. Ci rimane solo una piccola differenza, chiamata residua, da trasmettere in formato compresso.
Dopo essere stati soggetti a una trasformazione matematicamente invertibile (la famosa DCT, acronimo di Discrete coseine Transform), i residui in genere contengono molti valori zero, che possono essere compressi in modo molto più efficace. Il risultato viene quindi quantizzato e codificato entropia. Divertente, il passaggio di quantizzazione è l'unico in cui i bit vengono scartati con perdita di dati (cerca la divisione per QPj nel diagramma seguente). Tutti gli altri passaggi sono invertibili e senza perdita di dati.
Il seguente diagramma mostra i passaggi previsti per la compressione con perdita di dati WebP. Le caratteristiche distintive rispetto al formato JPEG sono cerchiate in rosso.
WebP utilizza la quantizzazione a blocchi e distribuisce i bit in modo adattivo tra i diversi segmenti di immagine: meno bit per i segmenti a bassa entropia e più bit per quelli con entropia più alta. WebP utilizza la codifica dell'entropia aritmetica, ottenendo una compressione migliore rispetto alla codifica Huuffman utilizzata in JPEG.
Modalità di previsione VP8
Le modalità di previsione VP8 vengono utilizzate con tre tipi di macroblocchi:
- Luma 4:4
- 16x16 luma
- Crominanza 8x8
Questi macroblocchi condividono quattro modalità comuni di previsione:
H_PRED (previsione orizzontale). Riempie ogni colonna del blocco con una copia della colonna di sinistra, L.
V_PRED (previsione verticale). Riempie ogni riga del blocco con una copia della riga precedente, A.
DC_PRED (previsione DC). Riempie il blocco con un singolo valore utilizzando la media dei pixel nella riga sopra A e nella colonna a sinistra di L.
TM_PRED (previsione TrueMotion). Una modalità che prende il nome da una tecnica di compressione sviluppata da On2 Technologies. Oltre alla riga A e alla colonna L, TM_PRED utilizza il pixel P sopra e a sinistra del blocco. Le differenze orizzontali tra i pixel in A (a partire da P) vengono propagate utilizzando i pixel da L all'inizio di ogni riga.
Il diagramma seguente illustra le diverse modalità di previsione utilizzate nella compressione con perdita di dati WebP.
Per i blocchi luma 4:4, esistono altre sei modalità intra simili a V_PRED e H_PRED, ma che corrispondono alla previsione dei pixel in direzioni diverse. Ulteriori dettagli su queste modalità sono disponibili nella Guida a VP8 Bitstream.
Quantizzazione adattiva dei blocchi
Per migliorare la qualità di un'immagine, questa viene segmentata in aree che hanno caratteristiche visibilmente simili. Per ciascuno di questi segmenti, i parametri di compressione (fasi di quantizzazione, intensità del filtro e così via) sono ottimizzati in modo indipendente. Questo consente una compressione efficiente ridistribuendo i bit nei punti in cui sono più utili. VP8 consente un massimo di quattro segmenti (una limitazione del flusso di bit VP8).
Perché WebP (con perdita di dati) è migliore di JPEG
La programmazione delle previsioni è uno dei motivi principali per cui WebP vince su JPEG. Anche la quantizzazione adattiva fa una grande differenza. Il filtro aiuta a velocità in bit media/basse. La codifica aritmetica booleana offre incrementi di compressione del 5%-10% rispetto alla codifica Huuffman.
WebP senza perdita di dati
La codifica WebP-lossless si basa sulla trasformazione dell'immagine mediante diverse tecniche. Poi, la codifica entropia viene eseguita sui parametri di trasformazione e i dati delle immagini trasformati. Le trasformazioni applicate all'immagine includono la previsione spaziale dei pixel, la trasformazione dello spazio colore, l'utilizzo di tavolozze emergenti a livello locale, la pacchettizzazione di più pixel in un pixel e la sostituzione alfa. Per la codifica entropia utilizziamo una variante della codifica LZ77-Huffman, che utilizza la codifica 2D dei valori di distanza e dei valori sparsi compatti.
Trasformazione predittore (spaziale)
La previsione spaziale viene utilizzata per ridurre l'entropia sfruttando il fatto che i pixel vicini sono spesso correlati. Nella trasformazione predittiva, il valore di pixel corrente viene previsto dai pixel già decodificati (nell'ordine della riga di scansione) e viene codificato solo il valore residuo (effettivo - previsto). La modalità di previsione determina il tipo di previsione da utilizzare. L'immagine è divisa in più regioni quadrate e tutti i pixel in un quadrato utilizzano la stessa modalità di previsione.
Esistono 13 diverse modalità di previsione possibili. Quelli prevalenti sono i pixel di sinistra, in alto, in alto a sinistra e in alto a destra. Le rimanenti sono combinazioni (medie) di sinistra, in alto, in alto a sinistra e in alto a destra.
Trasformazione del colore (de-correlazione)
L'obiettivo della trasformazione del colore è decorare i valori R, G e B di ogni pixel. La trasformazione del colore mantiene il valore verde (G) così com'è, trasforma il rosso (R) in base al verde e trasforma il blu (B) in base al verde e poi al rosso.
Come nel caso della trasformazione predittiva, innanzitutto l'immagine viene divisa in blocchi e viene utilizzata la stessa modalità di trasformazione per tutti i pixel in un blocco. Per ciascun blocco esistono tre tipi di elementi di trasformazione del colore: green_to_red, green_to_blue e red_to_blue.
Trasformazione sottrazione verde
La "trasformazione verde" sottrae i valori verdi dai valori rosso e blu di ogni pixel. Se è presente questa trasformazione, il decoder deve aggiungere il valore verde sia al rosso che al blu. Questo è un caso speciale della trasformazione generale della decorazione dei colori riportata sopra, abbastanza frequente da giustificare un taglio.
Trasformazione dell'indicizzazione del colore (palette)
Se non ci sono molti valori di pixel univoci, potrebbe essere più efficiente creare un array di indici dei colori e sostituire i valori dei pixel con gli indici dell'array. A questo scopo, è possibile usare la trasformazione di indicizzazione dei colori. La trasformazione di indicizzazione dei colori controlla il numero di valori ARGB univoci nell'immagine. Se tale numero è inferiore a una soglia (256), viene creato un array di questi valori ARGB, che viene quindi utilizzato per sostituire i valori dei pixel con l'indice corrispondente.
Codifica cache colori
La compressione WebP senza perdita di dati utilizza frammenti di immagine già visti per ricostruire nuovi pixel. Può anche usare una tavolozza locale se non trova corrispondenze interessanti. Questa tavolozza viene aggiornata continuamente per riutilizzare i colori recenti. Nell'immagine seguente, puoi vedere che la cache dei colori locale in azione viene aggiornata progressivamente con i 32 colori utilizzati di recente man mano che la scansione va verso il basso.
Riferimento a ritroso LZ77
I riferimenti a ritroso sono tuple di codice di lunghezza e distanza. La lunghezza indica quanti pixel devono essere copiati in ordine di riga di scansione. Il codice distanza è un numero che indica la posizione di un pixel precedentemente visualizzato, da cui devono essere copiati i pixel. I valori di lunghezza e distanza vengono memorizzati utilizzando la codifica del prefisso LZ77.
La codifica del prefisso LZ77 suddivide i valori interi grandi in due parti: il codice del prefisso e i bit aggiuntivi. Il codice del prefisso viene memorizzato utilizzando un codice entropia, mentre i bit aggiuntivi vengono archiviati così come sono (senza codice entropia).
Il diagramma seguente illustra l'LZ77 (variante 2D) con corrispondenza di parole (anziché pixel).
Lossy WebP con alpha
Oltre alle WebP con perdita di dati (colori RGB) e WebP senza perdita di dati (RGB senza perdita di dati con alfa), c'è un'altra modalità WebP che consente la codifica con perdita di dati per i canali RGB e la codifica senza perdita di dati per il canale alfa. Questa possibilità (RGB con perdita di dati e alfa senza perdita di dati) non è attualmente disponibile con nessuno dei formati immagine esistenti. Oggi, i webmaster che hanno bisogno di trasparenza devono codificare le immagini in formato PNG senza perdita di dati, il che comporta un aumento significativo delle dimensioni. WebP alpha codifica le immagini con bassi bit per pixel e fornisce un modo efficace per ridurre le dimensioni di queste immagini. La compressione senza perdita di dati del canale alfa aggiunge solo 22% di byte rispetto alla codifica WebP con perdita di dati (qualità 90).
Nel complesso, la sostituzione del PNG trasparente con WebP con perdita di dati + alpha consente un risparmio medio delle dimensioni del 60-70%. È stata confermata come un'ottima funzionalità che attira l'attenzione per i siti per dispositivi mobili ricchi di icone (ad esempio everything.me).
