Bastien Penalba

Attention ! Cet article a été écrit pour la première version du blog et commence sérieusement à dater. Les informations qu'il contient sont très probablement obsolètes à ce jour...

Medias queries et Retina display pour le web mobile [Tutoriel]

Depuis l’arrivée des écrans type « Retina » et autres sur le marché, les designers et développeurs ont deux fois plus de boulot qu’avant ! Au cas ou vous ne le saviez pas, designer pour mobile implique de créer les éléments graphiques en deux résolutions. En ce qui concerne le web mobile, les medias queries vont nous aider à remplacer les élément graphiques qui pixeliseraient sur un écran retina. Cette technique est surtout utile pour les petits éléments comme les icônes et les pictos. J’aborderai dans ce tutoriel les aspects design et développement.

Rappel sur les medias queries

Les medias queries ont fait leur apparition avec css3, elles servent à créer des feuilles de style conditionnelles. Pour le responsive web design par exemple, elles permettent de modifier des propriétés selon la largeur de l’écran et de pouvoir ainsi réorganiser sa mise en page. Elles peuvent aussi servir à détecter la résolution de l’écran actuel et donc adapter les images selon celle-ci… Et c’est cette partie qui va nous intéresser pour la suite !

Designer pour le retina

Coté design, vous devrez créer deux versions des images que vous voulez optimiser pour les écrans à grosses résolutions. Créez une première image avec la taille réelle utilisée dans votre design, dans mon exemple : « logo-html5.png ». Exportez ensuite une deuxième image en multipliant les dimensions par 2… Utilisez idéalement des éléments vectoriels pour ne pas avoir de perte de qualité ou refaite le même élément avec une taille deux fois plus grande. L’idéal est d’adopter une convention pour nommer vos images, personnellement j’utilise la même convention que dans le language IOS à savoir « nom-de-image@2x.png » donc ici ce sera « logo-html5@2x.png ». Ci dessous, voici un exemple du résultat que vous obtiendrez en créant deux versions de vos images.

Utilisation des medias queries

Petit rappel primordial, les media queries agissent uniquement sur le css, en aucun cas vous ne pourrez modifier la structure de votre html avec. J’insiste sur ce point car cela implique que toutes les images optimisées pour le retina soient positionnées en « background ou background-image » et non pas grâce à la balise « img » dans le html. Nous allons utiliser l’exemple du logo cliquable dans une page web, l’image sera donc en background de l’ancre qui fait 256×256 px. Pour des questions de référencement et d’accessibilité, il est important de mettre le titre de votre site dans la balise <a>, vous le ferez disparaître grâce à la propriété « text-indent » pour ne pas géner la visibilité du logo (merci à Arnaud Delafosse).

html

  1. <div id="logo">
  2. <a href="http://html5.com/">le site html 5</a>
  3. </div>

css

 

  1. #logo a{
  2. display: block;
  3. width: 256px;
  4. height: 256px;
  5. background: url(img/logo-html5.png) 0 0 no-repeat; /* remplacez par le chemin de votre image */
  6. text-indent: -999px;
  7. }

 

 

Votre logo cliquable est désormais prêt pour tous les écrans ayant une résolution normale, donc un ratio de pixel égal à 1. Vous devez maintenant écrire la règle qui fera appel à l’image retina si votre écran a un ratio supérieur à 1. Pour information, voici un récapitulatif rapide des ratios de pixel pour certains appareils:

  • iPhone 3 et Androïd MDPI : 1
  • Androïd HDPI : 1.5
  • iPhone 4, 4s et nouvel iPad : 2

medias queries (css)

Pour cette détection nous utiliserons les propriétés -webkit-min-device-pixel-ratio et max–moz-device-pixel-ratio et nous appliquerons notre changement d’image uniquement si la condition – écran haute résolution – est respectée. Copiez-collez la règle CSS existante et remplacez le nom de votre image par celui de l’image optimisée.

N’oublions pas que notre image haute résolution est deux fois plus grande que la taille réellement souhaitée, donc si nous en restons là, la moitié de l’image sera visible et l’autre moitié rognée. Il faut donc ajouter la propriété background-size qui permet de définir la taille d’une image de fond et dans notre cas d’adapter cette image à la bonne taille. Insérez votre code à l’intérieur de la media querie :

  1. @media screen and (-webkit-min-device-pixel-ratio: 2),
  2. screen and (max--moz-device-pixel-ratio: 2),
  3. (-webkit-min-device-pixel-ratio: 1.5),
  4. screen and (max--moz-device-pixel-ratio: 1.5) {
  5.  
  6. #logo-link{
  7. background: url(img/logo-html5@2x.png) 0 0 no-repeat; /* remplacez par le chemin de votre image */
  8. background-size: 256px 256px; /* largeur et hauteur réél du logo */
  9. }
  10. }

