A cosa servono e cosa sono i formati ottimizzati?
Spesso controllando le performance del proprio sito (ad esempio con LightHouse di Chrome) ci viene suggerito di ottimizzare le immagini usando dei formati più recenti come Webp, JPEG 2000 o JPEG XR. Si tratta in sostanza di una nuova serie di formati volti a aumentare il livello di compressione delle immagini garantendo (loro dicono addirittura migliorando!) la qualità dell’immagine. Nel caso di un sito in modalità Desktop l’impatto che può dare un’ottimizzazione di questo tipo è in genere limitato,nel caso della modalità mobile invece le cose diventano decisamente interessanti!
Supporto ed utilizzo
E veniamo al punto: se questi formati consentono di migliorare le performance e la qualità delle immagini per quale motivo la stragrande maggioranza dei siti ancora non ne fa uso? Indovinate un po’? il supporto dei browser! JPEG 2000 e JPEG XR sono decisamente poco supportati mentre Webp ha un supporto migliore e se dovessi puntare i miei soldi direi che sarà, con buona probabilità, il formato del futuro.
Quindi, visto quanto detto sopra, ho deciso di concentrarmi su Webp che, tra i tre nuovi formati, è quello che ha il supporto migliore (che c’entri qualcosa il fatto che è stato creato da Google?). Ma, migliore non significa pienamente supportato (altrimenti perché starei a scrivere questo articolo?). Indovinate chi è il colpevole? “l’amata” Apple (che Dio l’abbia a se, possibilmente il prima possibile!). Le ultime versioni di safari “sembrano” supportare il formato decentemente ma basta una versione di iOS di un paio d’anni fa e le cose si complicano!
Bisogna quindi capire come gestire al meglio la compatibilità con eventuali versioni del browser che non supportino Webp. Le casistiche tipiche di utilizzo delle immagini in una pagina HTML si riducono in genere all’uso del tag <img> oppure al caricamento dell’immagine tramite css (attributo background-image) vediamo quindi come gestire queste due situazioni.
inserimento tramite tag <img>
Questo è il caso basilare e si può gestire in questo modo:
<picture>
<source srcset="images/example-image.webp" type="image/webp">
<source srcset="images/example-image.jpg" type="image/jpeg">
<img src="images/example-image_old.jpg">
</picture>al comune tag <img> viene sostituito il blocco identificato dal tag <picture>, il funzionamento mi sembra intuitivo.
inserimento tramite css
In questo caso le cose si complicano: l’idea base è quella di disporre di classi “distinte” che supportino l’uno o l’altro formato in base a quanto possibile per il browser. La soluzione è:
<html lang="it" class="no-js">
<head>
<script src="modernizr-custom.js"></script>
<style>
#pic {
background-color: red;
width: 800px;
height: 800px;
}
.webp #pic {
background-image: url('images/example-image.webp');
}
.no-webp #pic {
background-image: url('images/example-image.jpg');
}
</style>
<head>
<div id="pic"></div>
</html>In sostanza usiamo Modernizr per capire se il formato è supportato o no dal browser (tra l’altro possiamo generare una build ad-hoc senza caricare tutta la libreria). Modernizr si occupa di verificare se il browser supporta o meno le funzionalità richieste ed aggiunge una classe ad-doc al tag <html> (webp per l’esito positivo, no-webp per quello negativo). Detto questo il funzionamento delle classi css penso sia auto esplicativo. L’unico problema nella gestione di questa casistica potrebbe essere la mancanza di supporto javascript del browser usato. Potremmo parlare ore sul perché un utente possa voler disattivare javascript nonché sulle implicazioni derivate: mi limito a riportare la soluzione al problema lasciando a voi le congetture.
<script>
document.documentElement.classList.remove("no-js");
</script>
.no-js #pic {
background-image: url("image.jpg");
}Inserendo, nelle posizioni opportune, queste righe di javascript e classi css si può ovviare alla mancanza di supporto javascript. In sostanza se javascript è attivo viene rimossa la classe “no-js” e la gestione diventa quella sopra descritta, viceversa Modernizr non può fare il suo lavoro la ma nuova classe css aggiunta consente di gestire l’immagine nel vecchio formato sicuramente compatibile con tutti i browsers.
Conclusioni
Le soluzioni proposte sono solo alcune di quelle possibili: un’altra soluzione comune è quella di usare alcuni servizi proposti dai vari CDN (es. cloudflare) che consentono la conversione “trasparente” del formato. Quanto proposto sopra è in genere sufficiente per garantire l’uso corretto del formato Webp ed il conseguente miglioramento delle performance del proprio sito.