eKiwi

Bilder mit Base64-Kodierung direkt in HTML einbetten

Neben der normalen Verlinkung von Bildern in HTML als externe Datei, lassen sich Bilder auch komplett in die HTML-Datei einbinden.

Der Vorteil: man muss nur die HTML-Datei weitergeben, externe Abhängigkeiten bestehen nicht. Ideal auch für Newsletter per E-Mail. Viele E-Mail-Programme blockieren standardmäßig das Nachladen von Bildern, eingebettete Bilder werden hingegen direkt angezeigt.

Umsetzung

Ein normales Bild wird so eingebunden:

<img src="bild.png">

Das "src"-Attribut enthält den Link zum Bild. Statt dem Link kann man auch direkt die Bilddaten in das Attribut packen. Da Bilder binäre Daten sind, müssen diese zuerst in das Base64-Format transferiert werden.

Dies kann man sehr leicht mit unserem erledigen:

Base64 Bild Konverter Tool

Der erzeugte Code sieht dann in etwa so aus:

<img src="data:image/jpg;base64,/9j/4AAQSkZ ... "/>

Es erfolgt zuerst die Information, dass wir Daten einbetten und um welches Bildformat es sich handelt (data:image/jpg;base64,). Anschließend kommen die kodierten Bilddaten.

Wer ein Bild konvertiert wird feststellen, dass die Menge an Daten recht hoch ist. Durch die Konvertierung steigt die Datenmenge, da Base64 alle binären Daten in lesbare Zeichen konvertiert. Daher sollte man sich überlegen, welche Bilder man auf diese Weise einbinden will.

Ergebnis

Und so sieht das Ganze dann aus:


Copyright Dunkel & Iwer GbR - Alle Rechte vorbehalten