Le immagini ormai rappresentano mediamente il 50% del peso di una pagina web, per cui ottimizzare le immagini vi fa risparmiare spazio sul vostro server ma assicura che le vostre pagine siano caricate più velocemente.
Una novità nel campo delle immagini è il formato immagine WebP, con il quale è possibile creare immagini più leggere mantenendo un’ottima qualità: è possibile ridurre il peso di una immagine orientativamente del 25% rispetto a quelle in formato PNG e del 25-35% rispetto alle immagini in JPG mantenendo la stessa qualità.
CHE COS’È IL FORMATO WEBP?
Il formato WebP è stato sviluppato da Google basandolo sul codec video VP8 per ottenere un sostituto dei formati JPG, PNG e GIF, che mantenesse una buona qualità e trasparenza (dal PNG) unita a una buona compressione (JPOG e JPEG) e animazioni (delle GIF).
Inizialmente il primo annuncio presentava le immagini WebP come nuovo standard aperto per la grafica true-color compressa a perdita di colore sul web, che permetteva la creazione di file di dimensioni più piccole di qualità paragonabile al JPEG.
L’anno della svolta per il formato WebP è stato il 2012: qui è stato annunciato il supporto per immagini senza perdita di dati e traslucide, che rendeva questo tipo di immagini una alternativa al formato PNG.
Come funzionano le immagini WebP
La compressione lossy del formato WebP utilizza la codifica predittiva per codificare un’immagine, lo stesso metodo usato dal codec video VP8 per comprimere i fotogrammi chiave nei video: la codifica predittiva funziona usando i valori nei blocchi di pixel vicini per prevedere il valore in un blocco, e poi codifica solo la differenza.
La compressione senza perdita di dati utilizza frammenti di immagine già visti per ricostruire nuovi pixel, e può usare una tavolozza locale se non si trova una corrispondenza.
Confronto JPG / WebP
Qui di seguito riporto alcune immagini dalla galleria WebP di Google, non c’è una differenza notevole nella qualità tra le immagini JPEG a sinistra e le versioni WebP a destra. Quello che non si vede, a meno che non si controlli la dimensione del file, è che le immagini WebP sono più piccole di oltre il 30% rispetto a quelle JPEG per cui vi riporterò qualche dato nel confronto.
Immagine WebP
Peso: 198 kb
Immagine JPG
Peso: 297 kb
Immagine WebP
Peso: 81 kb
Immagine JPG
Peso: 121 kb
Il formato WebP su WordPress
WordPress supporta i formati di file immagine più popolari, tra cui JPEG (JPG), PNG, GIF e ICO, però non ha ancora aggiunto il supporto alle immagini WebP: non si può semplicemente andare a caricare un file WebP nella libreria multimediale di WordPress perché si otterrà un errore di sicurezza come risposta.
Non vi preoccupate! Se volete utiulizzare delle immagini WebP potete utilizzare un semplice script da aggiungere al vostro file function.php, vi raccomando però di utilizzare un tema child perché rischiate di perdere tutto al primo aggiornamento se utilizzate il tema originale.
Prima di effettuare qualsiasi modifica vi consiglio di salvare il file function, anche se utilizzate il tema child, così non rischiate e adottate la modalità “cintura e bretelle” per ripristinare subito il file senza dover ricreare il tema child.
Se volete modificare il file function direttamente dal vostro sito WordPress, i passaggi da seguire sono pochi:
- Dalla Bacheca del vostro sito WordPress selezionate la voce Aspetto del menu verticale;
- Nella scheda Aspetto, cliccate su Editor del tema;
- Alla destra della nuova finestra troverete il menu File del tema, cliccate sul file functions.php;
- Scorrete il documento e incollate il seguente codice:
function cc_bpweb_types($bpwebs) {
$bpwebs['webp'] = 'image/webp';
return $bpwebs;
}
add_filter('upload_mimes', 'cc_bpweb_types');Usate il formato WebP con prudenza
Sebbene il formato WebP sia presente da tanti anni, non è riuscito a diventare abbastanza popolare e il motivo è semplice: la colpa è dei browser! Non tutti i browser moderni supportano immagini WebP, quelli che supportano WebP sono:
- Chrome / Crhome per Android
- Edge
- Firefox / Firefox per Android
- Opera / Opera Mini / Opera Mobile
- Browser Android
- Samsung Internet
Da Settembre si è aggiunto iOS Safari, mentre Safari è parzialmente compatibile.