kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Grafiken mit Data URIs (Base 64) erzeugen

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.

Workshops und Seminare von kulturbanause

Unsere Berlin-Termine für Ende 2017 sind online!

Jetzt Tickets sichern!

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.

Beispiel anzeigen


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.

Beispiel anzeigen

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.

Base64 Pattern online erstellen

Mit Patternify, einem Tool das ich schon vor langer Zeit vorgestellt habe, ist es möglich Endlosmuster online zu erstellen. Diese Endlosmuster können auch als Base 64 Code ausgegeben werden.

Base64-Code mit Patternify erzeugen
Base64-Code mit Patternify erzeugen

Photoshop-Plugin für Base64-Export – Enigma64

Enigma64 ist ein kostenpflichtiges Photoshop-Plugin mit dessen Hilfe ihr u.a. auch Base64-Code aus Photoshop exportieren könnt. Darüber hinaus beschleunigt das Tool den Webdesign-Wrokflow erheblich. Einen ausführlichen Artikel zu Enigma findet ihr hier.

Base64-Export mit Enigma64
Base64-Export mit Enigma64

Quellen / Links

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

5 Kommentare

  1. Stefan

    Verfasst am 4. März 2013 um 13:27 Uhr.

    Ü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

  2. Der NetzBlogger

    Verfasst am 4. März 2013 um 15:02 Uhr.

    Eine sehr schöne Vorstellung, die ich durchaus in Betracht ziehen kann. Nur ab wann ist ein base64-Code „inperformanter“?
    LG Timm

    • Jonas Hellwig

      Verfasst am 4. März 2013 um 15:42 Uhr.

      Das kann ich dir leider auch nicht sagen, aber der Link von Stefan sieht dies bezüglich vielversprechend aus.

      • Der NetzBlogger

        Verfasst am 4. März 2013 um 16:12 Uhr.

        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

  3. Matthias Butz

    Verfasst am 7. März 2013 um 14:20 Uhr.

    Coole vorstellung…

    Ich werde das demnächst einmal ausprobieren.

    Wäre vielleicht eine gute alternative zu CSS Spirits.

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.