...

Face à l’émergence, ces dernières années, des écrans haute densité  (retina chez Apple, HDPI pour Android) rendant les pixels pratiquement indécelables à l’œil nu, il est devenu nécessaire d’adapter ses sites ou applications pour gérer convenablement l'affichage des images pour ce type d’écranet éviter des images floues.

Nous ne présenterons sur cette page que quelques solutions basiques pour adapter facilement vos images aux écrans haute densité.

...

Certaines de ces solutions ne sont pas compatibles tous navigateurs, pour plus de détails vous pouvez consulter le tableau de Can I Use.

Les media queries :

Très utilisés pour le RWD, les media queries sont également pratiques pour déterminer la densité de pixels d’un écran :

.icon{

  display: block;

  width: 110px;

  height: 110px;

}

@media only screen and (-webkit-max-device-pixel-ratio: 1.5),

 only screen and (-o-max-device-pixel-ratio: 3/2),

 only screen and (max--moz-device-pixel-ratio: 1.5),

 only screen and (max-device-pixel-ratio: 1.5) {

  .icon{

    background: url(images/ logo-esup.png) no-repeat;

  }

}

@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) {

  .icon{

    background-image: url(images/ logo-esup2x.png);

    /* nouvelle image de 220px par 220px */

    background-size: 110px 110px;

  }

}

Images à 200% :

Une des solutions un peu barbare mais efficace consiste à doubler la taille de vos images :

...

On impose le téléchargement d’une image lourde à tous les utilisateurs ; y compris ceux dont les terminaux n’ont pas besoin d’une telle précision. On augmente donc le temps de téléchargement !

L'attribut srcset :

Il permet de définir une image adaptée au terminal en fonction de la taille de l'écran et de se densité de pixels.

Par ex. :

<img src="logo-esup.png" 
       srcset="logo-esup.png 1x,
       srcset="logo-esup-320.png 320w 1x,
       srcset="logo-esup-640.png 320w 2x"
       width="850" height="475" alt="ESUP Portail">

Dans l'exemple ci dessus, l'image chargée par défaut fait 850x475 pixels. Cela permet aux navigateurs, qui ne prennent pas en charge l'attribut srcset, de charger une image de contenu.

De même pour les autres navigateurs qui savent gérer l’attribut mais qui ne trouvent aucune correspondance dans les critères de srcset.

Les alternatives possibles pour chaque image sont :

• 1x : densité de pixel à 1 (est identique à src)
• 320w 1x : propose une image de 320 pixels de large
• 320w 2x : propose une image de 320 pixels de large et ou la densité est inférieure ou égale à 2

L'attribut srcset peut également être couplé avec l'attribut sizes :

Par ex. :

<img src="logo-esup.png" 
       srcset="logo-esup.png 1x,
       srcset="logo-esup-320.png 320w 1x,
       srcset="logo-esup-640.png 320w 2x"
       width="850" height="475" alt="ESUP Portail" 
       sizes="(min-width: 600px) 200px, 50vw">

Quand la condition est vraie (min_width: 600px) l'image aura une largeur de 200px , sinon 50% du viewport.

A noter toutefois, la faible compatibilité avec certains navigateurs (ie par ex. ) : http://caniuse.com/#feat=srcset