Contatti: info@aboutsolution.com +39 0536 402043
WebP

Nella fase di ottimizzazione on-page di un sito web, un aspetto importante da considerare è l’ottimizzazione delle immagini.
In questo post non tratteremo l’ottimizzazione SEO delle immagini in forma estesa, ad eccezione di una breve introduzione generale, ma ci focalizzeremo sul formato WebP.

Sono 2 gli obiettivi principali di ottimizzazione delle immagini:

  1. Aspetto SEO: l’ottimizzazione delle immagini è 1 dei circa 200 fattori di ranking (ciascuno fino a 50 variabili). La velocità dei siti web (altro fattore di ranking) occupa sempre più un peso importante per Google, poiché il crescere esponenziale della fruizione da dispositivi mobile con connettività ridotte rispetto ai device desktop, richiede maggiore leggerezza e ottimizzazione delle pagine. I file multimediali occupano un ruolo fondamentale in questo tipo di ottimizzazione.
    Quindi più leggera è l’immagine, più veloce è il tempo di caricamento della pagina, maggiore è il rank che possiamo ottenere per questo specifico punto.
    Oltre al peso dell’immagine dobbiamo considerare anche di ottimizzare: nome del file, utilizzare formati adatti al web, utilizzare risoluzioni adeguate, ottimizzare il tag alt, ottimizzare la proprietà dell’immagine, se già disponibile in rete modificarla, contestualizzazione rispetto al testo, ottimizzazioni delle immagini e delle proprietà in funzione delle lingue del sito, etc..
  2. Google Immagini: per molti settori di appartenenza e/o categorie di prodotti, la ricerca per immagini è una delle modalità di ricerca effettuate dagli utenti nella loro sessione di ricerca.
    Oggi le ricerche vengono effettuate da più dispositivi, in tempi differenti, in modalità e su canali differenti: Google, altri motori di ricerca, social network, comparatori prezzo, Google Immagini, etc.. etc..
    Pensiamo ad esempio a un utente che desidera acquistare un’auto usata e vuole vedere la differenza tra i modelli inserendo l’anno di fabbricazione, oppure una ricerca relativa a un tipo di albero o pianta, oppure una ricerca relativa a una località di villeggiatura, etc.. etc..
    Per essere maggiormente visibili e presenti nelle ricerche per le keywords che richiamano i vari prodotti o argomenti di interesse, è necessario che anche le immagini siano ottimizzate.

 

Nell’ottica di avere un’immagine particolarmente ottimizzata e adatta all’impiego web all’interno di un sito, Google ha creato il formato di immagine per il WebP.

Il formato WebP ha tutti i vantaggi degli altri formati in un solo elemento: compressione lossless, compressione lossy, trasparenza, animazione, exif metadata, profilo colore. Le immagini WebP possono quindi sostituire le immagini PNG, GIF, JPEG, matenendone le caratteristiche e funzionalità, ma con il vantaggio di un peso minore.

In parallelo al formato WebP, Google ha sviluppato WebM Project, un progetto sponsorizzato da Google relativo ad un formato video libero e royalty-free di alta qualità nella compressione video per l’uso con HTML5.

WebP è un formato di immagine relativamente recente rispetto ad altri formati immagine, la sua 1° pubblicazione risale al 30 settembre 2010.
WebP supporta sia la compressione senza perdita dati (lossless), sia la compressione con perdita dati (lossy), che consente una riduzione delle dimensioni ancora maggiore.

Le immagini senza perdita di WebP hanno dimensioni inferiori del 26% rispetto ai PNG. Le immagini con perdita di WebP sono inferiori del 25-34% rispetto a immagini JPEG comparabili con un indice di qualità SSIM equivalente.

Le immagini senza perdita di WebP supportano la trasparenza (noto anche come canale alfa) al costo di appena il 22% di byte aggiuntivi, in genere fornendo file di dimensioni 3 volte inferiori rispetto a PNG.

Un file WebP è costituito da dati immagine VP8 o VP8L e un contenitore basato su RIFF. La libreria libwebp standalone funge da implementazione di riferimento per la specifica WebP ed è disponibile nel git repository o in tarball.

 

