Utilizza immagini WebP

Katie Hempenius
Katie Hempenius
X

Perché dovrebbe interessarti?

Le immagini WebP sono più piccole rispetto alle loro 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 il rendimento migliora.

WebP è un'eccellente alternativa alle immagini JPEG, PNG e GIF. Inoltre, WebP offre la compressione senza perdita e con perdita di dati. Con la compressione senza perdita di dati non viene perso alcun dato. La compressione con perdita riduce le dimensioni del file, ma a scapito però della possibile riduzione della qualità delle immagini.

Converti immagini in WebP

In genere, per convertire le immagini in WebP vengono utilizzati uno dei seguenti approcci: lo strumento a riga di comando cwebp o il plug-in WebP Imagemin (pacchetto npm). In genere, il plug-in Imagemin WebP è la scelta migliore se il tuo progetto utilizza script di compilazione o strumenti di compilazione (ad es. Webpack o Gulp), mentre l'interfaccia a riga di comando è una buona scelta per progetti semplici o se devi convertire le immagini una sola volta.

Quando converti le immagini in WebP, hai la possibilità di impostare una vasta gamma di impostazioni di compressione, ma per la maggior parte degli utenti l'unica cosa di cui preoccuparsi è l'impostazione della qualità. Puoi specificare un livello qualitativo compreso tra 0 (peggiore) a 100 (migliore). Vale la pena fare qualche esperimento per trovare il livello che offre il giusto compromesso tra qualità delle immagini e dimensioni del file in base alle tue esigenze.

Utilizzare 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à di 50:

cwebp -q 50 images/flower.jpg -o images/flower.webp

Converti tutti i file di una directory:

for file in images/*; do cwebp "$file" -o "${file%.*}.webp"; done

Utilizzare Imagemin

Il plug-in Imagemin WebP può essere utilizzato da solo o con il tuo strumento di compilazione preferito (Webpack/Gulp/Grunt/ecc.). In genere, è necessario aggiungere circa 10 righe di codice a un script di compilazione o al file di configurazione dello strumento di compilazione. Ecco alcuni esempi di come eseguire questa operazione per Webpack, Gulp e Grunt.

Se non utilizzi uno di questi strumenti di creazione, 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!');
});

Pubblicare immagini WebP

Se il tuo sito supporta solo browser compatibili con WebP, puoi interrompere la lettura. In caso contrario, pubblica WebP per i browser più recenti e un'immagine di riserva per quelli 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 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>, viene caricata l'immagine specificata dal tag <img>.

<img>

Il tag <img> è ciò che fa funzionare il codice sui browser che non supportano il tag <picture>. Se un browser non supporta il tag <picture>, ignorerà i tag che non supporta. Pertanto, "vede" solo il tag <img src="flower.jpg" alt=""> e carica l'immagine.

Lettura dell'intestazione HTTP Accept

Se hai un back-end dell'applicazione o un server web che ti consente di riscrivere le richieste, puoi leggere il valore dell'intestazione HTTP Accept, che pubblicizza i formati di immagine alternativi 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 delle immagini. Il markup <picture> può diventare piuttosto lungo con molte origini. Di seguito è riportata una regola mod_rewrite di Apache che può pubblicare immagini WebP alternative:

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 può 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 riportata sopra cercherà una versione WebP di qualsiasi immagine JPEG o PNG richiesta. Se viene trovato un'immagine WebP alternativa, verrà pubblicata con l'intestazione Content-Type corretta. 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 sul tuo sito vengano pubblicate utilizzando WebP. Esegui il controllo del rendimento di Lighthouse (Lighthouse > Opzioni > Rendimento) e cerca i risultati del controllo Pubblica immagini in formati di nuova generazione. Lighthouse elenca tutte le immagini che non vengono pubblicate in formato WebP.