Utilizzare il formato WebP per le immagini in WordPress

WordPress 5.8 aggiunge la compatibilità al formato WebP

Un’interessante e recente novità in ambito web è l’aggiunta della compatibilità del formato WebP sul noto CMS WordPress a partire dalla versione 5.8 rilasciata ufficialmente il 20 Luglio 2021.

Questo significa che, da questo momento in poi, i siti WordPress avranno un’importante marcia in più: il formato WebP, infatti, ci offre la possibilità di ridurre sensibilmente il peso delle immagini contenute all’interno del nostro sito web, riducendo di conseguenza i tempi di caricamento delle pagine che ne contengono.

Le immagini in formato WebP si comporteranno quindi come tutte le altre: sarà possibile aggiungerle alla Media Library di WordPress e la relativa gestione sarà identica a quella a cui siamo attualmente abituati per i formati JPG, PNG o qualsiasi altro formato finora ufficialmente supportato.

Perchè è importante convertire le immagini in WebP nei siti WordPress?

Il formato WebP è un formato abbastanza recente, lanciato da Google stessa nel 2010, e rappresenta un grande passo avanti nella gestione delle immagini in ambiente web.

Va da sè che un formato creato appositamente per essere utilizzato in un determinato ambiente sarà probabilmente la scelta migliore da intraprendere, ma vediamo meglio nel dettaglio quali sono le caratteristiche di questo formato:

• si stima che a parità di qualità e formato, un’immagine WebP pesi in media il 25/35% in meno della sua corrispondente JPEG e PNG;
• supporta sia compressioni senza perdita di dati lossless che compressioni con perdita di dati lossy;
• supporta le trasparenze, riducendo il peso di quest’ultime di quasi 1/3 rispetto al formato PNG;
• può sostituire, oltre ai più comuni formati JPEG e PNG, anche il formato GIF animato. Anche in questo caso con un notevole guadagno in termini di peso del file immagine caricato;
• è supportato dai maggiori browser disponibili nel web (Google Chrome, Firefox, Edge, Opera, etc..);

Se desideri approfondire nel dettaglio la compatibilità del formato WebP puoi consultare la seguente pagina web https://caniuse.com/webp.

Una nota da sottolineare è la compatibilità, purtroppo ancora parziale, per il browser Safari che supporta il formato WebP a partire dalla versione macOS 11 Big Sur, quindi gli utenti con macOS Catalina, ad esempio, non potranno vistalizzare correttamente il formato WebP. Ma non temere, continua a leggere questo articolo per scoprire come risolvere questo problema!

Ad ogni modo, i benefici di passare a questo formato sono davvero molti, vedremo più nel dettaglio nel paragrafi successivi in che modo questo formato ci aiuta nell’ottimizzazione SEO on page e nella gestione dei contenuti grafici di WordPress.

Utilizzare il formato WebP per ottimizzare le immagini in ottica SEO

Per i professionisti che operano in ambito SEO questo è un periodo di osservazione, sappiamo infatti che Google ha recentemente aggiornato l’algoritmo dei suoi Google Bot pertanto le tecniche di ottimizzazione potrebbero subire delle variazioni nel prossimo futuro.

Quello che sappiamo con certezza però è che Google, e tutti i motori di ricerca disponibili nel mondo del web, stanno man mano spostando l’attenzione sull’usabilità dei siti web attraverso dispositivi mobili. Questo avviene perché assistiamo ogni anno ad un importante incremento degli utenti che navigano il world wide web con il proprio smartphone: ad oggi si stima infatti che il 52% della navigazione avvenga proprio da questi dispositivi.

Qual’è il principale problema di un dispositivo mobile non connesso a una rete cablata? Chiaramente la disponibilità di una connessione stabile e veloce. Questo si traduce nell’esigenza di avere siti web veloci e ottimizzati per questa tipologia di dispositivi.

Ma in che modo possiamo rendere più veloce il nostro sito web? Le ottimizzazioni applicabili sono davvero moltissime, ci occuperemo in questo articolo dell’ottimizzazione delle immagini e di comprendere meglio in che modo il formato WebP ci viene in aiuto.

Partiamo da un’analisi di tipo intuitivo: WebP è un formato di Google e l’ottimizzazione SEO ha lo scopo di migliorare il posizionamento dei siti web nelle ricerche di Google. Possiamo facilmente intuire che il Googlebot premierà positivamente l’utilizzo di questo formato (non dimenticate mai che Google non è un ente benefico ma una società di profitto, quindi non muove le sue pedine se non allo scopo di generare fatturato).

