Je cherchais la source d'un script utilisateur greasemonkey et j'ai remarqué ce qui suit dans leur CSS:
.even { background: #fff url(data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDkzAsKGAhxARSJx4oKJFAxgzFtjIkYDHjwNCigxAsiSAkygDAgA7) repeat-x bottom}
Je peux comprendre qu'un script greasemonkey voudrait regrouper tout ce qu'il peut dans la source plutôt que de l'héberger sur un serveur, c'est assez évident. Mais comme je n'avais pas vu cette technique auparavant, j'ai envisagé son utilisation et elle semble séduisante pour plusieurs raisons:
- Cela réduira le nombre de requêtes HTTP au chargement de la page, améliorant ainsi les performances
- S'il n'y a pas de CDN, cela réduira la quantité de trafic généré par les cookies envoyés avec les images
- Les fichiers CSS peuvent être mis en cache
- Les fichiers CSS peuvent être GZIPPED
Étant donné qu'IE6 (par exemple) a des problèmes de cache pour les images d'arrière-plan, cela ne semble pas être la pire idée ...
Alors, est-ce une bonne ou une mauvaise pratique, pourquoi NE L'UTILISEZ-VOUS PAS et quels outils utiliseriez-vous pour coder en base64 les images?
mise à jour - résultats des tests
test avec image: http://fragged.org/dev/map-shot.jpg - 133,6 Ko
URL de test: http://fragged.org/dev/base64.html
fichier CSS dédié: http://fragged.org/dev/base64.css - 178.1Kb
Côté serveur d'encodage GZIP
taille résultante envoyée au client (test des composants YSLOW): 59,3 Ko
Enregistrement des données envoyées au navigateur client de: 74,3 Ko
Bien, mais ce sera un peu moins utile pour les petites images, je suppose.
MISE À JOUR: Bryan McQuade, un ingénieur logiciel chez Google, travaillant sur PageSpeed, a déclaré lors de ChromeDevSummit 2013 que data: uris en CSS est considéré comme un anti-modèle bloquant le rendu pour fournir un CSS critique / minimal lors de son discours
#perfmatters: Instant mobile web apps
. Voir http://developer.chrome.com/devsummit/sessions et gardez cela à l'esprit - diapositive réelle
PRO:
limites de cache sur les appareils cellulaires ... CON:
certaines images doivent être traitées comme du contenu plutôt que comme une simple présentation et sont donc mieux adaptées aux balises HTML IMG qu'aux images d'arrière-plan CSS.