Ist das Einbetten von Hintergrundbilddaten in CSS eine gute oder eine schlechte Vorgehensweise für Base64?
Ich habe mir die Quelle eines greasemonkey-Userskripts angesehen und in deren CSS Folgendes 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 in der Quelle bündeln möchte, anstatt es auf einem Server zu hosten, das ist offensichtlich genug. Da ich diese Technik vorher noch nicht gesehen hatte, habe ich über ihre Verwendung nachgedacht und sie scheint aus einer Reihe von Gründen ansprechend zu sein:
Dadurch wird die Anzahl der HTTP-Anforderungen beim Laden von Seiten reduziert und die Leistung verbessertWenn keine CDN vorhanden ist, wird der Datenverkehr durch Cookies, die zusammen mit Bildern gesendet werden, reduziertCSS-Dateien können zwischengespeichert werdenCSS-Dateien können GZIPPED werdenAngesichts der Tatsache, dass IE6 (zum Beispiel) Probleme mit dem Cache für Hintergrundbilder hat, scheint dies nicht die schlechteste Idee zu sein ...
Also, ist das eine gute oder schlechte Praxis, warum WÜRDEN Sie es nicht verwenden und welche Tools würden Sie verwenden, um die Bilder mit base64 zu kodieren?
Update - Testergebnisse
Testen mit Bild:http://fragged.org/dev/map-shot.jpg - 133,6 KB
Test-URL:http://fragged.org/dev/base64.html
dedizierte CSS-Datei:http://fragged.org/dev/base64.css - 178,1 KB
GZIP-Codierungsserverseite
Ergebnisgröße an Client gesendet (YSLOW-Komponententest):59,3 KB
Speicherung der an den Client-Browser gesendeten Daten von:74,3 KB
Schön, aber für kleinere Bilder ist es etwas weniger nützlich, denke ich.
UPDATE: Bryan McQuade, ein Softwareentwickler bei Google, der an PageSpeed arbeitet, brachte auf der ChromeDevSummit 2013 zum Ausdruck, dass data: uris in CSS als Anti-Pattern zum Blockieren des Renderns angesehen wird, um während seines Vortrags kritisches / minimales CSS bereitzustellen#perfmatters: Instant mobile web apps. Sehenhttp://developer.chrome.com/devsummit/sessions und denk dran -tatsächliche Folie