Drupal et Retina : une débauche de pixels

L'arrivée sur nos smartphones, tablettes et ordinateurs portables d'écrans à haute densité de pixels bouleverse quelque peu les habitudes quand il s'agit de réaliser des sites web. Les iPad 3 et 4, les MacBook Pro Retina sont là et seront très rapidement suivis de modèles concurrents. Il est donc grand temps d'adapter nos sites si l'on ne veut pas souffrir du "syndrome de l'image floue". Et puis surtout, il serait dommage de ne pas exploiter pleinement ces magnifiques écrans ! La bonne nouvelle, c'est que c'est relativement facile sous Drupal.

Ça s'appelle #Retina chez Apple (et c'est forcément "amazing", "extraordinaire" et "stupéfiant" !) ou plus simplement #HiDPI chez les autres.

Ceci est une révolution.

Le principe est simple : augmenter la densité de pixels suffisamment pour que l'oeil ne puisse quasiment plus les distinguer à une distance "normale" de l'écran. Dans le cas du premier MacBook Pro Retina par exemple, son LCD de 15 pouces dispose d'une résolution de 2880 par 1800 pixels. Ah ouais, ça calme. Comme le dirait Harold Zidler :

Spectacular, Spectacular!

L'adaptation de bourez.net a démarré il y a quelques jours. Tout d'abord pour les visuels de mise en page du site, que ce soit le logo ou les bandeaux de la page d'accueil. Ici, la méthode est relativement simple : on multiplie par deux les dimensions des images et on force leur taille originale en CSS¹.

Jusqu'à aujourd'hui, il restait le cas des galeries de photos. C'est ici qu'entre en jeu un petit module #Drupal qui simplifie grandement la vie : "Retina Images". Une fois le module installé et activé, il suffit de configurer un style d'images pour qu'il prenne en compte le HiDPI. Un simple clic sur le bouton "Retinafy" (beurk !) et le tour est joué. Le style d'image génère des images d'une résolution double à la taille indiquée et qui seront affichées correctement sur un écran HiDPI ou standard, grâce à la "magie" des CSS.

Le souci, vous allez me dire, est que les images vont prendre beaucoup plus de places et seront par conséquent bien plus longues à charger. Ici, il y a une astuce : diminuer drastiquement la qualité des images jpeg générées par Drupal. L'auteur du module suggère de descendre jusqu'à un modeste 25% de qualité. Pourquoi ? Parce que les images étant d'une résolution deux fois plus élevée que celle qui est affichée, les disgracieux artefacts d'une forte compression jpeg seront nettement moins visibles, quel que soit l'écran ! J'ai été moins radical et adopté pour un taux plus conservateur, car des images à 25% donnent des aplats dégradés vraiment visibles.

Du coup, l'impact sur les temps de chargement reste supportable. Et surtout, on en prend plein les mirettes sur un écran HiDPI. #Enjoy !