Prévoir une image alternative à une image WebP en HTML
23 mars 2020 camillejg Laisser un commentaire
Le format WebP est un format d’image poussé par Google depuis quelques années, et qui a l’énorme avantage de pouvoir obtenir des images d’une qualité quasi comparable à un png24, mais à un poids largement inférieur.
Mais ce format est pour le moment indisponible pour Safari. Donc sur Mac, iPad et iPhone, soit un échantillon significatif d’internautes, vos images WebP ne seront pas affichées. Il est donc nécessaire de proposer une image au format initial (jpg, png ou gif) afin qu’elle puisse s’afficher sur ce navigateur et ces supports.
Rien de plus simple, grâce à la balise html <picture>, qui offre la possibilité de lister les formats disponibles pour une seule et même image. Cette balise va venir en remplacement de la classique <img />.
<!-- MON ANCIEN AFFICHAGE d'IMAGE -->
<img src="mon_image_source.png" alt="Coucou webp" title="Coucou webp">
<!-- AVEC UNE WEBP ET UNE ALTERNATIVE PNG -->
<picture>
<source srcset="mon_image.webp" type="image/webp">
<source srcset="mon_image_source.png" type="image/png">
<img src="mon_image_source.png" alt="Coucou webp" title="Coucou webp">
</picture>Et voilà, vos images sont désormais disponibles pour tous les navigateurs, et particulièrement optimisées pour un affichage sur Google Chrome, Firefox ou Edge grâce à l’image WebP !
Pour ceux qui souhaiteraient en savoir plus sur comment créer une image WebP en PHP, j’ai détaillé la méthode dans l’article « Convertir une image au format WebP« .