Utilizza immagini WebP

Katie Hempenius
Katie Hempenius
X

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.

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.