"Retinafy your web sites & apps" : réduisez ce pixel que je ne saurais voir
Publié le 18 janvier 2013
Avec l’arrivée des nouveaux MacBook Retina qui rejoignent les smartphones et tablettes dans le monde des écrans à haute densité de pixels, il est de notre devoir de rendre le web plus beau.
Dans Retinafy your web sites & apps, Thomas Fuchs propose une méthode pour choisir la meilleure façon de “Retina-fier” les visuels d’un site Internet afin d’être au plus près de la qualité du texte sur de tels écrans.
Les dessins vectoriels (icônes, logos) doivent être idéalement affichés en SVG, avec une alternative en PNG pour les navigateurs ne supportant pas ce format (Internet Explorer <9 et anciennes versions d’Android par exemple).
Il est aussi possible d’utiliser des polices d'icônes, mais au risque d’avoir un rendu différent en fonction de l’environnement (navigateur, système d’exploitation) et de l’anticrénelage appliqué.
Certains graphiques (boutons) peuvent aussi être reproduits avec les nouvelles possibilités offertes par CSS3 : dégradés, ombres, bords arrondis, etc.
Les graphiques plus complexes (PNG) ou animés (GIF) peuvent être directement servis en résolution 2x (ex. : 64x64 au lieu de 32x32 pixels), avec leur affichage forcé en 1x (en CSS avec la propriété background-size, ou en HTML avec les attributs height et width).
Il peut arriver que ces images, une fois réduites, deviennent floues. Dans ce cas il est préférable de créer 2 images différentes et de cibler les écrans Retina avec les media-queries. Cette approche peut être aussi intéressante pour réduire le poids du fichier en destination des écrans non Retina.
Concernant les photos (JPEG), la meilleure solution est tout simplement de servir une version 2x à tous les périphériques, mais avec une compression beaucoup plus élevée (jusqu’à 20%). Avec cette méthode, il est tout à fait possible d’avoir des photos “de qualité Retina” pour un poids semblable à la taille normale, voire moindre.
Ainsi, en attendant le support natif des navigateurs pour la gestion des images responsive avec l’élément <picture> ou l’attribut srcset, l’auteur recommande d’éviter les solutions JavaScript (polyfills), qui peuvent alourdir le site (manipulation du DOM, requêtes HTTP supplémentaires).
Enfin, l’auteur rappelle de ne pas omettre la favicon, dont les versions 16x16 et 32x32 (voire 64x64) pixels peuvent être combinées dans un seul fichier favicon.ico, ainsi que les touch-icon : 57x57 (iPhone), 72x72 (iPad), 114x114 (iPhone 4+) et 144x144 (iPad 3+) pixels.