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:

3 Kommentare

  1. Sehr gut und einfach erklärt.
    Frage: Wenn ich das selbe Bild an unterschiedlichen Stellen mehrmals einbetten will, kann ich das auch tun ohne den Bildcode jedes Mal neu zu speichern? Kann ich also das Bild nur einmal im Base64-Format speichern und dann an verschiedenen Stellen im HTML anzeigen?

Schreibe einen Kommentar zu Palmstroem Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.