Retina et les images adaptatives

L’informatique est essentiellement une question de stockage et de ...sensibilité!

En WAP nous avions des écrans de 128 pixels et une couleur! Et aujourd’hui même si on arrive à peine à effleurer la capacité d’un cerveau humain, il est dorénavant à notre portée. C’est dire en deux mots « qualité humaine »! L’écran Retina imaginé par IBM Research est un pas vers cette idéale, un pas provoqué notamment par le HD...et Apple avec son MacBook Pro en 2013 ...et les terres rares ne l’oublions pas! Wikipédia parle de sa fragilité, de son coûts, mais pas de son impact catastrophique sur l’environnement. Des guerres font rage pour s’accaparer les terres rares.

Résolution, DPI, PPP, 2X, 3X, 4X

En terme technique, une image conventionnelle sur le web fait 72 dpi c’est à dire 72 « dot » par pouce (dot per inch). Environ 30 pixels par centimètre. En 2014 on parle de PPI « pixel per inch » ou PPP « pixels par pouce » à ne pas confondre avec le « point par pouce » pour l’impression. Mais une photo fait 300 ppi! Voilà pourquoi l’écran Retina permet une telle netteté.

Tableau comparatif

Modèle	pixels par cm (px/cm)	pixels par pouce (PPP<)	Définition d’écran
iPhone 4/4s et iPod Touch (4^e génération)	128	326	960×640
iPhone 5/5c/5s et iPod Touch (5^e génération)	128	326	1136×640
iPhone 6 « Retina HD »	128	326	1334×750
iPhone 6 Plus « Retina HD »	157	401	1920×1080
iPad (3^e/4^e génération/Air)	105	264	2048×1536
iPad Mini (2^e génération)	128	326	2048×1536
MacBook Pro avec écran Retina 15"	87	220	2880×1800
MacBook Pro avec écran Retina 13"	89	227	2560×1600

La solution simple

Ceci dit, là s’arrête la quête de l’espace, un litre de bon vin fera l’affaire pour s’envoyer en l’air! Même si on parle en général de 1.5 à 2 fois plus de pixels au pouce, il suffit d’utiliser des images deux fois plus grandes et de les afficher à 50% pour éviter ce désagrément. Encore plus lourd, pas nécessairement. Oui dans un sens, comme la méthanisation, zéro émission sauf que... Vrais que si tout le monde utilise des images deux fois plus grosses, la circulation d’information risque d’augmenter considérablement. Mais on a compris durant la même période de temps que nous pouvions compresser les images bien au-delà de ce qui était permis depuis.

Un exemple vaut mille mot. Une bonne qualité et une compression à 10% de qualité, laquelle est-ce? Elle est pourtant passé de 56,1 ko à 8,24 ko.

Simuler le Retina

Vous pouvez compresser facilement une image JPEG jusqu’à 60% de sa qualité d’origine sans vraiment altérer l’image. Essayer jusqu’à 30% de qualité, c’est étonnant. Et du coup, non seulement les concepteurs ne doublent pas la circulation mais ils permettent encore une fois une baisse drastique du trafic de données ;-) Le format d’image WebP de Google va encore plus loin en appliquant une compression allant parfois jusqu’à 80% d’un Jpeg conventionnel.

À défaut de pousser des images à 200 dpi à la grande majorité des écrans incompatibles, la solution consiste donc à offrir aux écrans Retina des images deux fois plus grosses! Comme cette image à droite affichée à 300 pixels alors qu’elle fait en réalité 800 pixels de large. Elle est donc prête pour un Retina 3X!

Exemple, en terme HTML, aussi simple que :

<ìmg src="imagede-500px.jpg" style="width:250px" />

Twitter conseil 400 pixels

Le développement et le standard n’ont rien de logique, comme une lingua franca c’est souvent la masse qui en définit les grandes ligne. En l’occurrence Twitter! Si je conseille 800 pixels, Twitter et son nouvel « Twitter Cards » réinvente encore le quotidien tout en suggérant une gros 400 pixels. Trop gros pour une vignette, trop petit pour la haute résolution, Twitter se préoccupe davantage de sa bande passante. Ceci dit, si vous voulez pousser vos images sur Twitter, vaut mieux s’y conformer!

Il existe bien sûr une solutions Abracadabra jQuery (voir plus bas) qui consiste à ajouter en temps réel un « @2x » au nom de l’image HD et avoir 2 format de la même images, une normal et l’autre en haute définition. Il y a même des solutions en langage serveur, en détectant les « type mime » compatibles de l’entête HTTP. Une image avec une résolution de 72 dpi et une deuxième à 100 dpi ou 200 dpi par exemple.

