WebP è un formato di immagine sviluppato da Google che permette una compressione superiore a Jpeg, Png, Gif, migliorando le performance di velocità delle pagine web.
L'efficacia dei siti web moderni si basa, oltre ai contenuti, a tutta una serie di accorgimenti tecnici, uno dei quali è l'ottimizzazione della velocità di caricamento delle pagine web.
Se i contenuti del tuo sito web si visualizzanno con tempistiche superiori alla soglia di attenzione degli utenti, questi tenderanno ad abbandonarlo per visitare i tuoi competitor con siti "più veloci".
Se la tua pagina web si carica entro 5 secondi vuol dire che è mediamente ottimizzata per avere buone performance, in caso contrario dovrai lavorare per migliorarle, puoi fare una valutazione in autonomia sulla velocità del tuo sito leggendo i miei consigli su questo mio post.
Una delle (tante) ottimizzazioni che puoi effettuare è lavorare sulle immagini, riducendone peso e dimensioni e utilizzando formati più moderni come appunto il WebP, cercherò di aiutarti con una panoramica di questo formato next gen per le immagini.
Indice dei contenuti
Per farti capire meglio parto da un test di velocità su una delle mie landing page relativa alla realizzazione di siti web professionali, per Page Speed Insight i tempi di prima visualizzazione dei contenuti sono variabili tra 1.8 secondi e 2.8 secondi (dipende dai tempi di risposta del server), quindi tutto sommato buoni ma pur sempre migliorabili.
Il tool stesso mi suggerisce alcune operazioni, tra queste mi indica di pubblicare le immagini in formati più recenti:
Come puoi vedere sono indicati i formati che consentono una compressione migliore rispetto a PNG e JPEG e fra questi troviamo appunto WebP.
Perchè scegliere WebP al posto degli altri formati?
Secondo Google, offre una qualità superiore di compressione (con e senza perdita) rispetto alle immagini JPEG e PNG.
Nello specifico, sono 26% più piccole delle corrispettive PNG e il 25-34% rispetto alle JPEG, confrontate a equivalente indice di qualità.
La domanda che potresti avere in testa è: "Se sai che questo formato velocizza le tue pagine web, perchè non lo stai ancora utilizzando?".
Risposta: Purtroppo fin ora non ha avuto piena compatibilità con i vari browser, in particolare con Safari, per cui un bella fetta di utenti non avrebbe benifeciato di maggiore velocità nelle pagine web.
Ora però siamo al giro di boa, a partire dalla versione 14, Safari ha aggiunto la compatiblità, sia nella versione per desktop che in quella mobile, i dispositivi Apple più recenti ed aggiornati potranno utilizzare questa tecnologia.
Tra l'altro la miglior compressione è solo uno degli aspetti positivi di questo formato, le altre caratteristiche si possono riassumere in:
- Trasparenza: il canale alfa a 8 bit, offerto dal formato WebP, può essere utilizzato anche in caso di compressione RGB con perdita di dati.
- Metadati: WebP può contenere metadati EXIF e XMP generati tipicamente dalle fotocamere.
- Profilo di colore: il formato di Google può contenere profili ICC incorporati (set di dati che descrivono lo spazio cromatico).
- Animazioni: il formato WebP consente la memorizzazione di sequenze di immagini.
- Il futuro è quindi indirizzato e pronto per utilizzare questo formato di immagini, vediamo come poter lavorare per sfruttare appieno le loro potenzialità.
Come realizzare immagini in WebP
Se per elaborare le tue foto/illustrazioni/immagini usi Photoshop, nativamente non potrai lavorare con questo formato di immagini, dovrai utilizzare un plugin per rendere compatibile il programma.
Ne esistono diversi, uno tra tutti è quello creato direttamente da Google, ovvero WebPShop, lo puoi trovare a questo link con le istruzioni di installazione, io lo utilizzo anche sulla mia vecchissima versione di Photoshop, la CS5.
Una volta installato avrai la possibilità di aprire questo formato di file e soprattutto di salvarlo:
Puoi utilizzare altri software per creare le tue immagini, per esempio le ultime versioni di Gimp supportano il formato WebP, così come Picasa o Sketch.
Se invece non vuoi utilizzare un programma sul tuo computer puoi utilizzare uno dei tanti tool on line, lascio a te la ricerca di quello che più ti possa piacere.
Come inserire immagini in WebP su pagine statiche (senza CMS)
Se il tuo sito è stato realizzato senza utilizzare Wordpress, Joomla o altri CMS, dovrai incorporare a mano il codice per poter far visualizzare le tue immagini in WebP, vediamo come:
Essenzialmente stiamo utilizzando il tag HTML5 Picture con attributi specifici per definire il tipo e il percorso dell’immagine da mostrare:
Srcset: l’URL dell’immagine da utilizzare per ogni tipo di estensione
Type:l’Internet media type della sorgente
Con questa sintassi i browser che non supportano i tag picture (vecchie versioni di Safari, Internet Explorer, etc.) visualizzeranno l'immagine in jpeg specificata tramite il tag img.
Come utilizzare immagini WebP con Joomla
Con questo CMS potrai utilizzare un plugin specifico e gratuito: DJ WebP by DJ Extension.
Il plugin è regolarmente inserito nella JED (la directory delle estensioni di Joomla) e puoi trovarlo a questo link, se vuoi invece avere informazioni su come installarlo, configurarlo ed utilizzarlo visita questo link.
Al momento è utilizzabilie esclusivamente solo su Joomla 3, per la versione 4 che dovrebbe essere rilascaita entro fine anno ma attualmente in beta, non è stato ancora rilasciato nessun aggiornamento.
Come lavora sul tuo sito Joomla?
Genera una nuova versione delle immagini presenti sul server in formato WebP e sostituisce i collegamenti, tu devi solo settare al meglio le directory delle immagini che vuoi vengano convertite.
Funziona bene?
Posso rispondere con un si convinto, mentre scrivevo questo post, ho deciso di implementarlo sul sito, il processo è avvenuto senza particolari problemi e tutto funziona egregiamente.
Se sul tuo sito Joomla utilizzi un builder dovresti trovare le istruzioni per renderlo compatibile con questo formato di immagini, per esempio per SP Page Builder puoi trovarle a questo link.
Come utilizzare immagini WebP con Wordpress
Anche per il Cms più utilizzato al mondo esistono soluzioni che convertono le tue immagini da Jpeg/PNG a WebP, in realtà nel repository si trovano parecchi plugin che svolgono questa operazione.
Il più utilizzato è Smush – Compress, Optimize and Lazy Load Images
Vanta più di 1 Milione di installazioni e offre numerose funzioni oltre alla conversione delle immagini in formato nex-gen.
Un altro plugin che voglio indicarti è ShortPixel Image Optimizer
Anche lui plugin gratuito che vanta più di 200000 installazioni e molto apprezzato da web designer e web developer.
Nel repository dei plugin di Wordpress puoi trovare altre decine di plugin per le immagini in WebP, se i due che ti ho indicato non ti convincono potrai sicuramente trovare quello più adatto alla tue esigenze.
Conclusioni
Come avrai intuito dalla veloce panoramica sul mondo WebP di questo post, i tempi sono più che maturi per utilzzare questo formato di immagini che puoi aiutarti a migliorare le performance del tuo sito web.
Come consiglio finale ti invito a non far fare tutto il lavoro ai CMS, prepara le tue immagini per il web ottimizzandole con il tuo software di elaborazione e poi inseriscile nei contenuti del tuo sito in modo che questo effettui la conversione partendo da una base gia solida.
