Data URLs automatisch generieren

Bei Data URLs handelt es sich um eingebettete Bilder. Das Bild wird also nicht, wie sonst üblich, über eine weitere GET-Anfrage vom Server geladen, sondern direkt im Quelltext mitgesendet. Das an sich wäre jetzt allerdings nur in bestimmten Fällen vorteilhaft, da der Quelltext bei jedem Seitenaufruf größer ist und ein Bild nur beim ersten Aufruf geladen werden müsste. Werden Bilder allerdings im CSS definiert, so muss auch die CSS-Datei nur beim ersten Aufruf geladen werden. In Verbindung mit CSS können Data URLs also besonders effektiv eingesetzt werden.

Sind in der CSS Datei z.B. 10 Icons definiert, so wird der Browser jedes Bild über eine separate GET-Anfrage laden. Beim Einsatz von Data-URLs hingegen muss lediglich die CSS geladen werden, da diese alle Bilder bereits enthält. Die Anzahl der GET-Anfragen lässt sich so also deutlich reduzieren.

Bezüglich der Bandbreite dürfen Sie keine nennenswerten Vorteile erwarten. Auch wenn die Daten der HTTP-Header gespart werden, so erzeugt die Base64 Kodierung der eingebetteten Bilder hingegen eine Vergrößerung der Datenmenge. 

Beim Data URL Generator handelt es sich um eine weiteres Werkzeug zur Optimierung von CSS Dateien, die über das Weblication Framework registriert werden. Im Gegensatz zu Online Data URL Generatoren müssen Sie als Entwickler keine Bilder in irgendwelche Tools laden, um dann den generierten Quelltext wieder in Ihre CSS Dateien einzutragen. 

Sie arbeiten wie gewohnt in der CSS Datei und Weblication übernimmt alles Weitere für Sie bei der Generierung der Seite, indem zur Laufzeit und nur bei Bedarf eine optimierte CSS Datei generiert wird, die bereits die Data URLs beinhaltet.

Wie bei der automatischen Generierung von CSS3, der automatischen Zusammenfassung von mehreren CSS Dateien oder der automatischen Minimierung von CSS, so reicht auch hier eine Einstellung, um die Optimierungen automatisch durchführen zu lassen.