Solution HTML aux images au format WebP sur Safari et anciens navigateurs

Un format non disponible pour certains navigateurs

Vous le savez certainement, le temps d'affichage de votre site internet est un facteur essentiel pour votre SEO (référencement naturel) et pour l'expérience utilisateur.

Dans le but d'encore améliorer l'expérience utilisateur avec un temps d'affichage moindre, Google a créé un nouveau format d'image plus performant : le Webp.
Mise en avant par Google, le format d'image WebP présente l'énorme avantage de fournir des images de haute qualité comparables au format PNG pour un poids nettement inférieur (de 25% à 30% de réduction).

Le format WebP n'est actuellement pas compatible avec tous les navigateurs comme Safari.
Donc, avec ce format, une partie importante des internautes sur Mac, iPad, et iPhones ne pourront pas visualiser vos images en WebP.
Ce manque de prise en charge est un gros problème, je le conçois.
Une solution est donc de proposer en alternative des images au format original (jpg, png ou gif) afin qu'elles puissent être vues sur ce navigateur et ces supports.
Depuis la version 14 d'iOS, Safari supporte le format WebP.

Il existe d'autres solutions plus optimisées que je ne vais pas vous exposer ici.

Solution alternative au WebP

Afin de résoudre ce problème incompatibilité avec certains navigateurs, vous devez proposer un autre format (jpg, png ou gif).
Pour cela, une résolution est l'utilisation de la balise html <picture> qui va remplacer la balise classique <img>.
Cette balise permet de répertorier les formats disponibles au navigateur pour une seule et même image.
Ainsi, le navigateur va afficher l'image qu'il pourra utiliser (le Webp en priorité).
Comme ceci :

<picture>
  <source srcset="logo.webp" type="image/webp">
  <source srcset="logo.png" type="image/png">
  <img src="logo.png" alt="Logo Yoma-Web Webp" title="Logo Yoma-Web Webp">
</picture>

Vous pouvez le constater, cette solution est très simple à mettre en place.

Il existe cependant d'autres solutions plus efficaces pour résoudre ce problème d'incompatibilité.

N'oubliez pas d'utiliser le lazyload afin d'encore optimiser l'affichage de votre page.