Le retina pour les sprites

Cette technique fonctionne aussi pour l’utilisation de sprites css. Dans mon exemple, j’ai une sprite avec des icônes de différents réseaux sociaux d’une dimension de 170x33px , là aussi nous allons devoir créer une version optimisée de cette sprite avec des dimensions deux fois plus grandes.

Vous utiliserez la même technique qui est décrite précédemment, en faisant simplement attention au redimensionnement de votre image de fond. Le background-resize dans la media querie devra être la taille de la sprite totale et pas celui de l’élément ciblé.  Dans l’exemple, je cherche à faire des boutons de 33×33 px avec la sprite ci-dessous, mon background-resize pour sa version retina sera donc le suivant :

  1. #picto-twitter{
  2. background: url(img/sprite-social@2x.png) 0 0 no-repeat;
  3. background-size: 170px 33px; /* et non pas 33px 33px */
  4. }

Petits conseils

Vous savez maintenant comment rendre toutes vos images compatibles retina et les afficher au moment voulu grâce aux medias queries. N’oubliez tout de même pas que cela implique de charger des images deux fois plus grandes donc plus lourdes. Pensez aussi que les images qui vont être chargées représentent un nombre considérable de requêtes, donc utilisez les sprites au maximum ! Séparez les images retina et normales et trouvez une convention pour leur nom…

Vous n’avez pas non plus besoin d’adapter toutes vos images, une photo de blog par exemple est, en général, d’une taille suffisamment grande pour s’afficher correctement sur tous les supports. Une fois de plus cette technique est avant tout utile pour les icônes, les pictos et autres images de petite taille.

À propos de 
Développeur iOS @Linxo, passionné de nouvelles technologies et de domotique. Fils unique de Batman.

8 Commentaires

  1. AlizeeR

    13 juillet 2012 - 10 h 28 min
    Reply

    Bonjour,

    Merci pour ce tuto !
    J’ai juste une question concernant les sprites pour retina.

    Je suis en train de faire un site mmobile (retina et non retina)

    J’ai un sprite qui fais 472px par 720px (en HD)

    Pour l’iphone normal, voici mon CSS :

    h1{
    background: url(images/sprite.png) 0 -235px no-repeat;
    height: 28px;
    width: 85px;
    margin: 7px auto 0;
    }

    Pour le retina, voici mon CSS :

    @media screen and (-webkit-min-device-pixel-ratio: 2),
    screen and (max–moz-device-pixel-ratio: 2),
    (-webkit-min-device-pixel-ratio: 1.5),
    screen and (max–moz-device-pixel-ratio: 1.5) {
    h1{
    background: url(images/sprite_2x.png) 0 -470px no-repeat;
    background-size: 472px 720px;

    }
    }

    Mais du coup, contrairement à la version non retina, je ne vois qu’un bout de mon image ciblée !

    elle ne redimensionne pas mon sprite !

    Comment faire, as-tu une idée ?

    merci beaucoup !

    Alizée

  2. AlizeeR

    13 juillet 2012 - 11 h 51 min
    Reply

    J’ai trouvé !

    Merci quand même !

  3. Bastien

    13 juillet 2012 - 12 h 39 min
    Reply

    Trop rapide! Content d’avoir ou t’aider, courage pour la suite :)

  4. AlizeeR

    13 juillet 2012 - 13 h 02 min
    Reply

    Merci ;)

  5. dldstyle

    13 août 2012 - 15 h 18 min
    Reply

    Merci pour ce tuto, une source de travail supplémentaire pour l’intégration :)

    • Bastien

      13 août 2012 - 15 h 28 min
      Reply

      De rien, content qu’il te soit utile! :)

  6. Alexeo

    30 novembre 2012 - 15 h 11 min
    Reply

    Un grand grand merci, je cherchais un tuto sur l’intégration du retina depuis quelques temps mais sans résultat.
    Au boulot maintenant !

  7. Bastien

    30 novembre 2012 - 15 h 28 min
    Reply

    De rien! Courage ;)

Commenter

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