Blog

Base64 image encoding – Bilder Base64 kodiert in HTML/CSS einbinden


Base64 kodierte Bilder verwenden – Vorteil, Nachteil und Tools

Mit Hilfe einer Base64 Kodierung können wir Bilder direkt ins HTML oder CSS coden ohne zusätzliche Requests zu verursachen. Das kann in vielen Situationen ein großer Vorteil sein, hat allerdings auch Nachteile, die man berücksichtigen muss.

Vorteil

Wir benötigen keinen Request mehr um Bilder in eine Webseite einzubinden. Das reduziert die Gesamtladezeit der Webseite und entfernt potentielle Fehlerquellen durch nicht korrekt geladene Bilder.

Nachteil

Beim Einbinden des Base64 kodierten Bildes via CSS erhöht sich die Ladezeit der CSS Datei etwas. Die Webseite muss also einen Tick länger auf ihre Styledefinitionen warten. Das kann bei langsamen Internetverbindungen sehr störend sein.

Beispiel

HTML image embedding

<img src"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAAoCAYAAAC7HLUcAAAABHNCSVQICAgI..."/>

CSS image embedding

.image {
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAAoCAYAAAC7HLUcAAAABHNCSVQICAgI...');
}

XML image embedding

<image>
        <url>data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAAoCAYAAAC7HLUcAAAABHNCSVQICAgI...</url>
</image>

Tool zum kodieren eines Base64 Bildes (Base64 encoding)

http://www.base64-image.de

Fazit

Für Webseiten mit wenigen Bilder eignet sie die Base64 Kodierung zum Einbinden von Bilder bestens. Sollte man jedoch eine höhere Anzahl Bilder benötigen, würde ich von dieser Methode abraten. Eine Webseite, die auf ihre Styledefinitionen wartet sieht in den allerwenigsten Fällen ansprechend aus. Hier würde ich das dynamische Nachladen oder die Verwendung von Sprites bevorzugen. Sollte es sich nur um Icons handeln, geht sowieso kein Weg an FontIcons vorbei!

Tipp

Ich benutze Base64 encoded Images sehr gerne in Newslettern. Das hat den großen Vorteil, dass das benötigte Bild immer mit der Mail selbst ausgeliefert werden kann und somit auch immer direkt und ohne eventuell blockierten Request angezeigt werden kann. Base64 kodierte Bilder eignen sich dafür hervorragend und Newsletter sind in meinen Augen das ideale Einsatzgebiet für Base64 encoding.

Wer mehr über das eigentliche Verfahren wissen möchte, wird hier fündig.

Du magst den Post?
Loading...Loading...

Blog