De la même manière que le Responsive Webdesign était une tendance débutée en 2011, les écrans à haute définition seront probablement le nouveau challenge de 2012. Apparus tout d’abord sur les mobiles puis employés sur le Nouvel iPad par Apple, les écrans de type Retina changent encore la donne. On parle même de leur apparition sur les ordinateurs de bureau.
Il est donc temps de se pencher sérieusement sur le sujet!
Note technique
Utilisés sur les iPhone 4 et Nouvel iPad, ces écrans ont la particularité d’avoir une résolution extrêmement élevée (320 dpi pour l’iPhone et 264 dpi pour l’iPad), rendant les pixels pratiquement indiscernables à l’œil nu.
Le terme “Retina” est une marque utilisée par Apple, Android utilise les termes HDPI (~240dpi) et XHDPI (~320dpi).
Un problème? Quel problème?
L’adaptation des sites pour les écrans à haute densité passe essentiellement par un travail sur les visuels (pictos, icônes, photos, etc.).
En les laissant tel quels, ils seront simplement “étirés”, laissant un rendu flou et des contours imprécis. Une expérience pas très flatteuse pour votre site.
Comparaison entre les iPhone 3G et 4 avec leur écran à la même proportion de pixel
La densité de pixels peut donc donner du fil à retordre aux graphistes et webdesigners, mais pour le navigateur, la taille du viewport reste inchangée. Ces résolutions ne servent en fin de compte qu’à apporter plus de finesse.
Voyons maintenant quelques techniques pour gérer au mieux ce type d’écrans.
5 techniques à la rescousse
Du plus simple au plus complexe, voyons maintenant comment faire une beauté à vos sites!
Images à 200%
La technique la plus simple (mais un peu barbare) consiste simplement à doubler la taille de vos images:
<img src="images/my-image@2x.png" alt="Mon Image" width="400" height="300"> <!-- l'image source fait en réalité 800px par 600px -->
On intègre une image aux dimensions doubles de la taille qu’on souhaite afficher et on la diminue à 50%. On a donc suffisamment de pixels pour un affichage parfait sur écran à haute densité. Une seule image, une ligne HTML: that’s all folks!
Il y a cependant deux inconvénients:
Le premier est non négligeable puisqu’on impose le téléchargement d’images plus lourdes, même à ceux qui ont des écrans à densité classique et qui n’ont pas besoin d’une telle précision. En résulte des temps de chargement plus longs, particulièrement pour les petites connexions, en 3G par exemple.
Il est donc préférable d’utiliser cette méthode sur de simples logos ou éléments graphiques légers.
Le second défaut est dû aux moteurs de rendu. L’anti-aliasing (ou anti-crénelage) rend les contours de l’image un peu moins nets qu’ils ne le devraient. Un défaut acceptable pour des photos, mais beaucoup moins dans une optique “pixel-perfect” pour des pictogrammes ou icônes.
Les plus
- Simple à mettre en place
- Une seule image
- Compatible avec tous les navigateurs
Les moins
- Poids de l’image
- Temps de chargement
- Haute définition imposée pour tous
- Problèmes d’anti-aliasing
Media Queries
Rendues populaires avec le Responsive Webdesign, on peut aussi se servir des Media Queries pour offrir des icônes à résolution doublées aux appareils à écrans à haute densité.
De la même manière que l’on peut détecter les largeurs d’un écran en CSS, l’exemple suivant vous permet de cibler sa densité de pixels. Notez que la propriété s’applique à tous les navigateurs pouvant l’interpréter.
@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) {
/*vos styles ici*/
}
Voyons un exemple simple de remplacement d’icônes pour les écrans à haute densité. Comme on l’a vu avant pour la redimension inline, nous allons voir ici comment le faire avec des background-image.
C’est la propriété background-size qui nous permet ici de réduire pour l’image à 50% de sa taille d’origine.
.icon{
display: block;
width: 30px;
height: 30px;
}
@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/my-icon.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/my-icon@2x.png);
/* nouvelle image de 60px par 60px */
background-size: 30px 30px;
}
}
On ne débatra pas ici de l’usage fastidieux des préfixes.
La notation “votre-image@2x.png” est ici une convention personnelle et n’est absolument pas obligatoire sur le web, à la différence des applications iOS ou Apple réclame cette nomenclature pour les images Retina.
Espérons que cette norme devienne un jour un standard qui permettra aux navigateurs de détecter ces images à résolution double sans CSS supplémentaire.
Les plus
- Simple à mettre en place
- Contrôle de ce qui s’affiche sur chaque type d’écran
- L’image double sera chargée uniquement pour les écrans à haute densité
- Possibilité d’utiliser cette technique aussi dans les sprites CSS
Les moins
- Deux fichiers images par visuel
- Ne fonctionnera pas sur les anciens navigateurs (IE<9)
Le format SVG
L’emploi du format SVG (Scalable Vector Graphics) pour vos images demande un peu plus de travail mais est aussi plus flexible. Tout comme les formats EPS ou un AI, on a ici une image vectorielle donc dimensionnable à volonté.
Ça semble être la solution idéale. Malheureusement, si l’anti-aliasing fonctionne bien sur les courbes, il pose plus de soucis sur les lignes droites avec l’apparition de “demi-pixels”.
Source: Simurai
À ce sujet, Simurai propose une méthode pour corriger cet effet. La solution semble alléchante!
Il reste néanmoins un souci majeur: la compatibilité entre navigateurs. En consultant le tableau de Can I Use, vous pourrez vous rendre compte de l’étendue du problème.
Les plus
- Plus de soucis de résolution
- Un seul fichier par visuel
- Les fichiers vectoriels sont souvent plus légers que les fichiers bitmap
Les moins
- Encore mal supporté par certains navigateurs
- Plus complexe à utiliser qu’un simple format bitmap
- Idéal pour des icônes ou des pictos mais pas pour des photos
Les typographies icônes
Très à la mode depuis quelques mois, les typographies dans lesquelles des pictogrammes remplacent les caractères sont une solution plus qu’intéressante. Le concept est simple: se servir du format vectoriel des typographies pour afficher des icônes.
Picto Server fonctionne comme des services tels que Typekit ou FontDeck mais avec une typographie icône
Il en existe des dizaines. À vous de trouver celle qui vous convient le plus, qui est le plus pratique pour votre usage.
En voici une sélection pour exemple: delicious.com/stacks/view/SC3hpq.
Un point important: la sémantique. Pas très bon d’ajouter des caractères indépendants, donc sans valeur sémantique. L’excellent Chris Coyier propose une excellente solution pour les “psychorigides” de la sémantique web.
Les plus
- Pas besoin de fichier image
- Dimensionnable à volonté
- Toutes les propriétés CSS dont on se sert sur les textes sont utilisables
Les moins
- De solides connaissances dans les logiciels de création de typographies seront nécessaires si vous souhaitez utiliser vos propres icônes
- Comme il s’agit de typographie, vos icônes seront forcément monochromes
- Ne fonctionne pas pour les
background-image
Les solutions JavaScript
Enfin, il existe quelques solutions JavaScript qui pourront vous venir en aide. Je vous conseille ici deux sites qui proposent des techniques très similaires.
Retina Images: retina-images.complexcompulsions.com
Retina JS: retinajs.com
Le principe est d’utiliser la méthode par Media Queries, comme vue plus haut, seulement la méthode est automatique. Si un écran haute densité est détecté, le script va chercher sur le serveur une version @2x (la nomenclature est ici essentielle au bon fonctionnement). Si cette image existe, elle remplace l’originale.
A noter que Retina Images fonctionne aussi pour les background-image sur le même principe.
Les plus
- Simple à mettre en place, même sans connaissances JavaScript
- Seule la bonne image est téléchargée
Les moins
- Deux fichiers images par visuel
- Dépendant du JavaScript
A vous de jouer!
L’avenir est clairement dirigé vers les écrans à haute définition et c’est un nouveau paradigme qu’il sera impossible de laisser de côté. En attendant qu’ils deviennent un standard, il nous faut concilier ces grandes différences de résolutions afin d’obtenir les meilleurs rendus possibles.
Il n’existe, à mes yeux, pas encore de solution idéale. Si je devais en choisir une, ce serait probablement les Media Queries pour les icônes et pictos, et Retina Images pour les images de contenu.
J’ai exposé ici cinq techniques pour gérer les écrans à haute densité sur vos sites. En connaissez-vous d’autres? N’hésitez pas à partager vos expériences!
Pingback: “Adapter vos site pour les images Retina” mon article sur le blog WDFriday. | Blog Loriskumo
Pingback: Adapter vos sites pour les écrans Retina » Webdesign Friday (#wdfr) » Web Design
Pingback: Écrans Retina « Cominmag
Pingback: Mckinley Delapena
Pingback: « Les vendredis Webdesign » – un site de référence ‹ Lucile Jorland AKA Macbernik
Pingback: Google