Solution adaptative (responsive image) en pur HTML

Attribut srcset

Même si ce n’est pas encore une recommandation de la W3C, le standard HTML5 offre toute foi un support complet selon plusieurs critères à l’aide des attributs srcset et sizes. L’idée est toujours une version de la même image par profil, mais cette fois les ressources alternatives sont spécifiées directement dans l’attribut srcset.

Quand il n’y a qu’une seule ressources, utiliser l’élément img et son attribut src tout simplement en pourcentage :

img {
  max-width: 100%;
  height: auto;
}

Sinon, l’auteur peut devoir choisir entre plusieurs ressources selon le user-agent : Orientation (Art direction-based) pour charger une image qui est optimisée pour les dimensions de l’écran. Résolution (Device-pixel-ratio-based), selon la densité de pixels. Le Viewport par rapport à la fenêtre de chargement. Et finalement selon la compatibilité du format d’image.

Dans sa plus simple expression :

<img src="mobile.jpg" srcset="tablette.jpg 1000w, bureau.jpg 2000w" alt="Image" />

C’est simple et plutôt compatible. Ça change!

<img src="normal.jpg"
     srcset="retina.jpg 1.5x, retina.jpg 2x"
     alt="Exemple : Device-pixel-ratio" width="100" height="150"/>

Attribut sizes

Avec les attributs sizes et media c’est moins « cute »! Un détournement, exactement comme le projet AMP ou encore cette manie d’inclure un CSS « inline » dans un courriel. Pour palier au manque de compatibilité avec les gestionnaires de messagerie en ligne, comme Gmail(!). Ajouter du CSS directement dans vos attributs n’est pas très ...ethique (Lire Responsive Images: If you’re just changing resolutions, use srcset.). Même si on s’en balance allégrement :

<!-- Exemple : Viewport-based -->
<img sizes="100vw" srcset="petite.jpg 400w, moyenne.jpg 800w, grosse.jpg 1600w"
     src="petite.jpg" alt="Exemple : Viewport-based"/>

<!-- Exemple : Viewport-based -->
<img sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"
     srcset="trespetite.jpg 200w, petite.jpg 400w, moyenne.jpg 800w, grosse.jpg 1600w"
     src="petite.jpg" alt="Exemple : Viewport-based"/>

Avec <picture>, l’attribut média de la <source> permet de spécifier les images alternatives exactement comme les formats de vidéos et la balise <video> :

<!-- Exemple : Art direction-based -->
<picture>
  <source media="(min-width: 45em)" srcset="grosse.jpg">
  <source media="(min-width: 32em)" srcset="moyenne.jpg">
  <img src="petite.jpg" alt="Mobile en premier! Exemple : Art direction-based" />
</picture>

<!-- Exemple combiné : Device-pixel-ratio -->
<picture>
  <source media="(max-width: 500px)" srcset="mobile.jpeg, mobile-HD.jpeg 2x">
  <img src="bureau.jpeg" srcset="bureau-HD.jpeg 2x" alt="Exemple : Device-pixel-ratio" />
 </picture>

<!-- Exemple avec format (Type mime) d'image -->
<picture>
 <source srcset="image.webp" type="image/webp">
 <source srcset="image.jxr" type="image/vnd.ms-photo">
 <img src="image.jpg" alt="Exemple avec format (Type mime) d'image" width="100" height="150" />
</picture>

Un exemple pratique :

<picture>
   <source media="(min-width: 64em)" src="haute-resolution.jpg">
   <source media="(min-width: 37.5em)" src="medium-resolution.jpg">
   <source src="basse-resolution.jpg">
   <img src="fallback.jpg" alt="Image par défaut en cas d’incompatibilité.">
   <p>Texte pour l’accessibilité.
</picture>

Un exemple complet avec la balise <figure> :

<figure>
 <picture>
  <source srcset="image-carre.png" media="(max-width: 600px)">
  <img src="image-rectanglee.png" alt="Image">
 </picture>
 <figcaption>Image</figcaption>
</figure>

Un exemple combiné :

