Abbiamo già scritto alcuni articoli sull'ottimizzazione delle immagini jpegoptim, jpegtran, optipng, pngcrush e ImageMagick. Oggi vogliamo descrivere l'ottimizzazione delle immagini con webp.
La minimizzazione e la compressione sono diventate da tempo cose abbastanza standard per l'ottimizzazione del codice della pagina web. Tutte le risorse Web più diffuse ottimizzano le immagini, utilizzano lo stesso CSS quando possibile e scelgono i formati di immagine corretti. Ma questo non basta. Le statistiche dell'archivio HTTP mostrano che le immagini occupano circa il 64% delle dimensioni di una pagina web. Il nuovo standard WebP arriva per aiutare a sostituire JPEG e PNG.
Brevemente su WebP
Il formato è apparso nel 2010 e da allora è stato sviluppato da Google. WebP si basa sull'algoritmo di compressione per fotogrammi chiave del codec video VP8, con o senza perdita, ed è confezionato in un contenitore basato su RIFF. Le immagini con perdita di dati WebP sono in media del 26% più piccole rispetto a PNG e le immagini con perdita di dati WebP sono del 25-34% più piccole rispetto a JPEG con lo stesso indice SSIM. Il nuovo formato supporta anche la trasparenza (nota come canale alfa).
Principio di funzionamento
Nella compressione con perdita, WebP utilizza la codifica predittiva, in cui i valori dei blocchi di pixel adiacenti vengono utilizzati per prevedere il valore del blocco di pixel desiderato, quindi viene codificata la differenza.
La compressione senza perdita di dati utilizza frammenti ben noti dell'immagine per ricostruire accuratamente i pixel. Una tavolozza locale può essere utilizzata anche se non esiste un algoritmo di corrispondenza che ti interessa.
Vantaggi e svantaggi
Dietro:
- dimensione immagine ridotta;
- algoritmo di compressione avanzato;
- alta qualità dell'immagine;
- supporto per la trasparenza
Contro:
- scarsa prevalenza;
- “Plasticità” in compressione con perdite;
- Potrebbero andare persi i colori in pixel e altra grafica computerizzata.
WebP è già supportato in Chrome, Opera e nel browser Android standard e, con l'aiuto della libreria WebPJS, può essere visualizzato in tutti i browser più diffusi (in IE 6 e versioni successive utilizzando Flash). Inoltre, è stata sviluppata una libreria leggera di codifica e decodifica libwebp, utilità da riga di comando per la codifica e la decodifica di WebP, nonché strumenti per visualizzare, multiplexare e animare immagini in questo formato.
Installazione di cwebp
Cwebp ha binari Linux precompilati. Quindi, l'installazione è semplice da scaricare e decomprimere:
# wget https://storage.googleapis.com/downloads.webmproject.org/releases/webp/libwebp-1.0.3-linux-x86-64.tar.gz # tar zxf libwebp-1.0.3-linux-x86-64.tar.gz # cp -a libwebp-1.0.3-linux-x86-64/bin/cwebp /usr/bin/ # cp -a libwebp-1.0.3-linux-x86-64/bin/dwebp /usr/bin/
Utilizzo di cwebp
L'utilità cwebp viene utilizzata per convertire da JPEG, PNG e TIFF e dwebp viene utilizzato per la decodifica. La conversione viene avviata con un semplice comando (dalla directory delle utility):
# cwebp input.png -q 80 -o output.webp
Con lo stesso principio, è possibile avviare la decodifica. Ci sono molte opzioni e parametri aggiuntivi, incluso il controllo della codifica.
Distribuzione WebP
Quindi, eri interessato al nuovo formato, hai fatto tutti i test, guardato di nuovo le statistiche e ti sei assicurato che Chrome fosse ancora il browser web più popolare. E dopo? Successivamente, è necessario eseguire una copia di tutte le immagini in WebP (è possibile scrivere un semplice script per convertire tutti i file), quindi controllare gli utenti del sito e visualizzare le immagini compatte, se il loro browser supporta WebP.
Cioè, puoi creare il tuo script che verificherà il supporto del formato nel browser del client, che quindi si sposterà dal server web o assegnerà completamente questa attività al server web. La seconda opzione ci sembra più logica.
Negoziazione tramite intestazione Accetta
I browser passano l'intestazione Accept come:
nell'Opera:
Accept: text / html, application / xml; q = 0.9, application / xhtml + xml, image / png, image / webp, image / jpeg, image / gif, image / x-xbitmap, * / *; q = 0.1
in Chrome:
Accept: image / webp, * / *; q = 0.8
Sapendo questo, puoi configurare il server web per trasmettere automaticamente WebP. Ad esempio, utilizziamo Nginx, nel file di configurazione di cui è necessario aggiungere qualcosa del genere:
location / {
if ($http_accept ~* "webp") { set $webp_accept "true"; }
if (-f $request_filename.webp) { set $webp_local "true"; }
if ($webp_local = "true") {
add_header Vary Accept;
}
# if the client supports WebP, then upload the file
if ($webp_accept = "true") {
rewrite (.*) $1.webp break;
}
} La configurazione di Apache sarà simile. Se il supporto WebP non viene trovato in Accetta, vengono trasferiti i file ordinari. Bene, se Nginx viene utilizzato come proxy per la memorizzazione nella cache di elementi statici, la configurazione sarà diversa:
server {
location / {
if ($http_accept ~* "webp") { set $webp T; }
proxy_cache_key $scheme$proxy_host$request_uri$webp;
proxy_pass http://backend;
proxy_cache my-cache;
}
} Conclusione
Il formato immagine WebP ridurrà notevolmente le dimensioni della pagina Web, ma dato il suo supporto limitato, è necessario configurare ulteriormente il server Web e contenere copie di tutte le immagini in diversi formati.