Jean ROCHARD
Je partage ma passion de Wordpress dans des articles techniques sur les plugins, thèmes, nouveautés geek et optimisation SEO "on-site".
Jean ROCHARD

@jean_rochard

Chez Terre Digitale, on mange du Wordpress dès le petit-dej'.
Petit guide pour mettre en place les Facebook Instant Articles à partir de vos posts Wordpress : https://t.co/lSbzdM6z9j - 7 mois ago

Il existe aujourd’hui des écrans dits à « haute définition » (HD) conçus pour que l’oeil humain ne distingue pas la pixellisation dans des conditions normales d’affichage. « Retina » est une marque déposée par Apple pour désigner ses dalles HD (pour les iPad, iPhone, Mac Book Pro…) mais d’autres marques utilisent aussi ce type d’affichage HD.

Un écran HD va donc afficher 2 fois plus de pixels pour une même résolution qu’un écran standard. Quelles conséquences ? Pour les images vectorielles, cela ne change rien puisque ce type d’image sait « s’étirer » à l’infini sans pixelliser. Pour les images utilisées habituellement sur un site web (jpg, png…), elles risquent d’être nettes sur un écran standard et floues sur un écran Retina.

Pour s’en convaincre, il suffit de zoomer à 150% avec votre navigateur sur un site web non « retina-ready » et vous vous apercevrez du soucis : le logo et certaines images pixellisent. Du côté des sites WordPress, bien souvent les thèmes prennent en compte ce type de problématiques.

Comment un webdesigner peut rendre un site web « Retina Ready » ?

Pour qu’un site soit compatible « Retina », les images et les icônes devront donc être adaptées spécifiquement.

Concernant les icônes, une solution propre et optimisée est d’utiliser des icônes en font, et donc vectorielles. Elles sont certes monochromes mais ont l’avantage d’être peu gourmandes en ressources, facilement personnalisables en ce qui concerne la couleur et entièrement pilotables en quelques lignes de CSS (déclaration par le sélecteur @font-face et utilisation avec la balise HTML i ou span).

Concernant les images, une solution est de les doubler : une au format « normal » pour l’affichage standard et une au format double pour l’affichage Retina. Par exemple, un logo de 150 x 100 pixels sera remplacé par un logo de 300 x 200 pixels en mode Retina. Une fois vos images réalisées, c’est également grâce aux CSS que la mise en oeuvre se fera. Une media query détectera l’affichage et utilisera le code CSS adapté. Cette media query est de type :

@media only screen and (min-device-pixel-ratio: 1,5) { ...

L’inconvénient de cette technique est qu’il faut créer 2 images au lieu d’une chaque fois que nécessaire. L’impact sur le temps d’intégration est aussi non négligeable. Il existe à ce sujet des scripts Javascript (comme retinajs) pour automatiser la recherche de l’image Retina correspondante à votre image « normale » (grâce à des conventions de nommage) et ainsi réduire le surcoût d’intégration.

En terme de ressources, la consommation en bande passante et le temps de chargement peuvent être plus importants.

Une autre technique peut être de créer une seule image au format Retina et de l’afficher systématiquement à 50%. Encore une fois, la consommation de ressources réseaux est plus importante.

Pour le webmaster, quel impact ?

Si vous êtes « simple » webmaster / créateur de votre site web sous WordPress, retenez qu’il vous faudra choisir un thème graphique « Retina Ready » et qu’il vous faudra créer vos images en 2 formats : simple (1x) et double (2x). Pour le reste, il faudra suivre les directives du thème et importer vos images comme indiqué dans la documentation. C’est bien souvent tout !

Conclusion

L’apparition de nouveaux écrans HD complique le travail de réalisation de site Internet mais les techniques présentées ci dessus permettent de parfaitement répondre à ces nouvelles contraintes, le tout au profit de l’expérience utilisateur mais au détriment de l’optimisation de la bande passante et des temps de chargement.

Côté webmaster, le travail n’en sera que peu complexifié malgré la gestion à quelques endroits d’images de 2 formats différents.