Proposer une alternative aux images webp pour Safari

Afin d’améliorer la vitesse de votre site, vous pouvez proposer des images webp sur votre site (format .webp). Ces « nouveaux » formats permettent une meilleure compression en gardant la même qualité d’image. Ils sont acceptés et affichés par quasiment tout les navigateurs, sauf un, qui représente une proportion non négligeable d’internautes : Safari (Iphone, Ipad, Mac, …).

Comment proposer une alternative aux images webp pour Safari ?

Images webp et Safari

Une fois que vous avez vos images au format webp, il va falloir modifier les codes HTML correspondant aux balises <img>. Ceci afin de proposer les images aux formats webp pour les navigateurs qui pourront les afficher et aux formats classiques (jpg, png, …) aux autres.

Pour cela, trouvez vos balises classiques :

<img src="mon-image.jpg"/>

Et utilisez la balise <picture> en remplacement qui vous permet de proposer une solution alternative pour les navigateurs n’affichant pas les images au format webp :

<picture>
<source srcset="mon-image-1er-format.webp" type="image/webp">
<source srcset="mon-image-2nd-format.jpg" type="image/jpg">
<img src="mon-image-2nd-format.jpg" alt="Texte">
</picture>

Cette balise vous permet ainsi de proposer des images optimisées pour Chrome, FireFox, Edge, aux formats webp. Ceci afin d’améliorer la vitesse de votre site qui peut par exemple être mesurée avec PageSpeed Insights. Et d’autre part la balise permet de proposer des images aux formats « classiques » tels que jpg ou png pour les internautes sur Safari (Iphone, Ipad, Mac, …).

Voilà vous pouvez ainsi proposer une alternative aux images webp pour Safari. Vous aurez également ainsi optimisé la vitesse de votre site et peut-être en partie le référencement avec des images au format webp.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.