Optimiser les images d’arrière-plan en CSS pour les écrans “Retina”

optimiser images pour retina

Un écran Retina est un écran particulièrement haute-résolution. Sans rentrer dans les détails et pour faire (très) simple, pour une résolution donnée, il comporte deux fois plus de pixels qu’un écran ordinaire. Par exemple, sur un portable de 15″ en résolution 1440 x 900 pixels, un écran retina affiche en réalité 2880 x 1800 pixels. Ce qui donne une impression de netteté incroyable; le texte est presque aussi lisible que sur du papier (voire plus d’après certains) et on ne voit plus de pixels !… enfin, justement, en parlant des pixels… On ne les voit plus si les images et les éléments graphiques de l’interface ont été optimisés pour cette haute densité de pixels !

Les écrans Retina que tout le monde connaît bien sont les écrans de l’iPhone 4 (et 4s) et l’écran du nouvel iPad (aka iPad 3)… Apple vient également de sortir le premier ordinateur portable équipé d’un écran Retina, un MacBook Pro 15″. On peut donc en conclure qu’il va peut-être falloir commencer à prendre en compte ces hautes-résolutions dans le web design, car sur un tel écran, les images des sites non-optimisés vont quelque peu souffrir et paraître floues, un peu “cra-cra”…

Voici des captures du site Anybodesign sur un iPhone 3Gs (résolution “normale”) comparées au rendu sur l’iPhone 4 (retina) :

capture écran iphone 3GS

Sur le 3Gs rien à signaler…

capture écran iphone 4

Sur l’écran retina de l’iPhone 4, on constate que tout est légèrement flou… sauf le texte et l’interface de l’iPhone bien entendu. C’est logique : l’écran ayant deux fois plus de pixels, nos icônes sont agrandies et de ce fait, bavent un tantinet…

Pour remédier à cela, il faut donc deux fois plus de pixels à nos icônes et à notre logo. Dans un premier temps, nous allons donc préparer ces images…
Comme j’ai travaillé mes icônes et mon logo au format vectoriel, c’est très rapide !
Mes icônes sont des .png de 24 x 24 pixels. Je créé donc de nouveaux fichiers au format 48 x 48 pixels que je nomme de la même façon en ajoutant “@2x” à la fin. (Convention utilisée par Apple dans son SDK pour cibler les images haute-résolution.)

Mon icône originale, icon-atelier.png :
Et mon icône haute-résolution, icon-atelier@2x.png :

Maintenant, pour les intégrer au site en ne ciblant que les écrans Retina, nous allons nous servir des media queries !

Code CSS pour l’icone originale :

nav#main li#nav-atelier a {
   background: transparent url(images/icon-atelier.png) 0 0 no-repeat;
}

Code CSS pour charger l’icone haute-résolution :

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (-o-min-device-pixel-ratio: 3/2),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-device-pixel-ratio: 1.5) {

         nav#main li#nav-atelier a {
           background-image: url(images/icon-atelier@2x.png);
           background-size: 24px 24px;
         }
}

Vous noterez qu’il faut ajouter l’instruction background-size et lui donner les valeurs initiales, sans quoi notre icône haute-résolution serait affichée 2 fois trop grande ! C’est très important.

Ensuite nous répèterons patiemment l’opération pour les autres icônes, puis tous les éléments graphiques du site.
Voilà maintenant le rendu du site sur l’iPhone 4 :

capture écran iphone 4 optimisé

Tout est bien net, le jeu en valait vraiment la chandelle 🙂
Prochaine étape : optimiser les images en ligne !

Source d’inspiration : WeedyGarden
(En Anglais et avec quelques liens intéressants)

Ils en parlent

  1. Kali1664 dit :

    Hello et tout d’abord merci pour cet article sur l’optimisation pour le retina.
    Cependant, au lieu de créer une image de 48*48 que l’on va reduire ensuite via le CSS à 24*24, pourquoi ne pas enregistrer notre image en 150dpi au lieu de 72 ? Ainsi, meilleure résolution et pas « bavage » au niveau de l’affichage de l’icône sur un écran rétina ?

    Ou encore peut-être plus utilisé le format .svg si votre icône est en vecteur ?

    See ya !

    • thomas dit :

      Bonsoir et merci pour votre commentaire !
      Mais, c’est là une bonne question et je vous remercie de l’avoir posée 🙂
      Je ne pense pas que ça change grand chose car c’est belle et bien la taille (pour une fois) en pixels qui importe…
      Les écrans retina ont bien 4 fois plus de pixels. Donc 24 pixels vont forcément « baver » même en 150dpi.
      Un petit test vite fait :
      icone 72 dpi
      icone 150 dpi
      La deuxième icone est en 150 dpi et de visu sur un iPhone retina c’est exactement la même chose…

      Quant au format svg, ce serait effectivement bien pratique, s’il était supporté par IE7/8… Mais ayons bon espoir que ces antiquités quittent le web dans les prochaines années ! IE6 est déjà presque un mauvais souvenir 🙂

  2. Andaroth dit :

    N’est-il pas possible d’utiliser l’ancien code et d’ajouter la ligne background-size sans devoir utiliser @media ?

    Ce serait bien de standardiser un peu tout ce foutoir web.

    • thomas dit :

      Bonjour,
      Je ne suis pas certain de comprendre la question mais le problème c’est de pouvoir cibler les écrans retina et de leur servir une image de meilleure définition.
      On doit donc utiliser les media queries, pas le choix.
      Sinon il est possible d’utiliser des images haute définition pour tous les types d’écran, coup pas besoin de media queries, mais c’est ensuite un choix d’optimisation : pourquoi servir une image 4 fois plus grande (et donc plus lourde) à des utilisateurs qui n’en ont pas l’utilité ?
      Il faut bien avoir à l’esprit cette histoire de poids et d’économie de bande-passante, comme tu le dis tout le monde n’a pas le très haut débit 🙂

  3. Andaroth dit :

    PS : Sans oublier que des images deux fois plus grandes pèsent deux fois plus lourd et qu’avoir du débit coûte cher.

  4. Jeremy dit :

    Comment ça se passe sous ie8 ?

    • thomas dit :

      bonjour,
      ça ne se passe pas très bien 🙂
      en fait étant donné que l’instruction « background-size » n’est reconnue qu’à partir d’IE9 tu es obligé (ou pas) de prévoir une image « normale » pour les versions antérieures.
      Cela dit pour que ça pose un réel problème il faudrait que la dalle soit « retina » et que le navigateur soit IE8, puisque nos media queries « ciblent » uniquement les retina.

On en discute ?

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *