In questa guida approfondiremo le modalità di gestione delle immagini webP su servizi di hosting e cloud hosting di Ergonet.
Cos'è il formato webP?
Il webP è un formato immagine creato da Google che permette di ridurre la dimensione delle immagini di un fattore che va dal 25% al 35%, senza però perdere in qualità rispetto ad una corrispettiva immagine JPEG o PNG.
Perché utilizzare webP?
L'utilizzo di formati immagini più recenti, che ottimizzino il più possibile la dimensione dei dati che un utente deve scaricare sul proprio dispositivo quando naviga un sito web, fa parte dei controlli che più incidono sul punteggio ottenuto dai siti web mediante tool come il PageSpeed di Google.
La nuova versione di WordPress 5.8, come altri CMS, permette l'upload di immagini in formato webP e sono presenti diversi plugin e tool online che convertono le immagini dai formati JPEG e PNG al formato webP.
Il formato webP è quindi una bella notizia per tutti i webmaster, ma bisogna fare molta attenzione alla compatibilità sui vari browser.
WebP e browser web
Essendo relativamente recente, il formato webP non viene supportato da tutti i browser che gli utenti potrebbero utilizzare per navigare sul tuo sito web.
Il browser di Apple Safari ad esempio, supporta le webP esclusivamente su versioni software disponibili dal sistema operativo Big Sur in poi.
Tutti gli utenti che utilizzano ancora vecchi sistemi operativi Apple e che navigano il tuo sito web, non saranno quindi in grado di visualizzare, nelle relative versioni non aggiornate di Safari e del sistema operativo MacOS o iOS, le immagini in webP.
Per questo motivo quando un webmaster decide di utilizzare le immagini webP sul proprio sito, deve assicurarsi che gli utenti che utilizzano vecchie versioni software, possano visualizzare le corrispettive immagini in formato JPEG o PNG, altrimenti il sito web si visualizzerà con uno spazio vuoto al posto dell'immagine.
Gestire webP su hosting Ergonet
Per permettere che i browser che non supportano ancora le webP visualizzino le corrispettive immagini in .PNG e .JPEG, in Ergonet abbiamo implementato un sistema di fallback direttamente lato server.
La configurazione prevede che:
- venga verificato se il browser dell'utente che richiede l'immagine, supporti il formato webp.
- se il browser supporta le webP e se esiste l'immagine, venga servita al client, quindi all'utente che la richiede. Ad esempio immagine.webp .
- se il browser non supporta le webP allora venga servita l'immagine con lo stesso nome, ma in formato png, jpeg o jpg . Ad esempio immagine.png, immagine.jpeg o immagine.jpg.
In questo modo riusciamo a mostrare all'utente un'immagine sempre compatibile con il suo browser web.
Il metodo di fallback che abbiamo studiato, sarà molto utile durante la realizzazione di un nuovo sito web. Potrai infatti utilizzare un servizio online gratuito come TinyJPG per convertire le tue immagini jpeg o png in immagini webp, per poi caricarle con lo stesso identico nome di quelle con estensione JPEG o PNG. Il nostro metodo di fallback farà il resto, seguendo il processo logico indicato sopra.
Plugin webP Wordpress
Se però il tuo sito web avesse già tante immagini JPEG o PNG e tu le volessi convertire in formato webP, è probabile che sia più comodo utilizzare un plugin.
Esistono davvero molti plugin WordPress per le immagini webp, i più utilizzati dai nostri clienti sono sicuramente Smush, Imagify e EWWW Image Optimizer. Tramite questi plugin sarà possibile:
- Convertire tutte le tue immagini esistenti dal formato JPEG o PNG a quello webP
- Salvare le immagini convertite in una specifica cartella del tuo sito in WordPress
- Impostare delle regole di fallback specifiche nel file .htaccess del tuo sito
Su tutti i servizi di hosting Ergonet, le risorse statiche come immagini, css e javascript, sono gestite dal web server NGNIX, specializzato nell'erogazione immediata e veloce di questo tipo di file. Il web server Apache invece, si occupa esclusivamente di erogare l'applicazione in php, come WordPress.
Per far funzionare correttamente i plugin per la conversione delle immagini webP, dovrai quindi disattivare la gestione delle immagini per il web server NGNIX, permettendo ad Apache (configurato ad hoc con le regole .htaccess) di poter gestire il fallback impostato dal tuo plugin webP per WordPress.
Per permettere a questi plugin di funzionare correttamente, dovrai quindi disabilitare la gestione delle immagini dal web server NGNIX.
Joomla! e immagini .webp
Joomla! non necessita di un plugin per la gestione delle immagini webp, è infatti possibile aggiungere questa estensione direttamente dalle opzioni media (Contenuti-Media-Opzioni), per permetterne l'upload e la gestione.
Sarà necessario inserire nelle apposite sezioni:
- Estensioni consentite (tipi di file): webp (separare il valore con la virgola)
- Estensioni immagini consentite (File Types): webp (separare il valore con la virgola)
- MIME Types consentiti: /image/webp (separare il valore con la virgola)
Una volta salvate le modifiche nelle "opzioni media" di Joomla!, sarà possibile inserire immagini .webp direttamente dall'editor di Joomla!.
Come abbiamo detto prima però, non tutti gli utenti potranno visualizzare le immagini webp, se utilizzano un browser non aggiornato. Per questo motivo è sempre necessario preparare le immagini in due formati: jpg e webp.
Caricati i due formati immagini nei media, sarà possibile gestire il fall back delle immagini direttamente dall'editor HTML di Joomla!, utilizzando l'elemento HTML picture:
Conclusioni
Le immagini in webP migliorano in maniera importante la velocità di caricamento di un sito web e il punteggio di Pagespeed. È però sempre necessario impostare una corrispettiva immagine in png o jpeg ,per evitare che gli utenti che utilizzano software non aggiornati, non visualizzino le immagini sul nostro sito e che abbiano una brutta esperienza durante la navigazione.
Questo articolo è stato utile?