<figure>
  <picture>
    <source media="(min-width: 800px)"
      sizes="80vw"
      srcset="paysage-640.jpg 640w,
              paysage-1280.jpg 1280w,
              paysage-2560.jpg 2560w" />
    <img src="image-160.jpg" alt="lighthouse"
      sizes="80vw"
      srcset="image-160.jpg 160w,
              image-320.jpg 320w,
              image-640.jpg 640w,
              image-1280.jpg 1280w" />
  </picture>
</figure>

Exemple « Built-in Browser Support for Responsive Images » par Pearl Chen

<figure>
  <picture>
    <source media="(min-width: 650px)" srcset="http://googlechrome.github.io/samples/picture-element/images/kitten-large.png">
    <source media="(min-width: 465px)" srcset="http://googlechrome.github.io/samples/picture-element/images/kitten-medium.png">
    <img src="http://googlechrome.github.io/samples/picture-element/images/kitten-small.png" alt="a cute kitten">
  </picture>
  <figcaption>Redimensionner l'écran et actualiser la page.</figcaption>
</figure>

a cute kitten — Redimensionner l’écran et actualiser la page.

Note sur les unités

Outre le pourcentage, em, rem et les px, pt, on retrouve maintenant le « w » pour width et le « h » pour height. Et bien sur les vw et vh, relative au « viewport ». C’est-à-dire une unité égal au un centième de la largeur du « viewport » :

1vw = 1% de la largeur du « viewport »
1vh = 1% de la hauteur du « viewport »
1vmin = 1vw ou 1vh, selon le plus petit
1vmax = 1vw ou 1vh, selon le plus grand

Pour la densité de pixels (1x, 2x, 3x...) Selon Chris Coyier, qui cite une démonstration de Mat Marquis :

Avec un écran de 320px et affichage 1x (non-retina) et une image de 500px de large :
500 / 320 = 1.5625
Avec un écran de 320px et affichage 2x et une image de 1000px :
1000 / 320 = 3.125
Avec un écran de 320px et affichage 3x et une image de 2000px de large :
2000 / 320 = 6.25

jQuery

Certain utilise le Javascript ou jQuery pour changer toutes les images D’une page en vrac. L’exemple suivant test si l’écran est en HD (devicePixelRatio). Si c’est le cas, on passe toutes les images de classe « retina » de la page pour ajouter « @2x » au nom de fichier.

<img class="retina" alt="" src="image.png" width="100" height="100" /> <script>
$(function () {
  if (window.devicePixelRatio == 2) {
    var images = $("img.retina");
    // Boucle toutes les images et les transfor en haute-résolution
    for(var i = 0; i < images.length; i++) {
        var imageType = images[i].src.substr(-4);
        var imageName = images[i].src.substr(0, images[i].src.length - 4);
        imageName += "@2x" + imageType;
        // Renomme l’image
        images[i].src = imageName;
    }
  }
});
</script>

Classe « -webkit-image-set »

Un peu comme l’exemple avec media queries basé sur la résolution de l’écran, Apple propose image-set pour le CSS4. Déjà compatible Safari 6 and Chrome 21 avec le préfixe -webkit -webkit-image-set.

Classe « -webkit-device-pixel-ratio »

Apple travaille décidément sur la planète mars, juste à côté de la planète Google! Enfin, voilà une classe très pratique qui permer de cibler la définition de l’écran selon trois format, faible, moyenne et haute. Lire « La balise d’en-tête Viewport pour mobile » pour plus de détail.

Pictogrammes @face-fonts

A la manière Google fonts ou Font Awesome. Le plus compliqué c’est de créer les formats .eot, .woff, .ttf, and .svg. Sérieusement il faut s’attendre à investir un minimum de 500 € pour un bon logiciel. Mais sinon c’est très simple, comme utiliser une police de caractères avec l’avantage incroyable d’être vectoriel. On peut alors changer la grandeur, la couleur des pictogrammes sans altérer la qualité.

Lire le tutoriel « Police de caractères et règle CSS @font-face »

Image de 16x16

1x noir
4x bleu

Pictogrammes vectoriels

1x noir
4x bleu

Librairies de Pictogrammes vectoriels (scalable vector icons)

XML et Graphique vectoriel adaptable (SVG)

Marginal, l’images vectorielles est la solution à tous les problèmes. Le SVG, est un format de données conçu pour décrire des ensembles de graphiques vectoriels basé sur le XML. Ce format inspiré directement du VML / PGML du consortium de la W3C permet de manipuler et dynamiser des images beaucoup plus légertes. Ajouter du contenu textuel directement dans l’images etc. Lire le tutoriel Graphique vectoriel adaptable (SVG) pour plus de détail.