Quand vous faites un bouton avec une icône, dans mon cas de 48px de côté, il s’affichera très bien sur l’ordi :
Sur mobile en revanche, l’image sera toute pixelisée et moche :
(ne vous fiez pas à la taille des captures d’écran : la première est zoomée 3 fois et la seconde seulement 2 fois ; sans interpolation dans les deux pas. C’est la pixellisation qu’il faut regarder).Pourquoi ? Parce qu’un écran de mobile en full-HD mesure 12 cm, alors qu’un écran full-HD d’ordi mesure 40 cm : la densité de pixels (pixel-ratio) est plus grande sur mobile.
Pour contrer ça, les navigateurs mobiles doublent les pixels : un pixel sur l’ordinateur correspond à 4 pixels sur mobile afin de respecter les tailles d’affichage.
Si cela concerne une image, l’image de 48px est étirée sur le double : 96px, et on se retrouve avec un effet de pixellisation désagréable.
CSS et JS offrent des solutions pour détecter le pixel-ratio et fournir une image plus détaillée pour les écrans les plus denses.
On trouve des articles sur ça avec du code et des exemples :
- High DPI Images for Variable Pixel Densities - HTML5 Rocks
- Optimising for High Pixel Density Displays
- CSS Techniques for Retina Displays
Mais je trouve ça vachement lourd. Il y a en effet beaucoup plus simple : utiliser une image avec une grande résolution et la rétrécir sur les écrans les moins denses.
Le résultat visuel est sans appel :
Dans les deux cas, j’ai fait deux boutons : celui du haut avec une image de 48px affichée dans un bouton de 48px, et celui du bas est une image de 96px affichée dans un bouton de 48px et dont la taille est rapportée à 48px.
À gauche c’est sur mon ordinateur : on ne voit pas de différences entre les deux. À droite, c’est sur mobile : la différence est très visible : une icône de 96px réduite à 48px est bien plus nette !
Le code CSS est très simple et elle tient en un seul mot : background-size.
#bouton-48 {
width: 48px;
height: 48px;
background: url(icon96.png) no-repeat
background-position: 0px 0px;
background-size: 48px 48px;
}
L’image mesure bien 96 pixels de côté, mais elle est réduite à la taille de l’icône, donc ici d’un facteur 2.
La démonstration en temps réel est disponible sur cette page : affichez la sur l’ordi, puis sur mobile et vous verrez.
Avec la méthode des portes coulissantes, si vous savez disons deux icônes de 96px côté à côte, votre image fait 192px de large sur 96px de haut. Vous devrez donc utiliser ceci :
background-size: 96px 48px;
Les valeurs dans le background-position ne sont pas à modifier.
Notez qu’il y a un seul inconvénient à ceci : l’image de fond est plus grande, donc aussi plus lourde.
Je pense que ça vaut le coup quand même : si la gestion du cache est correcte, l’image restera dans le cache du navigateur.
De plus, si vous utilisez des images multi-icônes avec la méthode des portes coulissantes, le poids de l’image ne sera pas excessif non plus.
Enfin, vous pouvez utiliser SVG, mais je pense que ça ne vaut pas le coup en terme de poids des images si petites.