Browser che supportano il formato WebP

WebP è nativamente supportato nei browser Google Chrome, Firefox, Edge e Opera e da molti altri strumenti e librerie software.

Gli sviluppatori hanno anche aggiunto il supporto a una varietà di tools per la modifica delle immagini (Photostop,..).

WebP include la libreria di codifica e decodifica leggera libwebp e gli strumenti da riga di comando cwebp e dwebp per la conversione di immagini da e verso il formato WebP, nonché strumenti per visualizzare, combinare e animare immagini WebP. Il codice sorgente completo è disponibile nella pagina di download.

Download del convertitore WebP

Converti la tua raccolta preferita da PNG e JPEG a WebP scaricando lo strumento di conversione precompilata di cwebp per Linux, Windows o Mac OS X.

 

Ottimizzazione avanzata delle immagini Vs compatibilità

L’ottimizzazione delle immagini con nuovi formati non pienamente compatibili, ne limita la diffusione.
WebP non è compatibile con Safari e numerosi altri browser minori, o con versioni di browser obsolete.

L’antagonismo tra Google e Apple, con la relativa incompatibilità per questo formato (in seguito sono elencati i browser compatibili con WebP), ed il fatto che seppur obsoleti, molto browser sono ancora impiegati, porta a fare alcune considerazioni.

Al giorno d’oggi, uno strumento importante come leva di acquisto/contatto o di abbandono (oltre che fattore di ranking), sono le recensioni.

Avere feedback o recensioni negative perché gli utenti non riescono a navigare correttamente il sito oppure a vedere le immagini, genera problemi di Brand Awareness, con impatti negativi nella propria community e con incidenze anche su contatti e vendite appunto.

Nel report sottostante, prendiamo ad esempio un sito di un nostro cliente, che ha generato in un mese poco meno di 400.000 utenti unici mensili. Dati significativi per poter verificare la diffusione dei browser e delle relative versioni:

Browser Compatibili WebP

E’ chiaro quanto, seppure in numero ridotto rispetto ai browser più recenti e pienamente compatibili, molto risultano tuttavia non compatibili.

Per vedere la versione dei browser utilizzati in Google Analytics dagli utenti nel proprio sito, o comunque alle proprietà collegate al proprio account, è necessario accedere: Pubblico > Tecnologia > Browser e Sistema Operativo > Dimensione secondaria: Versione browser.

Google Analytics Versione Browser

A questo URL è possibile accedere alle statistiche aggiornate, globali e per paese, dei browser e delle relative versioni impiegate nel mondo: https://gs.statcounter.com/browser-version-market-share.

Conclusioni:
WebP è un ottimo formato immagine, probabilmente il migliore per l’impiego web finalizzato alla riduzione del peso.
Tuttavia l’incompatibilità non è ancora accettabile per essere impiegato su siti che hanno un target vasto e disomogeneo.
In caso di necessità di ottimizzazioni avanzate, il consiglio è di porsi alcune domande:

  1. Essere consapevoli del proprio target di utenza: è un pubblico tecnologicamente avanzato oppure no?
  2. A quali paesi e mercati mi rivolgo? Quali sono browser e versioni impiegate in quei paesi?
  3. Quali immagini del sito sono un MUST e devono essere visibili necessariamente a tutti gli utenti e quali possono essere considerate secondarie?

Quando l’impiego di un formato immagine WebP può essere un vantaggio:

  • Se il mio sito è un e-commerce e la maggior parte degli acquisti viene effettuata con browser compatibili
  • Nel caso di un sito corporate, che genera il grosso dei contatti da utenti con browser compatibili
  • Nel caso il mio prodotto/servizio sia ad alto contenuto tecnologico, questo strumento può fungere da filtro verso gli utenti target che hanno già un approccio tecnologico avanzato
  • Nel caso di inserimento del formato WebP per immagini secondarie, incidendo minimamente sull’usabilità del sito, ma in modo rilevante sulla riduzione del peso della pagina
  • Pagine di test, versioni di contenuto parallele con ottimizzazioni dedicate, al fine di valutare oggettivamente quando sarà opportuno effettuare la sostituzione verso il formato più evoluto e ottimizzato.

 

