Aumenta la velocità del tuo sito con le immagini WebP

La velocità di un sito e-commerce è importante

Un tema molto caro a tutti i gestori di siti web ed e-Commerce è la velocità di caricamento.
Questo perché molte ricerche confermano che il tasso di abbandono di un sito web supera il 25% quando il tempo di caricamento di una pagina supera i 4 secondi e raggiunge il 50% quando ci si avvicina ai 10 secondi di attesa.
In particolare per chi si occupa di eCommerce la velocità del caricamento è fondamentale. Chi compra online lo fa anche per la rapidità con cui può concludere l’acquisto, oltre che per la convenienza. Per questo, più della metà degli utenti non completa l’acquisto se il sito è troppo lento.
Aumentare la velocità di caricamento di un sito può portare quindi ad aumentare le performance. 

Come migliorare le performance: il formato WebP

Google è costantemente al lavoro per consentire un’esperienza web migliore per tutti gli utenti.
Già nel 2010 aveva lanciato un nuovo formato di immagine chiamato WebP.
Questo formato riduce la dimensione delle fotografie, consentendo loro di caricarsi più velocemente sul web e aumentando la velocità di una pagina.

Il formato WebP è un formato web, cioè visibile all’interno dei browser, ciò significa che attraverso questo formato è possibile convertire le immagini senza compromettere la risoluzione e la qualità delle stesse consentendo di ridurre le dimensioni delle immagini fino al 40%.
Perché quindi non lo si è usato prima? La risposta è semplice: non tutti i browser prima supportavano (e alcuni non supportano ancora) tale formato. I tempi però sono ampiamente maturi e si iniziano a vedere sempre di più siti che sfruttano con successo questa innovativa soluzione.

Google per spingere verso questo cambiamento ha anche messo in campo uno strumento scaricabile dal sito ufficiale che consente la conversione dei file da JPEG a WebP, nonché uno strumento che permette agli utenti di confrontare le dimensioni e il tempo di caricamento delle immagini JPEG e WebP.

E’ importante inoltre ricordare che il formato WebP ha inoltre anche una relazione stretta con il posizionamento SEO, poiché Google considera la velocità di caricamento della pagina come uno dei fattori importanti di ranking.

Le caratteristiche principali delle WebP

Le immagini WebP sono molto versatili e hanno una serie di caratteristiche che le rendono quasi universali.
Ecco in breve le cose importanti che devi sapere su questo “non nuovo” formato di immagine:

• Le immagini WebP usano l’estensione di file .webp.
  Se ti capitasse d’ora in poi di scaricare un immagine con queste estensione non sorprenderti!
• WebP può avere sia una compressione come le JPEG che essere lossless, cioè priva di compressione come le PNG.
• Le immagini WebP sono potenzialmente più leggere del 25-40% rispetto a quelle JPEG .
• Le immagini senza perdita di WebP sono potenzialmente il 25% più leggere rispetto alle PNG.
• WebP supporta la trasparenza senza perdita di dati, ovvero come le PNG con canale alfa.
• WebP supporta l’animazione a frame esattamente come le GIF animate.

In poche parole, WebP è sia in grado di ridurre le dimensioni che di sostituire i vari formati di immagine JPEG, GIF, PNG .

Ecco un test pratico di compressione

Per mettere in pratica quanto detto prima allego questo screenshot qui sotto.
Ma potete replicarlo anche voi ( don’t try this at home! )  tramite i numerosi servizi online di conversione ad esempio ezgif.com.
Nell’esempio l’immagine di test di dimensioni pari a 2000×1000 px passa da 650kb a 350kb con un risparmio in kb di oltre il 40%.

Ma come fare ad ad integrare tale tecnologia sul mio sito? Vediamolo insieme:

Le immagini WebP sugli e-Commerce

Le immagini WebP possono essere integrate sulle maggiori piattaforme e-Commerce, come ad esempio Magento, OpenCart, PrestaShop ecc…infatti sono disponibili dei plugin che rendono trasparente questo processo di conversione all’utente, che in fase di upload non dovrà far nulla se non scegliere l’immagine, il sistema provvederà a convertire in automatico fotografia selezionata.
Negli e-Commerce come precedentemente spiegato diventa per cui vitale avere un caricamento veloce del sito perché anche un singolo secondo di ritardo può far chiudere il sito con la conseguente perdita del cliente.

Le immagini WebP anche su WordPress

Esistono svariati plugin per la gestione delle immagini WebP su WordPress. Uno dei migliori plugin WordPress per gestire le immagini WebP e più in generale la compressione delle immagini sui vostri siti web è Shortpixel, un’estensione disponibile sia in versione a pagamento che gratuita.

Il metodo di integrazione sui siti standard

Per integrare le webP sui siti web standard è necessario e consigliabile utilizzare un fallback per evitare di mostrare errori di immagine dovuti a browser non supportati. In questo caso, il fallback sarà sull’immagine in formato JPG o PNG. Ecco come fare.

Per questo codice, fotografia.jpg verrà caricato se l’utente ha utilizzato Safari.
E’ anche possibile far gestire da un plugin Javascript il fallback delle immagini, su questo sito css-tricks.com viene descritta la procedura da seguire in modo da bypassare l’ulteriore sforzo di programmazione.
Questo tipo di approccio un po’ macchinoso è ancora necessario visto la non compatibilità al 100% del formato.

Conclusioni

Il formato WebP è il futuro prossimo e sono sicuro che nel giro di un paio di anni sostituirà definitivamente qualsiasi altro formato sia sul web che su desktop. Nel frattempo se vuoi avere una carta veramente vincente in più rispetto ai tuoi competitors il mio consiglio è quello di passare a questa tecnologia. Se hai bisogno di una consulenza scrivici o chiamaci senza problemi.