Introduzione al formato WebP

WebP è un nuovo formato di immagine sviluppato da Google che supporta la compressione con perdita, la compressione senza perdita e la trasparenza; i file compressi sono più piccoli rispetto a JPEG, PNG e altri formati. Consente quindi di risparmiare larghezza di banda, ridurre i tempi di caricamento delle pagine e limitare il consumo di dati degli utenti.

Alle app Android e iOS basta integrare la libreria di decodifica fornita da Google per supportare facilmente il formato WebP. Sul web, però, il supporto a WebP non è ancora molto diffuso, secondo Dati di Can I Use，attualmente solo i browser Chrome e Opera, oltre alla WebView di Android, supportano WebP. Ma, visti i numerosi vantaggi delle immagini WebP, possiamo usarle nelle pagine web? Sì. Questo articolo affronta proprio questa questione.

Convertire le immagini esistenti nel formato WebP

Per utilizzare il formato WebP, occorre creare una versione WebP di tutte le immagini usate dal sito. Se usi un servizio CDN, in genere il fornitore offre un'opzione per la conversione in WebP. Per esempio, Upyun:

Dopo aver aggiunto questa configurazione, possiamo utilizzare le risorse in formato WebP aggiungendo il suffisso corrispondente all’URL delle immagini.

Puoi anche usare i plugin di webpack e gulp per convertire in blocco il formato delle immagini. Non approfondiremo qui.

Usare il formato WebP nel browser

Poiché non tutti i browser supportano il formato WebP, abbiamo due possibilità: usare il formato WebP solo nei browser che lo supportano; oppure consentire anche ai browser che non lo supportano di utilizzarlo.

Metodo uno： <picture>Etichette

<picture>è un nuovo tag di HTML5, simile a <video>Può anche specificare risorse in più formati, lasciando al browser la scelta del formato supportato da caricare.

<picture class="picture">
  <source type="image/webp" srcset="image.webp">
  <img class="image" src="image.jpg">
</picture>

Se il browser supporta il formato WebP, verrà caricato image.webp, altrimenti verrà caricato image.jpg。

Anche se il browser non supporta<picture> tag, le immagini continueranno a essere visualizzate normalmente, ma il CSS potrebbe non riuscire a selezionarle correttamente picture elemento. Per esempio, in IE8 il seguente CSS non avrà effetto:

.picture img {  width: 100px;  height: 100px;
}

Ma si può definire lo stile delle immagini in questo modo：

.image {  width: 100px;  height: 100px;
}

Anche se il browser utilizza immagini in formato WebP, alla fine verrà comunque applicato img lo stile dell'elemento.

Tuttavia, purché si utilizzi html5shiv，consentendo ai vecchi browser di supportare questo tag e ai selettori CSS di funzionare normalmente.

Questo metodo è il più semplice, ma non funziona sulle immagini nei CSS (come quelle di sfondo)。

Secondo metodo: usare JS per sostituire l'URL dell'immagine.

Molte delle nostre pagine ricorrono spesso al “caricamento differito” delle immagini: di solito si inserisce l'URL dell'immagine in img in un attributo personalizzato dell'elemento, poi usare JS al momento opportuno per assegnare l'URL a src attributo. Applicando un principio simile, in base al supporto del browser per il formato WebP, possiamo assegnare a img assegnare all’elemento diversi src valore.

Per prima cosa dobbiamo usare JS per verificare se il browser supporta il formato WebP, fornendogli un'immagine WebP e controllando se riesce a visualizzarla correttamente. Questo metodo è asincrono, quindi le operazioni successive devono essere scritte nella funzione di callback. Possiamo memorizzare il risultato in localStorage al suo interno, così non sarà necessario controllare di nuovo in seguito.

function checkWebp(callback) {  var img = new Image();
  img.onload = function () {    var result = (img.width > 0) && (img.height > 0);
    callback(result);
  };
  img.onerror = function () {
    callback(false);
  };
  img.src = 'data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA';
}

Poi usa il codice seguente per sostituire il relativo src in base al supporto di WebP.

function showImage(useWebp){  var imgs = Array.from(document.querySelectorAll('img'));

  imgs.forEach(function(i){    var src = i.attributes['data-src'].value;    if (useWebp){
      src = src.replace(/\.jpg$/, '.webp');
    }

    i.src = src;
  });
}

checkWebp(showImage);

Il vantaggio di questo metodo è che può essere combinato con le funzioni di caricamento differito già esistenti. Inoltre, usando JS possiamo gestire anche le immagini presenti nel CSS, come quelle di sfondo.

Terzo metodo：decodificare le immagini WebP con JS

Dato che il decoder di WebP è open source, si potrebbe implementarlo in JS? Certamente,Qualcuno ha persino scritto un decodificatore WebP in JS。Integrare questa libreria JS significa decodificare tutte le immagini WebP con JS e poi convertirle in base64，quindi sostituire l'URL originale: in questo modo anche i browser che inizialmente non supportano WebP potranno visualizzarlo correttamente. Questa libreria è molto semplice da usare; basta leggere le istruzioni sulla pagina web。

Lo svantaggio di questo metodo è che, poiché JS deve decodificare l'immagine WebP, occorre richiedere in modo asincrono l'URL in src (tuttavia, dato che l'immagine era già stata scaricata una volta, viene usata direttamente la cache); inoltre, la decodifica tramite JS è piuttosto lenta e incide sulle prestazioni, perciò potrebbe trascorrere un po' di tempo prima che l'immagine venga visualizzata.

Questi sono alcuni metodi per usare immagini WebP nel browser: puoi scegliere quello più adatto alla tua situazione. Nella nostra esperienza, dopo il passaggio al formato WebP, le dimensioni delle immagini si sono generalmente ridotte di oltre 1/3, accelerando il caricamento e riducendo il consumo di dati degli utenti. Consigliamo vivamente di iniziare a usare questo formato fin da ora.