Perché dovrebbe interessarti?
Le immagini WebP sono più piccole rispetto alle controparti JPEG e PNG, in genere in linea con una riduzione del 25-35% delle dimensioni dei file. In questo modo le dimensioni delle pagine vengono ridotte e vengono migliori le prestazioni.
- YouTube ha rilevato che il passaggio alle miniature WebP ha portato a caricamenti delle pagine più veloci del 10%.
- Facebook ha riscontrato un risparmio del 25-35% nelle dimensioni dei file dei file JPEG e dell'80% per i PNG quando sono passati a WebP.
WebP è un ottimo sostituto delle immagini JPEG, PNG e GIF. Inoltre, WebP offre compressione sia senza perdita di dati che con perdita. Nella compressione senza perdita di dati, i dati non vengono persi. La compressione con perdita di dati riduce le dimensioni dei file, ma a scapito della possibile riduzione della qualità delle immagini.
Converti le immagini in WebP
Per convertire le proprie immagini in WebP, gli utenti in genere utilizzano uno dei seguenti approcci: lo strumento a riga di comando cwebp o il plug-in WebP Imagemin (pacchetto npm). Il plug-in WebP Imagemin è generalmente la scelta migliore se il tuo progetto utilizza script o strumenti di creazione (ad es. Webpack o Gulp), mentre l'interfaccia a riga di comando è un'ottima scelta per progetti semplici o se dovrai convertire le immagini una sola volta.
Quando converti le immagini in WebP, hai la possibilità di configurare un'ampia varietà di impostazioni di compressione, ma per la maggior parte delle persone l'unica cosa di cui avrai bisogno è l'impostazione della qualità. Puoi specificare un livello di qualità da 0 (peggiore) a 100 (migliore). Vale la pena provare a risolvere questo problema, trovando il giusto compromesso tra qualità dell'immagine e dimensione dei file in base alle tue esigenze.
Utilizza 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 qualitativo 50
:
cwebp -q 50 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
Utilizza Imagemin
Il plug-in Imagemin WebP può essere utilizzato da solo o con il tuo strumento di creazione preferito (Webpack/Gulp/Grunt/ecc.). Questa operazione di solito comporta l'aggiunta di circa 10 righe di codice a uno script di compilazione o al file di configurazione per lo strumento di creazione. Ecco alcuni esempi di come farlo per Webpack, Gulp e Grunt.
Se non utilizzi uno di questi strumenti di creazione, puoi utilizzare Imagemin da solo come script dei nodi. Questo script convertirà i file nella directory images
e li salverà nella directory compressed_images
.
const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');
imagemin(['images/*'], {
destination: 'compressed_images',
plugins: [imageminWebp({quality: 50})]
}).then(() => {
console.log('Done!');
});
Pubblica immagini WebP
Se il tuo sito supporta solo browser compatibili con WebP, puoi smettere di leggere. In caso contrario, pubblica WebP nei browser più recenti e un'immagine di riserva ai browser meno recenti:
Prima:
html
<img src="flower.jpg" alt="">
Dopo:
html
<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>
, compreso il modo in cui sono ordinati l'uno rispetto all'altro, interagiscono per raggiungere questo risultato finale.
<picture>
Il tag <picture>
fornisce un wrapper per zero o più tag <source>
e un tag <img>
.
<source>
Il tag <source>
specifica una risorsa multimediale.
Il browser utilizza la prima sorgente elencata in un formato supportato. Se il browser non supporta nessuno dei formati elencati nei tag <source>
, deve caricare l'immagine specificata dal tag <img>
.
<img>
Il tag <img>
è ciò che fa funzionare questo codice sui browser che non supportano il tag <picture>
.
Se un browser non supporta il tag <picture>
, ignorerà i tag che non supporta. Di conseguenza, "vede" solo il tag <img src="flower.jpg" alt="">
e carica l'immagine.
Lettura dell'intestazione HTTP Accept
Se hai un backend per l'applicazione o un server web che ti consente di riscrivere le richieste, puoi leggere il valore dell'intestazione Accept
HTTP, che indicherà quali formati di immagine alternativi sono supportati:
Accept: image/webp,image/svg+xml,image/*,*/*;q=0.8
Leggere l'intestazione di questa richiesta e riscrivere la risposta in base ai suoi contenuti ha il vantaggio di semplificare il markup dell'immagine. Il markup <picture>
può diventare piuttosto lungo con molte origini. Di seguito è riportata una regola mod_rewrite
di Apache che può pubblicare alternative WebP:
RewriteEngine On
RewriteCond %{HTTP:Accept} image/webp [NC]
RewriteCond %{HTTP:Content-Disposition} !attachment [NC]
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f [NC]
RewriteRule (.+)\.(png|jpe?g)$ $1.webp [T=image/webp,L]
Se scegli questa strada, dovrai impostare l'intestazione della risposta Vary
HTTP per assicurarti che le cache comprendano che l'immagine potrebbe essere pubblicata con tipi di contenuti diversi:
<FilesMatch ".(jpe?g|png)$">
<IfModule mod_headers.c>
Header set Vary "Content-Type"
</IfModule>
</FilesMatch>
La regola di riscrittura sopra riportata cercherà una versione WebP di qualsiasi immagine JPEG o PNG richiesta. Se viene trovata un'alternativa WebP, verrà pubblicata con l'intestazione Content-Type
corretta. In questo modo potrai utilizzare un markup delle immagini simile al seguente con il supporto WebP automatico:
<img src="flower-320w.jpg" srcset="flower-320w.jpg 320w, flower-640w.jpg 640w, flower-960w.jpg 960w">
Verifica l'utilizzo di WebP
Lighthouse può essere utilizzato per verificare che tutte le immagini sul tuo sito vengano pubblicate tramite WebP. Esegui il controllo delle prestazioni di Lighthouse (Lighthouse > Opzioni > Prestazioni) e cerca i risultati dell'audit Pubblica immagini in formati di nuova generazione. Lighthouse elencherà tutte le immagini non pubblicate in WebP.