J'ai d'ailleurs fait une étude de cas il y a peu de temps pour ma boite entre utiliser une image encodée en Base64 dans le CSS Versus un Sprite CSS pour gérer les images à but décoratif. Je partage les grandes lignes :
Autre alternative : image encodée en base64 ça consiste donc à encoder les images en base64 et les stocker dans le fichier CSS directement.
Points négatifs comparés au sprite CSS :
- Une image convertie en base64 est au final 10% plus lourde que si elle est sur un sprite. (Base64 = 6bit pour un caractère. Ceux en ASCII/utf-8 représente 8bit donc passer une image en chaine dans le CSS accroit de 25% de plus le poids. Mais une fois gzippé, on regagne d'où les 10% en gros. Bref)
- L'image, comme elle est dans le CSS, est obligatoirement chargée même si on n'en a pas forcément besoin
- Un fallback est nécessaire pour IE 6/7 malheureusement (non support des data URIs
- Pour les écrans rétina, ce n'est clairement pas fait pour. Alors que les sprites CSS oui
Points positifs comparés au sprite CSS :
- Le sprite CSS impose quand même un appel HTTP request de plus pour charger ce sprite.
- Tant qu'il n'est pas chargé, la page n'affichera pas les icônes. Donc on peut etre dans un "état intermédiaire" où l'utilisateur voit la structure, mais ne voit les images qu'après coup. Avec la méthode base64, la page doit avoir son CSS chargé avant de fournir l'affichage, donc les icônes le sont en même temps.