Perché dovrebbe interessarti?
Le immagini WebP sono più piccole rispetto alle controparti JPEG e PNG, in genere con una riduzione delle dimensioni del file del 25-35%. In questo modo, le dimensioni delle pagine vengono ridotte e le prestazioni migliorano.
- YouTube ha riscontrato che il passaggio alle miniature WebP ha comportato un caricamento pagina più veloce del 10%.
- Facebook ha registrato un risparmio del 25-35% sulle dimensioni dei file JPEG e dell'80% sulle dimensioni dei file PNG quando ha iniziato a utilizzare WebP.
WebP è un'ottima alternativa alle immagini JPEG, PNG e GIF. Inoltre, WebP offre una compressione sia senza perdita di dati che con perdita di dati. Nella compressione lossless non si perdono dati. La compressione con perdita di dati riduce le dimensioni del file, ma a scapito di una possibile riduzione della qualità dell'immagine.
Converti le immagini in WebP
In genere, per convertire le immagini in WebP, gli utenti utilizzano uno dei seguenti approcci: lo strumento a riga di comando cwebp o il plug-in Imagemin WebP (pacchetto npm).
Il plug-in Imagemin WebP è in genere la scelta migliore se il tuo progetto utilizza script o strumenti di build (ad es. Webpack o Gulp), mentre l'interfaccia a riga di comando è una buona scelta per i progetti di piccole dimensioni o se devi convertire le immagini una sola volta.
Quando converti le immagini in WebP, hai la possibilità di impostare un'ampia gamma di impostazioni di compressione, ma per la maggior parte delle persone l'unica cosa di cui dovrai preoccuparti è l'impostazione della qualità. Puoi specificare un livello di qualità da 0 (peggiore) a 100 (migliore). Vale la pena fare qualche prova per trovare il livello che rappresenta il giusto compromesso tra qualità dell'immagine e dimensioni del file per le 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 di qualità pari a 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.). In genere, questo comporta l'aggiunta di circa 10 righe di codice a uno script di build o al file di configurazione dello strumento di build.
Se non utilizzi uno di questi strumenti di build, puoi utilizzare Imagemin da solo come script Node. 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 ignorare questo articolo. In caso contrario, pubblica WebP sui browser più recenti e un'immagine di riserva sui 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>, compreso il loro ordine relativo, interagiscono tutti per ottenere 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 origine elencata in un formato supportato. Se il browser non supporta nessuno dei formati elencati nei tag <source>, torna a 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 non supportati. Pertanto, "vede" solo il tag <img src="flower.jpg" alt=""> e carica l'immagine corrispondente.
Lettura dell'intestazione HTTP Accept
Se disponi di un backend dell'applicazione o di un server web che ti consente di riscrivere le richieste, puoi leggere il valore dell'intestazione HTTP Accept, che indicherà i formati dell'immagine alternativi supportati:
Accept: image/webp,image/svg+xml,image/*,*/*;q=0.8
La lettura di questa intestazione della richiesta e la riscrittura della risposta in base ai suoi contenuti hanno il vantaggio di semplificare il markup delle immagini. Il markup <picture> può diventare piuttosto lungo con molte origini. Di seguito è riportata una regola Apache mod_rewrite 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 HTTP Vary per assicurarti che le cache comprendano che l'immagine potrebbe essere pubblicata in modo diverso a seconda dell'intestazione Accept:
<FilesMatch ".(jpe?g|png)$">
<IfModule mod_headers.c>
Header set Vary "Accept"
</IfModule>
</FilesMatch>
La regola di riscrittura precedente cercherà una versione WebP di qualsiasi immagine JPEG o PNG richiesta. Se viene trovata un'alternativa WebP, verrà pubblicata con l'intestazione Content-Type appropriata. In questo modo, potrai utilizzare un markup delle immagini simile al seguente con il supporto automatico di WebP:
<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 del tuo sito vengano pubblicate utilizzando WebP. Esegui il controllo del rendimento di Lighthouse (Lighthouse > Opzioni > Rendimento) e cerca i risultati del controllo Pubblica le immagini in formati di nuova generazione. Lighthouse elencherà tutte le immagini che non vengono pubblicate in WebP.