timer Tempo di lettura 7 minuti

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.

immagini 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…
    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…
    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 ChromeFirefoxEdge 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.

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.

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+

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

Contattaci

Vuoi avere maggiori informazioni

Compila il form sottostante e ti contatteremo nel minor tempo possibile