Ist das Einbetten von Hintergrundbilddaten in CSS als Base64 eine gute oder schlechte Praxis?

Question

Ich habe mir den Quellcode eines Greasemonkey-Userscripts angesehen und folgendes in der CSS-Datei festgestellt:

.even { background: #fff url(data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDkzAsKGAhxARSJx4oKJFAxgzFtjIkYDHjwNCigxAsiSAkygDAgA7) repeat-x bottom}

Ich kann verstehen, dass ein Greasemonkey-Skript alles, was es kann, im Quellcode bündeln möchte, anstatt es auf einem Server zu hosten, das ist offensichtlich genug. Aber da ich diese Technik vorher noch nicht gesehen hatte, habe ich ihre Verwendung in Erwägung gezogen, und sie scheint aus einer Reihe von Gründen attraktiv zu sein:

1. Es reduziert die Anzahl der HTTP-Anfragen beim Laden der Seite und verbessert so die Leistung.
2. Wenn kein CDN vorhanden ist, wird die Menge des Datenverkehrs, der durch Cookies erzeugt wird, die zusammen mit den Bildern gesendet werden, reduziert.
3. CSS-Dateien können zwischengespeichert werden
4. CSS-Dateien können GZIPPED sein

Wenn man bedenkt, dass der IE6 (zum Beispiel) Probleme mit dem Cache für Hintergrundbilder hat, scheint dies nicht die schlechteste Idee zu sein...

Also, ist dies eine gute oder schlechte Praxis, warum WOULDN'T Sie es verwenden und welche Tools würden Sie verwenden, um Base64 kodieren die Bilder?

update - ergebnisse der tests

• Prüfung mit Bild: http://fragged.org/dev/map-shot.jpg - 133.6Kb

• Test-URL: http://fragged.org/dev/base64.html

• eigene CSS-Datei: http://fragged.org/dev/base64.css - 178.1Kb

• GZIP-Kodierung auf dem Server

• resultierende Größe, die an den Kunden gesendet wird (YSLOW Komponenten-Test): 59.3Kb

• Speicherung der an den Client-Browser gesendeten Daten von: 74.3Kb

Schön, aber für kleinere Bilder wird es wohl etwas weniger nützlich sein.

UPDATE: Bryan McQuade, ein Software-Ingenieur bei Google, der an PageSpeed arbeitet, hat in seinem Vortrag auf dem ChromeDevSummit 2013 geäußert, dass data:uris in CSS als ein Rendering-Blocking-Anti-Pattern für die Bereitstellung von kritischem/minimalem CSS betrachtet wird #perfmatters: Instant mobile web apps . Siehe http://developer.chrome.com/devsummit/sessions und behalten Sie das im Hinterkopf - aktuelle Folie