FAQ (traduzione delle FAQ Google sul formato WebP)

  • Come funziona WebP?
    La compressione con perdita di WebP utilizza la codifica predittiva per codificare un’immagine, lo stesso metodo utilizzato dal codec video VP8 per comprimere i fotogrammi chiave nei video.
    La codifica predittiva utilizza i valori nei blocchi di pixel adiacenti per prevedere i valori in un blocco, quindi codifica solo la differenza.
    La compressione WebP senza perdita di dati utilizza frammenti di immagini già visti per ricostruire esattamente nuovi pixel.
    Può anche usare una tavolozza locale se non viene trovata alcuna corrispondenza interessante.
  • Che cos’è WebP? Perché dovrei usarlo?
    WebP è un metodo di compressione lossy e lossless che può essere utilizzato su una grande varietà di immagini fotografiche, traslucide e grafiche presenti sul web. Il grado di compressione con perdita di dati è regolabile in modo che un utente possa scegliere il compromesso tra dimensione del file e qualità dell’immagine. WebP raggiunge in genere una compressione del 30% in più rispetto a JPEG e JPEG 2000, senza perdita di qualità dell’immagine (vedere Studio comparativo).
    Il formato WebP mira essenzialmente a creare immagini più piccole e più belle che possano aiutare a rendere il Web più veloce.
  • Quali browser Web supportano nativamente WebP?
    I webmaster interessati a migliorare le prestazioni del sito possono facilmente creare alternative WebP ottimizzate per le loro immagini attuali e servirle su base mirata ai browser che supportano WebP:

    • Supporto con perdita di WebP

Google Chrome (desktop) 17+
Google Chrome per Android versione 25+
Microsoft Edge 18+
Firefox 65+
Opera 11.10+
Browser Web nativo, Android 4.0+ (ICS)

    • Supporto WebP lossy, lossless e alfaGoogle Chrome (desktop) 23+
      Google Chrome per Android versione 25+
      Microsoft Edge 18+
      Firefox 65+
      Opera 12.10+
      Browser Web nativo, Android 4.2+ (JB-MR1)
      Pale Moon 26+
    • Supporto per l’animazione WebPGoogle Chrome (desktop e Android) 32+
      Microsoft Edge 18+
      Firefox 65+
      Opera 19+
  • Come posso rilevare il supporto del browser per WebP?
    Dovrai servire le immagini WebP solo ai client che possono visualizzarle correttamente e ricorrere ai formati legacy per i client che non possono. Fortunatamente esistono diverse tecniche per rilevare il supporto WebP, sia sul lato client che sul lato server. Alcuni provider CDN offrono il rilevamento del supporto WebP come parte del loro servizio.
  • Negoziazione del contenuto lato server tramite le intestazioni Accept
    Sta diventando più comune per i client Web inviare un’intestazione di richiesta “Accetta”, che indica quali formati di contenuto sono disposti ad accettare in risposta. Se un browser indica in anticipo che “accetterà” il formato immagine / webp, il server Web sa che può inviare in sicurezza immagini WebP, semplificando notevolmente la negoziazione dei contenuti. Vedere i seguenti collegamenti per ulteriori informazioni.
  • Distribuzione di nuovi formati di immagine sul Web
    Elaborazione di immagini WebP ai visitatori mediante elementi HTML
  • Modernizr
    Modernizr è una libreria JavaScript per il rilevamento comodo del supporto delle funzionalità HTML5 e CSS3 nei browser Web. Cerca le proprietà Modernizr.webp, Modernizr.webp.lossless, Modernizr.webp.alpha e Modernizr.webp.animation.
  • Elemento HTML5 HTML5 supporta un elemento , che consente di elencare più target di immagini alternative in ordine di priorità, in modo tale che un client richieda la prima immagine candidata che può essere visualizzata correttamente.

 

Fonti Ufficiali Google:
https://developers.google.com/speed/webp/docs/c_study

https://developers.google.com/speed/webp/docs/webp_study

https://developers.google.com/speed/webp/faq




Lascia un commento

Your email address will not be published.

Scroll to Top