Menü

base64 kodierte Bilder in HTML einbetten

In manchen Situationen ist es wichtig Bilder nicht aus dem Web nachzuladen, sondern diese gleich in den bestehenden HTML Code einzubetten. So z.B. in der Signatur einer HTML E-Mail. Damit wird sichergestellt, dass der Leser nicht nur ein leeres weißes Feld sieht mit dem alternativen Text und einem Symbol, das darauf hinweißt, dass hier etwas fehlt.

Beispiel eines nicht geladenen Bildes in einer E-Mail

E-Mail ohne Logo

Lösung für dieses Problem

Um dies zu verhindern kann das Logo und auch jedes andere Bild in die E-Mail eingebettet werden. Dies wird erreicht indem man das Bild nicht mit Hilfe eines Pfades einbindet sondern die gesamten Bildinformationen Base64 kodiert in den HTML Code einpflegt.

Jedes Bild kann mit Hilfe eines Tools umgewandelt werden. Es gibt im Internet zahlreiche Tools mit denen man Bilder in Base64 konvertieren kann. Ich habe diese Tool genutzt: http://www.base64-image.de/

Um das gewünschte Ergebnis zu erhalten muss der Teil aus dem Feld XHTML Image kopiert werden. Mit dem kopierten Teil wird der <img> Tag in der Signatur ersetzt. Man kann die Attribute alt und style übernehmen, wenn man diese weiterhin benutzen möchte.

Das Ergebnis mit base64 Bild sieht so aus

E-Mail mit Logo

Für den Blog Artikel wurde das inline Bild gekürzt. Je nach größe des Bildes ist die Zeichenkette sehr lang.

Viel Spaß beim Ausprobieren.

base64 kodierte Bilder in HTML einbetten
5 (100%) 2 Bewertung[en]

Andreas Nitsche

Andreas Nitsche

Andreas Nitsche ist Gründer und Inhaber von sixhop.net, dem starken Partner für Hosting und Pflege von Webplattformen. Der leidenschaftliche Webservice-Spezialist und sein Team stehen für zuverlässigen Service in den Bereichen Webhosting, Webentwicklung, Weboptimierung sowie Datensicherheit.
Andreas Nitsche

Letzte Artikel von Andreas Nitsche (Alle anzeigen)

    Schreibe einen Kommentar