Le terme retina est une marque mise de l’avant par Apple, lors de la sortie de la 4e génération du iPhone en juin 2010. Selon Apple, la densité de 326 pixels par pouce est telle, qu’il serait impossible pour l’oeil de distinguer les pixels individuels.
Le changement saute littéralement aux yeux. Du texte plus clair et lisible, des éléments graphiques générés aux lignes plus douces. Les éléments vectoriels, incluant ceux générés en CSS, s’ajustent automatiquement à un écran à haute densité.
Une image ne peut malheureusement profiter du retina sans être redécoupée en une résolution plus élevée. Effectivement, la qualité d’une image se dégrade lorsqu’on la force à avoir une taille plus grande que sa taille originale.
Une image vaut mille ko
Entre novembre 2010 et juillet 2012, le poids moyen d’une page web est passé de 702 ko à 1,090 ko, soit une augmentation de 55 %. Pour les images, le bond est de 65 %. Ces graphiques nous démontrent que ce type de contenu continu à être le facteur principal affectant le poids d’une page.
Novembre 2010
Juillet 2012
Voici donc quelques pistes afin de vous préparer efficacement à la nouvelle réalité du web en retina, tout en vous aidant à diminuer le poids moyen de vos pages.
Media queries & optimisation du poids des images
Il est impossible de cibler tous les écrans haute densité, actuels ou futurs, d’une manière explicite. Une bonne approche est de concentrer ses efforts à optimiser les images seulement pour la plus haute résolution possible. Présentement, il s’agit des produits récents d’Apple, dont les écrans possèdent un ratio de 1 pixel CSS, pour 2 pixels physiques.
Au moment de l’intégration d’une maquette, on découpe deux versions de la même image, une pour le ratio de 1:1, et l’autre pour la ratio 1:2. On utilise ensuite les media queries afin de substituer l’image d’arrière-plan, par sa version en haute-résolution.
Dans l’exemple suivant, on cible pratiquement n’importe quel écran à haute densité, incluant les appareils avec un ratio de 1:1.5, peu importe le fureteur utilisé.
/* Ratio de 1:1. Background à 100% */
.img {
background-image:url(/assets/images/prospek.png)
}
/* Ratio de 1:2. Background de ½, donc 50% */
@media (min--moz-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),
(-webkit-min-device-pixel-ratio: 1.5),
(min-device-pixel-ratio: 1.5),
(min-resolution: 1.5dppx) {
.img {
background-image:url(/assets/images/prospek@2x.png);
background-size: 50%;
}
}
L’étape la plus importante du processus reste l’optimisation du poids de vos images. Il existe des outils spécialisés pouvant les optimiser davantage, même après avoir utilisé la fonctionnalité de sauvegarde pour le web de Photoshop, par exemple.
Pour les JPG, les logiciels libres jpegoptim et jpegtran sont à explorer. Pour les PNG, les outils dominants sont optipng, advpng et pngcrush.
Éléments graphiques et outils en CSS
Reste que le meilleur moyen d’optimiser les images est d’en utiliser le moins possible. Plusieurs techniques permettent d’intégrer des éléments graphiques indépendants de la résolution d’écran, et ce, sans image.
L’image de marque, généralement intégrée sous forme de JPG ou PNG, peut être remplacée par un SVG. Les dégradés et effets d’ombrages générés en CSS3 n’ont rien à envier aux images. Voir aussi ces boutons qui ne demandent qu’à être pressés. Ces exemples proviennent presque tous de Smashing Magazine. Ami(e)s designers, voici de quoi nourrir votre hémisphère droit.
Explorez!