Data URLs automatisch generieren

30.01.2012

Weblication generiert Ihnen nun auf Wunsch automatisch Data URLs aus Icons, um so die Anzahl der GET-Anfragen zu reduzieren. Durch die reduzierte Anzahl der GET-Anfragen sinkt die Serverlast. Es handelt sich bei der Generierung von Data URLs also in erster Linie um ein Instrument zur Steigerung der Performance.

Der Nutzen von Data URLs

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. 

Die automatische Generierung von Data URLs

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.

Aktivierung des Data URL Generators

<wsl:includeCssRessources generateDataURL="1"/> 
<wsl:includeCssRessources generateDataURL="extensions:gif;dirs:images/links"/> 

Ursprüngliche CSS-Definition

a.intern {padding-left:18px;background:url(/wGlobalProject/wGlobal/layout/images/links/intern.gif) left 1px no-repeat}
a.intern {padding:0 0 0 16px;background:url(data:image/gif;base64,R0lGODlhDAAMAKIEAPj391lZWaCgoP///////wAAAAAAAAAAACH5BAEAAAQALAAAAAAMAAwAAAMsSLIs9E+MORdUtA4XZ6hMNwTfBDhkSpqoug6n+MKcNGYxlrER4P++WmNISAAAOw==) center left no-repeat}

Unterstützung von Data URLs durch Browser

Bis auf den Internet Explorer 6 und 7 unterstützen alle gängigen Browser Data URLs. Da bei Weblication Projekten derzeit noch Browserweichen für den IE 6 und den IE 7 vorhanden sind, können diese dazu genutzt werden, um die alten Internet Explorer weiterhin die Bilder vom Server laden zu lassen. Dem Einsatz von Data URLs steht also nichts mehr im Wege.