Des icônes pour écrans retina Des icônes pour écrans retina

Des icônes pour écrans retina

par ,
le 15 septembre 2014

0
0

Depuis l’arrivée du célèbre iPhone, on retrouve aujourd’hui de nombreux écrans HD sur le marché (smartphones, tablettes, ordinateurs et TV).
C’est grace à lui que nous employons ce terme « retina ». Il nous ramène une nouvelle complexité dans le développement d’un site internet.

La définition du terme HD se traduit par une densité plus importante par rapport à la résolution d’écran.
Pour rappel : la résolution est la taille en pixels, et la densité est le nombre de pixels par unité de surface.

Ces écrans proposent une densité de pixels généralement 2 à 3 fois plus importante qu’un écran standard et ce, pour une même résolution.

Voici un exemple d’une image représentée sur un mobile retina dans le cas où votre image n’est pas optimisée pour celui-ci :

Exemple de visuel non optimisé pour le retina

Lorsque vous ne proposez pas une optimisation retina sur votre site, les images sont donc « étirées », et donnent un aspect floutté.
Il est essentiel d’optimiser ce rendu afin d’améliorer le confort visuel de nos visiteurs.
Voyons ci-dessous une solution qui vous permettra de corriger ce problème.

Mieux vaut prévenir que guérir

Avant tout chose, il faut prévoir des icônes de type vectoriel afin d’éviter les problèmes de pixellisation au redimensionnement.

Nous allons utiliser 2 fichiers pour travailler notre image :

– Pour les écrans standard avec l’image d’origine

– Pour les écrans rétina avec l’image redimensionnée à 200%

Dans cet article, nous allons travailler avec un sprite afin de mieux organiser, et optimiser les images.

sprite2x

LESS et Media Queries

Nous utiliserons le préprocesseur LESS pour une meilleure organisation et maintenabilitée du code

Commençons par placer nos variables :

@sprite :     url(../images/pictos/sprite.png) no-repeat; //correspond à notre image d’origine
@sprite2x :     url(../images/pictos/spriteRetina.png; // correspond à notre image retina en 2x plus grande
@spriteSize :    208px auto // Corresponds à la taille de votre sprite.

Déclarons en css notre image d’origine pour tout les devices.

[class=^icon] {
background: @sprite;
display:inline-block;
vertical-align:middle;
width:39px;
height:39px;
}
.icon-comment {
background-position: -49px 0;
}
.icon-facebook {
background-position: -89px 0;
}
.icon-twitter {
background-position: -129px 0;
}

Nous avons mis en place nos icones pour les écrans standards, déterminons les, à présent pour les écrans HD.

Le plus important est la définition du media queries, il sera adapté en fonction du pixel ratio :

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( -moz-min-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx)
{
/* css adapté pour les écrans HD */
}

Remarquez que les deux dernières lignes s’appliquent pour les devices Android 😉

Il nous reste plus qu’à charger l’image prédéfinie en la récupérant grâce à notre variable @sprite2x;

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( -moz-min-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx)
{
[class=^icon] {
background-image: @sprite2x;
background-size: @spriteSize;
}
}

Nous avons appliqué une autre source à notre image et défini une taille correspondante à un ratio « normal ». Cela permettra d’afficher visuellement une image 2 fois plus grande sur une taille 2 fois plus petite.

Tester le retina avec Firefox

Il est actuellement possible de tester depuis votre ordinateur avec le navigateur Firefox en modifiant un paramètre dans le fichier de configuration.
Dans la barre d’adresse, tapez « about:config »
Cherchez « layout.css.devPixelsPerPx
Et modifiez la ligne du ratio en 2 (par défaut à -1).

Conclusion

Cette astuce permet facilement d’assurer une qualité HD quelque soit le support, et de pouvoir l’utiliser pour d’autres types de background.
Pensez toutefois à optimiser la qualitée de vos images avec Photoshop afin d’éviter des ralentissements principalement sur mobile 😉

D’autres techniques peuvent être utilisées côté client comme côté serveur, comme l’utilisation des webfonts.

mots-clés :

, , ,

articles à lire ensuite...

Laisser un commentaire

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

0
0

Des icônes pour écrans retina