Ottimizza le immagini con il WebP per il SEO

webp per chrome

Ho parlato in precedenza del metodo del lazy loading ottimizzazione delle performance, ma per completare i consigli sull’ottimizzazione delle immagini manca ancora una dettagliata guida sui nuovi formati WebP, JPEG 2000 o JPEG XR.

L’ottimizzazione delle immagini tramite WebP e simili fornisce un grosso vantaggio in termini di velocità del sito, ma di contro richiedono una particolare gestione, perché la loro compatibilità non è assoluta.

Per comprendere i benefici in termini di performance apportati dall’utilizzo d questi formati, basta effettuare un test su Lighthouse di Google, prima e dopo l’ottimizzazione.

Logo WebP

I vantaggi forniti dai nuovi formati

Tutti i nuovi formati di codifica delle immagini rispondono a dei particolari bisogni. Non si tratta quindi solo di una migliore compressione, ma anche della possibilità di fornire una resa migliore rispetto ai formati originari.

JPEG 2000

Il comitato Joint Photographic Experts Group ha formalizzato questo standard nel 2000, sostituendo i vecchi calcoli di compressione con uno più aggiornato.

Sebbene la qualità dell’immagine sia migliore a parità di compressione con un normale JPEG, i browser che supportano pienamente la codifica sono ancora pochi.

JPEG XR

A differenza del JPEG il JPEG XR vanta l’opzione di compressione lossless, non presente in precedenza, il canale alfa e 48 bit di profondità del colore.

A livello di compatibilità con i browser si comporta meglio del precedente formato, ma non è ancora ai livelli del formato successivo.

WebP di Google

WebP è un formato di compressione lossless e lossy, che produce un risparmio di risorse con un risparmio del 30% se comparato con una JPEG.

Entrambe le codifiche di compressione (lossy e lossless) supportano le trasparenze dell’immagine ed hanno una compatibilità ottimale, quasi totale.

Come funziona il formato WebP

WebP è un formato supportato in maniera nativa da Chrome, Firefox, Edge e Opera. Ma in realtà la vera forza del formato consiste nell’ampio supporto ottenuto grazie ad una varietà di strumenti di modifica delle immagini.

Per lavorare con le librerie di codifica e decodifica di WebP, bisogna conoscere libwebp e le operazioni della riga di comando che rispondono a cwebpdwebp e che si occupano della conversione delle immagini verso il formato WebP e viceversa, nonché di vari opzioni utili per visualizzare e animare le immagini. 

Il codice sorgente è disponibile alla seguente pagina di download .

Convertitore WebP

Scaricando lo strumento di conversione cwebsarà possibile trasportare i file PNG e JPEG in WebP su Linux, Windows e Mac OS X.

Generare e sostituire le immagini con la versione WebP

Come ho spiegato poco sopra, il vero problema dei file WebP et similia è la compatibilità non assoluta con i browser.

A questo si aggiunge la mancanza di compatibilità con i CMS come WordPress, che hanno bisogno di plugin aggiuntivi per funzionare.

Nel caso di WordPress, esistono delle soluzioni gratuite come WebP Express che però tendono ad avere bisogno un qualcuno che li configuri e di una certa compatibilità a livello di servizio di hosting, ed esistono delle soluzioni freemium come Imagify, che offrono un servizio di conversione delle immagini che contemporaneamente tiene la vecchia versione dell’immagine all’interno di un backup.

Ma la questione più importante relativa a questi formati riguarda il codice che li sostituisce nel caso fossero visualizzati in un browser non compatibile.

Uno dei metodi più utilizzati può essere scaricato da GitHub e si chiama WebP on demand, e viene utilizzato anche da molti plugin di WordPress.

Aspetti tecnici delle WebP

Sono due gli aspetti da risolvere affinché sia possibile effettuare una sostituzione efficiente.

Il primo problema è dettato dall’intestazione dell’header fornito. Di fatto è necessario comprendere quali formati devono essere accettati quando il contenuto viene presentato ad un browser.

Per risolvere questo problema basta utilizzare il meccanismo server-driven negoziation presente nell’HTTP 1.1.