Lanciando infatti un test di velocità con Google PageSpeed Insights vedremo come questa informazione è la stessa Google a fornircela:

Il primo consiglio è quindi quello di seguire le linee guida che Google stessa ci propone.

Ora vediamo invece in che modo il formato WebP può aiutarci a velocizzare le nostre pagine e quali sono i benefici del ridurre le dimensioni dei nostri contenuti grafici:

il primo beneficio è anche il più noto, infatti la velocità di caricamento della pagina stessa sarà più rapida con immagini più leggere (meno peso > meno banda necessaria > caricamento velocizzato);

il secondo, e probabilmente meno noto, beneficio è rappresentato dallo spazio occupato dalle immagini sul server hosting del sito web stesso.

I parametri di velocità che saranno quindi beneficiati dalla nostra conversione in WebP saranno legati sia alla velocità di caricamento dei contenuti stessi (LCP – Largest Contenful Paint) che al tempo di risposta del server (First Byte).

Come posso convertire tutte le immagini del mio sito WordPress in formato WebP?

Se sei arrivato fino a qui vuol dire che hai compreso tutte le potenzialità e i benefici che questo formato immagine può offrirti e sarai certamente alla ricerca di un metodo semplice e veloce per convertire tutte le tue immagini in WebP senza combinare qualche guaio all’interno del tuo sito web.

Esistono diversi metodi e scuole di pensiero, ma soprattutto, dipende da come il tuo sito web è strutturato e dalle tue abitudini operative per attività di questo genere.

Puoi pensare di implementare questo formato gradualmente, a partire dai nuovi contenuti che pubblicherai sul tuo sito, oppure puoi utilizzare un plugin per convertire massivamente tutte le immagini sul tuo sito WordPress.

Nella repository plugin di WordPress puoi trovare diversi plugin che possono gestire tutto in maniera automatica, molti plugin offrono la possibilità di convertire le immagini WebP sottoscrivendo un piano a pagamento o con alcune limitazioni: ad esempio per quanto riguarda la cartella immagini di riferimento, all’interno della quale eseguire le conversioni (wp-content, themes, plugins), altre limitazioni possono esserci nel peso delle immagini di partenza (alcuni plugin convertono solo immagini sotto un certo peso) o ancora potresti avere limitazioni legate al numero di immagini che è possibile convertire in un determinato periodo di tempo.

Oltretutto, molti plugin gestiscono solo la fase di compressione dell’immagine, mentre non eseguono alcuna azione in termini di riscrittura del file htaccess per l’erogazione dinamica dei contenuti. In poche parole, per ovviare al problema legato alla non ancora piena compatibilità di questo formato con tutti i browser (ricordiamo che ad oggi solo le versioni precedenti a macOS 11 Big Sur non supportano WebP), è possibile scrivere una regola htaccess per fare in modo che le immagini WebP vengano mostrate a tutti i browser compatibili che navigano il sito, mantenendo così tutte le immagini originali come fallback per i browser che non prevedono ancora il supporto a WebP.

Una soluzione versatile e abbastanza intuitiva che può aiutarti in queste operazioni è il plugin WebP Express, che ti consentirà di convertire le tue immagini e farle visualizzare in maniera dinamica.

Come potrai vedere anche dall’immagine sotto, il plugin offre differenti settaggi per selezionare quale tipologia di cartelle convertire, se convertire solo le immagini png o solo le immagini jpeg o entrambe, puoi scegliere se l’output di conversione dovrà rimanere lo stesso delle immagini originali o se creare una cartella separata e molto altro. Potrai, aspetto molto importante, anche controllare il tipo di compressione lossy o lossless senza perdita di qualità e singolarmente per le immagini png e jpeg.

Dal momento che queste operazioni non sono reversibili, il nostro consiglio è quello di effettuare queste operazioni su un ambiente di test, verificare che tutto funzioni correttamente e poi rieseguire le operazioni sull’ambiente di produzione.

Infine, tramite questo plugin potrai impostare la conversione automatica delle tue immagini WebP per il futuro, così quando caricherai un’immagine jpeg o png nella media library, sarà il plugin stesso a fare tutto il lavoro sporco!

Di contro, con questa soluzione “automatica” avremo meno controllo sulla compressione delle immagini; se vuoi sapere come comprimere manualmente le immagini in WebP gratuitamente online o con Photoshop, prova a dare un’occhio al nostro articolo dedicato che potrai consultare al seguente link: https://www.alot-art.com/magazine/content-creation/convertire-immagini-in-webp/.