Le site d’Apple est maintenant compatible Retina, tout du moins avec l’iPad. Ce que ça veut dire ? Que les images sont (parfois) plus grandes et évidemment plus lourdes, ça permet de proposer un zoom propre avec l’iPad.
Exemple simple :
L’image affichée en page d’accueil fait 454 x 605 pixels à la base (113 ko)
La version Retina (2x) fait 908 x 1 210 pixels (360 ko).
Donc oui, le site est plus lourd, au moins en partie. Le code en lui-même n’évolue pas, seules les images classiques sont plus lourdes. Est-ce que le site est moins beau, plus pixellisé, avec la version classique ? Pas vraiment, si on ne zoome pas. En fait, ça ne change strictement rien en temps normal : si ça ne pixellisait pas sur l’iPad classique, ça ne va pas pixelliser sur l’iPad 3, sauf si on zoome.
Les sites classiques ne vont pas devenir flou d’un coup de baguette magique, tant qu’on reste sur un affichage classique et que le site est adapté au départ à des écrans modernes. Un site optimisé pour le 800 x 600 avec des images en 320 x 240, oui, ça va être moche sur un iPad 3. Mais c’est déjà moche sur un iPad.
Pour tester vous-même, il faut aller sur le site d’Apple, lancer l’Inspecteur via un clic secondaire (il faut activer le menu développement dans Safari) et taper les deux lignes suivantes dans la console.
AC.ImageReplacer._devicePixelRatio = 2
new AC.ImageReplacer()
Normalement, le site va se charger en 2x et vous permettre de zoomer nettement plus sans perte de qualité.
Si vous voulez tester sur votre site, c’est assez simple (mais vos lecteurs ne vont pas aimer) : il faut simplement mettre des images en haute définition dans vos pages en fixant la taille en HTML. Le zoom sur iPad (ou dans Safari) va gérer le reste correctement. C’est le cas ici : la première version est en Retina, pas la seconde.
