Retina Design : La chasse aux pixels

Écrit par Nazmi Aydogdu Nb de vues 16652 Commentaires 7

Tout le monde le sait, Apple et dernièrement d'autres marques comme Samsung ont des écrans ultra haute définition (Retina).

Lecture Zen
retina design Mis à jour le 29 septembre 2021

C’est tout joli, tout beau, c’est magnifique. Mais une fois que vous surfez un peu avec votre nouveau bijou, vous vous rendez compte que les sites sont floues et ne rendent pas aussi bien qu’ils ne le devraient. C’est en fait très simple, je vais tenter de vous expliquer, dans cet article très Retina, le pourquoi du comment. Let’s Go !

retina design

Une pub pour Apple ??

Mais non voyons. Le terme Retina Design, ou Retina-Ready, encore peu utilisé en France (beaucoup plus en vogue aux States, normal), définit l’optimisation d’un site internet pour des écrans Haute-Définition (HD). Cela a commencé avec le fameux écran Retina d’Apple. Et continue aujourd’hui avec les produits haut de gamme d’autres marques, dont voici une liste :

  • Samsung Galaxy S3, S4 & Nexus,
  • les HTC One,
  • OneX & J Butterfly,
  • le LG Nexus4,
  • le Blackberry Z10.

Pour Apple, il s’agit plus précisément des Iphone 4, 4S & 5, Ipad 3 & 4, & les MacBook Pro Retina. Le terme est donc resté Design Retina, mais ne cible donc pas que les produits Apple.

Bien comprendre la technique Retina

La particularité des ces écrans réside dans la densité de pixels. En effet, pour une résolution donnée, nous allons avoir deux fois plus de pixels. Par exemple, un écran Iphone 5 de 1136/640 pixels en contient en réalité 2272/1280. Cela permet d’avoir une netteté incroyable, où il est quasiment impossible de distinguer les pixels. Oui, sauf si le site internet que vous visitez n’a pas été optimisé Retina Design. Un exemple en image ?

Admettons que nous avons besoin d’une image quelque part sur le site, je choisi d’utiliser l’image suivante, que je nomme normal.jpg, qui a 128/128 pixels (128 en longueur, et 128 en largeur) :

normal

 

Mais je n’optimise pas mon site pour les écrans HD/Retina. Voici donc le rendu que va avoir l’internaute qui visite mon site sur un écran Retina d’Apple :

normal non retina

 

C’est pas net hein ?!

Si je choisi d’optimiser le rendu HD, je dois enregistrer une image deux fois plus grande pour l’afficher sur les écrans HD grâce à ce qu’on appelle les “medias queries” (une nouvelle balise qui détecte la densité de pixels écran de l’internaute).

Dans mon code je dis : si écran Retina, affiche normal@2x.jpg. L’image normale@2x.jpg fait 256/256 pixels, le double de mon image initiale.

Voici un zoom 200% comparant l’image non-optimisée, et l’image optimisé @2x.

normal-retina
normal et retina

 

La différence de qualité saute aux yeux. En effet, si on optimise pas l’image, l’écran Retina, qui a besoin de deux fois plus de pixels, va tout simplement agrandir l’image, ce qui va la flouter.

Des habitudes à changer

Pour les concepteurs et designers web, les habitudes changent et évoluent très rapidement, le Retina-Ready vient nous le confirmer. Changer la façon de concevoir, d’intégrer un site internet nécessite quelques repères et prend un peu de temps. Pour maximiser l’optimisation Retina-Ready, le conseil le plus important et d’éviter au maximum l’utilisation d’image pour le design. Beaucoup utilisent encore des images pour faire un bouton, un onglet, une icône. Si vous en avez une trentaine sur votre projet, vous avez du pain sur la planche pour le Design Retina…

Des techniques alternatives (@font-face, nouvelles balises css3) permettent cela. Alors autant en profiter et garder l’utilisation des images pour les photos et illustrations éventuellement (là on peut difficilement faire autrement), ce qui demande déjà moins de travail pour l’optimisation Retina qui va suivre. Pourquoi utiliser une image pour un bouton, alors que l’on peut gérer grâce au code CSS3 les coins arrondis, les dégradés, les ombres portées, les ombres internes, etc… ?!

Retina : oui  ! Mais c’est du boulot

Entre le Design Responsive & le Design Retina, le temps de production (et donc le coût) d’un site web explose. Il n’est pas encore dans les habitudes des entreprises ni des agences web de faire des sites Retina-Ready. Mais cela arrive petit à petit, comme par exemple avec ThemeDesign, que nous lançons le 1er mai 2013, où les sites sont totalement Responsive & Retina-Ready.

Noter cet article

Cet article est noté 3.7/5 par 12 de nos lecteurs

Discussion

  1. Dans l’idéal il faut joindre au(x) psd(s) les sources en taille double des images utilisées.

    Mais encore dans l’idéal s’il s’agit d’icône le front-end intègre en font-face, pour les boutons il intègre via css3, donc en fait il ne reste que les photos.

    C’est pour des raisons d’accessibilité comme l’optimisation rétina qu’il faut privilégier le css3 et bannir l’utilisation d’image au maximum (pour les photos on a pas encore le choix…).

    Un site bien intégré nécessiterai donc très peu de temps à être optimisé pour les écrans HD, en fait.

    1. Rien à ajouter, merci Nazmi pour cette réponse argumentée, les sites Internet RETINA ont un bel avenir …

  2. du coup, de façon pratique pour les designers… comment fait-on ? Nos éléments dans les fichiers photoshop doivent être en forme vecto, pour qu’au moment de la découpe d’image, les dévs puissent agrandir sans soucis les images ?

  3. J’espère que la balise “picture” va s’améliorer et se simplifier car ça n’est plus du tout aussi intuitif qu’un simple “img src”.
    Il faut indiquer sous la balise “picture” où se trouve la version HD, SD, HD portable et SD portable d’une image… vous vous rendez compte ?

    Et voilà :

    Texte accessible

  4. Ça devient quand même de la folie. La technologie avance presque trop vite. T’as même pas me temps de t’habituer à une techno qu’une autre arrive sur le marché. Cela devient quand même inhumain. Le métier du web a l’avantage de permettre de ne pas rester cloîtrer dans une une routine car il faut toujours être à ma page mais quand même, cela va beaucoup trop vite.

    1. Cela évolue très vite effectivement, il ne faut surtout pas s’endormir sur ces lauriers et http://www.themedesign.fr est la réponse d’AntheDesign aux évolutions du web !!

Laisser un commentaire

J'ai fini de lire

Aller en haut Contactez-nous X