Supporter les résolutions retina

05244138-photo-macbook-pro-retina-profilImaginez un instant la tristesse que ressentent les possesseurs d’un macbook pro retina lorsqu’ils visitent un site qui n’a pas été conçu pour supporter leur résolution. A chaque fois, ils hésitent à prendre rendez-vous chez leurs opticiens. Pour éviter ça, pensez-y lors du design de votre site. Il suffit de tout faire en "x2", c’est à dire que pour un site d’une largeur de 1200px, partez sur une maquette qui en fait 2400. Pour l’intégration, c’est encore plus simple.

Il existe des scripts qui, une fois la page chargée, vérifient s’il s’agit d’un écran retina, si oui vérifient la présence d’une image portant le même nom que celle déjà chargée suivi de @2x (convention mise en place par Apple pour le développement des applications iOS), et si oui remplacent la source de la balise <img>.

C’est lourd, il a des appels au server dans tous les sens, les images sont chargées deux fois… Et en plus ça se voit (le site apparaît une première fois pas très net puis s’afine une fois les images rechargées). Bref, pas la meilleur solution.

En fait, il suffit de préciser la hauteur ou la largeur de l’image dans les balises <img>, en mettant une source qui a déjà la résolution retina. C’est le navigateur qui fera le job au moment du rendering de la page. Par exemple, pour une image rendu en 500 x 200, le fichier sur le serveur doit être en 1000 x 400, et la balise comme ceci:

<img alt="" src="image.png" height="200" />

Certe, cela oblige les écrans non-retina à télécharger une image qui fait deux fois la résolution nécessaire, mais ça ne semble pas pire qu’une dégeulasserie en javascript et d’héberger en double les images.

Publié par

gcko

#iOS developer at @applydia, former #Epitech student, «I'm am currently making your smartphone smarter»