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.

avatar AirForceTwo | 

Il existe une solution très simple pour servir automatiquement les bonnes images aux bons clients. Et au moins c'est compatible avec tous les navigateurs et le calcul se fait côté serveur.

http://retina-images.complexcompulsions.com

avatar Goliath | 

… la solution de Chrome est nettement plus simple: pas de fichier php à intégrer et pas de fichier .htaccess et css à modifier, donc +1 pour Chrome.

avatar AirForceTwo | 

Mais si je ne me trompe pas, ca ne concerne que les balises img, pas les backgrounds. Don c'est une solution très partielle.

avatar Nicolas Furno | 

@HyperBallad :
Je pense que la méthode peut fonctionner en CSS. Et puis les images traditionnelles restent quand même les plus courantes aujourd'hui, non ?

avatar AirForceTwo | 

Je pense que les images de background sont extrêmement utilisées, souvent beaucoup plus que les images inline. Il n'y a pas que le flat design dans la vie :) et la balise img est réservée aux images de contenue, pas à la déco.

Mais je comprends ton point de vue, on n'utilise pas les images de la même manière dans un site d'information que dans un site corporatif par exemple.

avatar Nicolas Furno | 

@Goliath :
Sans compter que cette solution repose sur un cookie, un élément important au regard de la législation actuelle en Europe.

avatar AirForceTwo | 

Un cookie qui stocke la résolution de l'écran n'est pas un problème au regard de la loi européenne puisque que ça fait partie, je cite, des "cookies persistants de personnalisation de l'interface utilisateur."

avatar Strix | 

Bientôt une image légère pour le web pèsera 5mo... ^^

avatar nova313 | 

Personne, j'utilise retina.js et c'est super.

avatar Mdtdamien | 

des images deux fois plus grande sont 4 fois plus lourd.
En double la hauteur et la largeur

avatar mbpmbpmbp | 

oué mais c'est super pour les 2% de gens equipés en retina + fibre optique ;)

saturons encore plus la bande passante, bonne idée !

avatar wallou | 

C'est bien, mais a quand le passage en 64 bits...

CONNEXION UTILISATEUR