Di fatto, questo metodo di content negoziation funziona in maniera tale che lo user agent indica quali tipi di file accetta tramite il codice Accept presente nell’intestazione dell’header, e il server fornisce il formato corretto tramite il Content-type presente nell’intestazione della risposta.

Tutto questo dopo aver reso coerente gli Accept della richiesta, soluzione che richiede un po di ingegno data la confusione nelle segnalazioni da parte dei browser di cosa è accettato e cosa no.

Il secondo problema l’applicazione di un metodo univoco a tutti quegli elementi che di fatto variano al variare delle richieste (per comprendere basta solo prendere in considerazione la risoluzione dello schermo), che a loro volta possono essere salvate in cache intermedie.

Per risolvere questo problema, basta utilizzata Vary di HTTP 1.1, come nell’esempio:

  (client)  >  Accept: image/jpeg, image/png, image/mif
  (server) >  Content-Type: image/mif
              >  Vary: Accept
              >  (object)

In questo caso il client comunica che l’immagine deve variare a seconda della richiesta effettuata (da qui il Vary : Accept).

Soluzioni alternative

Esistono dei metodi più semplici per risolvere il problema; in questo articolo ne esporrò tre molto facili da realizzare.

Il primo è quello di utilizzare <picture> invece di <img> per inserire le immagini. A differenza del tag immagine, <picture> permette di inserire più fonti da cui il browser può attingere. Le fonti selezionate saranno sempre tra quelle visibili.

In molti casi questo strumento viene utilizzato per visualizzare diversi formati dell’immagine a seconda della risoluzione, ma è possibile anche aggiungere il formato WebP come da esempio:

<picture>
  <source type="image/webp" srcset="images/butterfly.webp">
  <img src="images/butterfly.jpg" alt="a butterfly">
</picture>

Il secondo metodo non ha a che fare con i nuovi formati ma è abbastanza facile da utilizzare, visto che si basa sull’attributo src-set di HTML5, che può essere servito più volte per lo stesso tag. Certo, questa soluzione non ottimizza la compressione dell’immagine ma il cambio di dimensioni fornisce un bell’abbattimento dei problemi di caricamento.

Il terzo metodo si basa sul riconoscimento tramite Javascript di una piccola immagine nel nuovo formato:

// check_webp_feature:
//   'feature' can be one of 'lossy', 'lossless', 'alpha' or 'animation'.
//   'callback(feature, result)' will be passed back the detection result (in an asynchronous way!)
function check_webp_feature(feature, callback) {
    var kTestImages = {
        lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
        lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
        alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
        animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
    };
    var img = new Image();
    img.onload = function () {
        var result = (img.width > 0) && (img.height > 0);
        callback(feature, result);
    };
    img.onerror = function () {
        callback(feature, false);
    };
    img.src = "data:image/webp;base64," + kTestImages[feature];
}

Il codice è asincrono e non bloccante, e può essere utilizzato inserendo nel callback qualsiasi codice utilizzi/dipenda dalle WebP.

Per qualsiasi domanda o dubbio consiglio la lettura delle FAQ ufficiali.

Ospitare le immagini su CDN

Ospitare le immagini su una CDN (Content Delivery Network) è una prassi consigliata a tutti quei siti di grandi dimensioni che fanno uso continuo di immagini. Un buon esempio potrebbe essere quello dei siti di news con un alto numero di contenuti creati ogni giorno.

La parte più importante è che le immagini siano ospitate da una CDN ma che quest’ultimo venga riconosciuto come un sottodominio del dominio utilizzato.

La distanza delle immagini dal sito non comporta nessuna perdita da un punto di vista SEO, anche se la segnalazione di John Muller relativa a come rendere visibile la URL delle immagini è essenziale per non perdere indicizzazione, nel caso di cambio o abbandono del servizio CDN.

Nel caso di utilizzo di una CDN ricordate solo una cosa: se utilizzate plugin che scrivono nell’htaccess rewrite non possono funzionare con questa configurazione.

Related Posts

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.