Grafiken mit Data URIs (Base 64) erzeugen
In diesem Beitrag erfahrt wie Grafiken auf Basis von Data URIs (Base 64) hergestellt werden.
Data URIs sind komplexe Zeichenfolgen (Base 64 Code) mit deren Hilfe sich u.a. Grafiken erstellen lassen. Der erzeugte Code kann mit CSS als Hintergrundgrafik oder als HTML-Tag eingefügt werden. Im Gegensatz zu Pixelgrafiken muss keine externe Datei eingebunden werden. Im Gegensatz zu Grafiken auf Basis von CSS3 sind mit Data URIs auch komplexe Darstellungen möglich.
CSS-Hintergrundgestaltung mit Data URI
Der Base64-Code wird in CSS wie folgt verwendet. Wie bei der Arbeit mit Pixelbildern wird der Code als background
eingefügt und kann auch gekachelt werden.
.selector {
background:url( /* Base64-Code */ ) repeat;
}
Das folgende Beispiel zeigt die Hintergrundgestaltung einer Website auf Grundlage einer Data URI. Der Code ist bereits bei kleinen Grafiken sehr umfangreich. Ich möchte ihn dennoch zumindest einmal in diesem Artikel vollständig abbilden.
body {
background: white url(data:image/png;base64,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) repeat;
}
HTML-Tags mit Data URI
Ihr könnt auch img
-Tags verwenden um Base64-Grafiken einzubinden. Der Syntax sieht dann so aus:
<img width="300" height="342" alt="kulturbanause Logo" src=" <!-- Base 64 Code -->" />
Das folgende Beispiel zeigt die Einbindung als HTML-Tag.
Bilder in Data URIs umwandeln
Data URIs sind recht komplex. Der einfachste Weg zu Base64-Bildern führt daher über Tools zur Konvertierung. In diesen Online-Tools ladet ihr eine Grafik hoch und erhaltet den entsprechenden Code als Ausgabe. Je größer und komplexer die Grafik ist, desto länger wird auch die Zeichenkette. Achtet unbedingt darauf, die Grafik vor dem Upload im korrekten Dateiformat und mit bestmöglicher Kompression zu speichern. Die Konvertierungs-Tools rechnen die Datei 1:1 in Code um. Schlecht komprimierte Grafiken erzeugen somit auch längere Data-URIs.
Eine Liste an Tools zum Thema Data URI findet ihr hier.
Performance als Design-Faktor
Die Performance einer Website ist wichtiger denn je. Mit dem Einsatz von Data URIs spart ihr HTTP-Requests, was den Seitenaufbau beschleunigen kann. Man sollte nur darauf achten, dass der sehr umfangreiche Base64-Code nicht inperformanter wird als eine Pixelgrafik.
[…] Neben klassischen Bildformaten wie JPG und PNG werden auch Grafiken auf Basis von CSS3 und Base64 immer populärer. Welche Variante sich am ehesten anbietet muss je nach Motiv entschieden werden. […]
Coole vorstellung…
Ich werde das demnächst einmal ausprobieren.
Wäre vielleicht eine gute alternative zu CSS Spirits.
Eine sehr schöne Vorstellung, die ich durchaus in Betracht ziehen kann. Nur ab wann ist ein base64-Code „inperformanter“?
LG Timm
Das kann ich dir leider auch nicht sagen, aber der Link von Stefan sieht dies bezüglich vielversprechend aus.
Es ist also ein Vabanquespiel zwischen Dateigröße und HTTP-Requests.
Jetzt wird doch gesagt, dass das Laden der Website schnell gehen soll und es damit nicht gut ist, mehrere hundert Kilobyte laden zu müssen. Aber auch die Anzahl der Request spielt dabei eine große Rolle.
Wenn ich das richtig gelesen habe, ist es gut, Dateien zu encodieren, die nicht größer als 40kb sind. Letztlich also eine gute Alternative. :)
LG Timm
Übrigends geht das selbe auch mit Schriftarten (z.B. FontSquirrel – ExpertMode). Problem bei der ganzen Sache ist nur dass ein größere overhead an Daten von ca 20-30% im Quellcode erzeugt wird. Ergo schlechtere Ladezeiten der Webseite. Bei mehreren Bildern oder Fonts sollte Serverseitiges GZIPPED verwendet werden. http://goo.gl/87ijz