Chrome 34 gère correctement les images Retina

Nicolas Furno |

Sorti aujourd’hui en version bêta, Chrome 34 est le deuxième navigateur à apporter une vraie réponse aux problèmes des images adaptées aux écrans Retina, après Webkit il y a quelques mois. Sur un appareil iOS ou sur un MacBook Pro Retina, les sites doivent afficher des images deux fois plus grandes pour que le visiteur bénéficie d’une image parfaitement nette. Malheureusement, ces photos sont aussi beaucoup plus lourdes et elles restent inutiles à la majorité des internautes qui, faute d’écran Retina, ne verront pas la différence.

Jusque-là, les différentes solutions existantes relevaient toutes du bricolage. Soit le webmaster choisissait de ne proposer que des images Retina, avec à la clé de la bande passante consommée pour rien et des temps de chargement allongés. Soit il mettait en place une solution, mais le site devait alors le plus souvent charger une première fois pour déterminer si l’écran du visiteur est Retina, avant de servir les bonnes images.

La solution adoptée par Google est bien plus efficace et son intégration à Chrome est un pas en avant indéniable dans sa démocratisation. L’idée est de modifier la balise HTML img en lui ajoutant un champ srcset qui contient non seulement l’image de base, mais aussi toutes les variantes pour les écrans Retina. Sur cet exemple fourni par l’éditeur, on voit l’image originale et deux versions, une deux fois plus grande et une quatre fois plus grande qui sera utile pour les télévisions 4K. C’est le navigateur qui charge automatiquement la bonne image en fonction de l’écran sur lequel il est utilisé.

<img alt="A rad wolf." src="pic1x.jpg" srcset="pic1x.jpg 1x, pic2x.jpg 2x, pic4x.jpg 4x">

Cette syntaxe a l’avantage d’être si simple qu’elle peut être adaptée très rapidement à n’importe quel site existant. Pour le moment, elle n’est gérée que par une infime minorité des navigateurs web, mais on peut espérer que les autres acteurs suivront. Alors que Webkit a intégré la fonction il y a de cela plusieurs mois, la fonction n’a jamais été portée à Safari, le navigateur grand public d’Apple. Quant aux autres navigateurs, ils suivront sans doute forcément le mouvement, d’autant que srcset est désormais étudié par la W3C qui fixe les standards du web.

D’ici là, Chrome 34 contient d’autres nouveautés, comme la gestion des fichiers audio sans préfixe, et la prise en charge d’une balise CSS pour gérer plus finement la ligature dans les textes. Ces nouveautés sont proposées pour les versions bureautique et mobile du navigateur. Si vous voulez tester cette version bêta, vous pouvez la télécharger à cette adresse.

Accédez aux commentaires de l'article