Retina : quelle image pour quelle résolution ?

Aujourd’hui sur le forum d’Alsacréations une question posée par un membre m’a paru très symptomatique de la mauvaise compréhension que nous avons des périphériques mobiles HD, leur surface exploitable, leur device-width et ce que cela signifie pour les ressources graphiques que nous y affichons.

Tentons d’expliquer le plus simplement possible ce phénomène : celui des répercutions des écrans Haute Densité sur la qualité et le poids des images que nous appelons “rétina”.

La question posée sur le forum est celle-ci :

Si je veux mettre une image pleine largeur sur l’iphone 3 et 4 et ce avec la même qualité d’image pour les 2, mon image devra avoir une largeur de 320px ou 980px? (sachant que mon site est responsive et que les images auront un max-width: 100%). Qu’est ce qui importe au final pour avoir un rendu équivalent, le device width ou le viewport ?

C’est parti. On va essayer d’avancer point par point…

Échauffement

1- Par défaut, et à condition d’être sur Safari mobile, les valeurs de largeur des iPhones 3, 4 et 5 sont :

  • viewport (= width) = 980px
  • device-width = 320px

2- Si on applique une meta viewport (valeur width=device-width; initial-scale=1.0), alors les valeurs deviennent :

  • viewport (= width) = 320px
  • device-width = 320px

Cela signifie que, quelle que soit la version d’iPhone :

  • Dans le cas n°1, une image de 320px de large occupera environ 1/3 de l’écran.
  • Dans le cas n°2, une image de 320px de large occupera exactement la totalité de l’écran.

Si vous êtes déjà perdus, prenez le temps de tester votre périphérique sur mydevice.io, voire de le comparer aux autres devices et faites-vous une première idée.

Où l’on introduit du Retina, du DIPs et du pixel-ratio

Retina(™) est une marque déposée par Apple. Considérons pour simplifier qu’il s’agit des versions récentes des écrans de haute densité quel que soit le constructeur.

La notion de Haute Densité, ou Retina chez Apple, introduit également celle des “device independant pixels” (DIPs) : pour des raisons de rétrocompatibilité, les constructeurs se basent sur une unité de pixel qui demeure identique quelle que soit la résolution.

La valeur de device-width d’un périphérique est donc non pas exprimée en pixels mais en DIPs. Ainsi l’on comprend mieux pourquoi iPhone 3, 4 et 5 ont tous la même valeur de device-width, à savoir 320px.

… Mais cela n’empêche pas les périphériques de disposer de matrices physiques (en vrais pixels) différentes de 320px. Par exemple l’iPhone 4 et l’iPhone 5 ont une matrice réelle de 640px de large. La valeur de pixel-ratio étant alors le rapport entre la largeur physique et la largeur en device-width (par exemple “2” pour l’iPhone 4+ par exemple).

Conséquence sur la qualité des images

Si l’on souhaite une image de qualité équivalente sur toutes les générations d’iPhone, ça se complique, car :

  • L’iPhone 3 (non retina) a une matrice physique de 320px de large
  • L’iPhone 4 et 5 (retina) ont une matrice physique de 640px de large
    Donc avec notre image de 320px de large (qui occupe toute la surface, rappelons-le, quel que soit l’iPhone), l’iPhone 4 et 5 seront “en manque” de pixels pour remplir leur matrice physique. Il vont (mal) interpoler les pixels manquants à l’image et… elle sera un peu floue. Un comble pour un écran rétina !

Il faudra par conséquent, pour remplir tous les pixels de la matrice, proposer une image de 640px de large. Mais là c’est le drame puisque seul 320px vont rentrer dans sa largeur qu’il pense avoir, soit 320px. Vous me suivez encore ? 🙂

Et c’est là qu’on en arrive à l’aberration suivante :

  • Pour l’iPhone 3 (non retina / pixel-ratio: 1), il faut une image de 320px de large
  • Pour l’iPhone 4 et 5 (retina / pixel-ratio: 2), il faut une image de 640px de large que l’on devra déclarer à width=320 (ou utiliser max-width: 100%). Elle sera alors parfaite pour lui et sa matrice physique de 640px
  • Pour les devices de pixel-ratio: 3, et ils sont déjà plusieurs, ce sera une image de 960px bien-sûr
  • Et pour tous les autres pixel ratios ? Ben euh, commment vous dire ?

Les solutions ?

Il n’y en pas pas vraiment. Il faudrait dans l’idéal supporter toutes les valeurs de pixel-ratio (et il y en a un paquet) et proposer une image adaptée en conséquence, soit 4 ou 5 tailles différentes pour chaque image.

Autres alternatives bien moins coûteuses en temps et en énergie : opter pour des formats graphiques vectoriels (SVG, iconfonts, CSS), ou ne pas utiliser d’images du tout.

Toutes les autres solutions relèvent de la bidouille tant que les brouillons des standards de <picture> ou srcset ne seront pas implémentés correctement.

Et la connectivité, bordel ? Ben oui, ça va bien de balancer des images 2 ou 3 fois plus grosses que nécessaire sur mon écran rétina en 3g, mais si je préférais que ça aille vite ? Hein ?

Bon ben ça c’est une autre vaste question mais sachez qu’il est possible voire vivement conseillé de détecter la connectivité avant de balancer de grosses images à votre visiteur qui ne les a pas demandées et qui va s’empresser de quitter votre site lent et aller voir du côté de votre concurrent.

5 réflexions au sujet de « Retina : quelle image pour quelle résolution ? »

  1. Sacrée prise de tête en effet, pour le pixel-ratio *2 j’ai plutôt tendance à garder une image en 320px mais avec une résolution (dpi) de 144 au lieu de 72. J’imagine que cela revient au même, l’essentiel étant de partir d’une image bien définie.

    1. Malheureusement non. Sur un écran numérique, contrairement à une imprimante, la notion de résolution d’une image n’est pas prise en compte. Ton image sera reconnue en 320px, quelle que soit sa résolution :/

  2. Ah d’accord, merci pour la précision 😉 je vais m’empresser d’en tenir compte.

    Concernant les éléments ou srcset en questions, même quand ils marchent cela pose une question pratique : comment gérer un site sachant que pour chaque image en pixels il en faut idéalement X versions ? On peut imaginer un système d’upload qui génère automatiquement les différentes versions (avec des options de zoom et de crop soyons fous), je ne sais pas si ça existe déjà mais ça m’intéresserait énormément si c’est intuitif.

  3. Ce sujet est encore un peu nébuleux pour moi.

    Si on envoi à notre device une image de 320px sans tenir compte de la résolution réelle, je comprends que l’affichage sera correct sur tous les types d’écrans, sauf qu’on n’exploitera pas les hautes résolutions permises par certains devices. C’est juste? Le rendu-final serait donc identique sur un retina et sur un écran lambda. Dommage, certes, mais ne serait-ce pas acceptable pour bon nombre de projets au budget limité?
    Est-ce que je me trompe?

    hors-sujet : je ne cache pas un gros doute concernant l’intérêt réel d’une résolution si élevée pour 95% des utilisateurs. Quelqu’un a un jour critiqué la qualité d’un visuel que j’avais produit. Il l’avait affiché sur son iphone qui dispose quand même d’un écran retina </ton prétentieux>. Bon, si c’était pourri, c’est parce que son écran retina lui cramait sa batterie trop rapidement, et qu’il avait mis la luminosité au minimum. Bon. Autant acheter une Ferrari et rouler à 80 sur autoroute.

Les commentaires sont fermés.