Des fonds CSS haute résolution

Les écrans haute-résolution se généralisent sur les tablettes et mobiles et ils apparaissent aussi dans le domaine des ordinateurs 13 pouces haut de gamme y compris ceux venant d’un grand fabricant sud-coréen. Pour afficher cette haute résolution lorsque l’écran la demande, on prévoit plusieurs résolutions d’images. Je ne parlerai pas des images en ligne (directement dans le code HTML), où il faudra à un moment donné faire appel à des solutions côté serveur pour gérer les images porteuses d’information. Côté CSS, j’ai pratiqué cette amélioration sur plusieurs projets et vous allez voir qu’ajouter une résolution à vos sprites n’est pas très compliqué.

Mode d'emploi :

  1. Demander à votre graphiste des maquettes au double de la définition habituelle.
  2. Préparez une sprite avec vos images de fond et apposez lui un suffixe @2x.
  3. Réduiser cette sprite de 2 fois.
    Si vous avez Photoshop :
    > Image > Taille de l’image
    Divisez la résolution par 2 avec l’option de rééchantillonnage bicubique plus net (adapté à la réduction).
    Cette action pourra facilement être scriptée.
    Nommez cette sprite avec un suffixe @1x.
  4. Montez votre page HTML.
  5. Préparez vos CSS pour illustrer vos éléments avec fond image.

Deux résolutions sans se répéter

Vous allez donc prévoir vos positionnements de fond d’image en vous référant aux dimensions de la sprite en résolution normale, c’est à dire avec le suffixe @1x. Un exemple de 5 icônes positionnées en CSS avec la propriété  background-position :

.icon-config.pic-before:before { 
  left:0;
  background-position:0 0;
}
.icon-rss.pic-after:after { 
  right:10px;
  background-position:-95px -6px;
}
.icon-download.pic-after:after { 
  right:10px;
  background-position:-200px -6px;
}
.icon-plant.pic { 
  background-position:0 -90px;
}
.icon-pioupiou.pic {
  background-position:0 -190px;
}

Il ne nous reste qu’à définir quelle sprite choisir selon la résolution de l’écran grâce au CSS3 avec les media queries :

/* densité de pixel par défaut @1x */
.pic-before:before,
.pic-after:after,
.pic { 
  background-image: url("images/main-sprite@1x.png");
  background-repeat: no-repeat;
}

/* densité de pixel >= 1.5 */
@media only screen and (-moz-min-device-pixel-ratio: 1.5),
  only screen and (-o-min-device-pixel-ratio: 1.5/1),
  only screen and (-webkit-min-device-pixel-ratio: 1.5),
  only screen and (min-device-pixel-ratio: 1.5),
  only screen and (min-resolution: 240dpi) {
   .pic-before:before,
   .pic-after:after,
   .pic { background-image: url("images/main-sprite@2x.png");
     -moz-background-size: 300px 300px;
     -o-background-size: 300px 300px;
     -webkit-background-size: 300px 300px;
     background-size: 300px 300px;
   }
}

Quelques remarques sur cette media query :

  • Si le navigateur ne gère pas les media queries, il chargera par défaut l’image en résolution normale.
  • On sert l’image en double résolution aux écrans haute définition dès que la densité de pixel est supérieure ou égale à 1.5. Pour les écrans Retina Display on ne peut pas faire mieux car leur densité de pixel est de 2, en revanche pour les écrans de beaucoup de mobiles Android qui sont sur des densité de 1.5 on fait de la sur-qualité : idéalement il faudrait prévoir une sprite intermediaire en @1.5x
  • La propriété background-size permet de gérer ce doublage de résolution : on définit une taille de 300 pixels alors que notre sprite mesure 600 pixels. Si vous utilisez la technologie Retina Images vous n’aurez besoin que de ce paramétrage de taille : les images en simple résolution n’auront pas de suffixe @1x et vous n’aurez pas besoin de cette media query.
  • On ne déclare qu’une fois l’image de fond de chaque résolution grâce à des classes CSS bien utilisées : 3 classes génériques .pic, .pic-before et .pic-after suffiront à gérer tous les fonds image CSS de votre site. Cette technique limite les répétitions et puis elle simplifiera l’ajout d’une nouvelle résolution par la suite.

Un plus qualité

Voilà donc une technique simple qu’il faudra songer à généraliser sur tous vos futurs sites en responsive design ou pas. On pourra facilement patcher un site ancien si on a accès aux images haute définition pour ajouter une sprite en double définition. C’est désormais autant valable pour les écrans de tablettes et mobiles mais également pour certains écrans d’ordinateurs portables. Si vous ne le faites pas, les images en résolution normale vont sembler floues en comparaison des images haute définition.

Ne changez pas de technique pour vos images porteuses d’information parce-qu’il vous semblerait plus simple de les gérer avec cette technique, d’autant plus que c’est faux, les images en ligne haute résolution pourront facilement être gérées automatiquement avec une technique côté serveur du type Retina images. La vraie difficulté sera l’implémentation côté CMS.

J’insiste lourdement sur les sprites en général, si vous les détournez de leur usage décoratif  ou si vous les utilisez mal, elles peuvent rapidement nuire à l’accessibilité, notamment en cas de zoom texte, ou de lien sans libellé, on en parlera plus longuement plus tard…

Voir la démonstration des fonds haute résolution en CSS

Téléchargez la source de cette démonstration (60Ko)

 

Laisser un commentaire

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