header blog

Venerdì, 11 Settembre 2020

Immagini WebP, cosa sono e come utilizzarle.

Scritto da 

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.

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:

speed insight 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.

webp compatibilità browser

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:

salvataggio webp photoshop cs5

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:

codice picture integrazione webpEssenzialmente 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.

dj WebP joomla

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

smush webp wordpress

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

shortpixel webp wordpressAnche 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.

Letto 173 volte
Luca Capponi

Sono un web designer free lance sin dal 2010, mi occupo di realizzare siti web, di trovare soluzioni per il marketing on line e per la comunicazione di piccole e medie imprese.

Email Questo indirizzo email è protetto dagli spambots. È necessario abilitare JavaScript per vederlo.