201009Sep

Spritebaker: Bilder in CSS zu Base64 konvertieren

In der Welt der Website-Optimierung dürfte es bekannt sein, dass sich Bild-Deklarationen in CSS auch im Base64-Format definieren lassen — moderne Browser können mit Base64 enkodierte Daten dekodieren und den Inhalt darstellen. Bilder müssen dazu nur entsprechend konvertiert werden und können anschließend als Text in der CSS-Datei definiert werden. Der Nachteil an dieser Methode: In Internet Explorer bis Version 8 ist keine Base64-Dekodierung integriert, so dass für diese Browser ein Fallback angelegt werden muss. Wer mit diesen Aspekten einverstanden ist, kann sich einmal den Spritebaker ansehen. Das Tool wandelt Bild-Pfade (und die entsprechenden Bilddateien) in Stylesheets automatisch in das Base64-Format um.

Spritebaker

Spritebaker funktioniert sehr gut, so dass eine manuelle Umwandlung der einzelnen Grafiken entfällt. Auf der Seite wird zudem darauf hingewiesen, dass die CSS-Dateien durch Base64-Encoding sehr groß werden und diese Methode nur in Verbindung mit einer serverseitigen GZip-Komprimierung verwendet werden sollte. Weitere Details finden sich auf der Info-Seite.
Der letzte Clou hinsichtlich Dateigrößen-Optimierung bestand in der Komprimierung von JavaScript und CSS durch PNG-Grafiken.