base64 kodier­te Bil­der in HTML einbetten

In man­chen Situa­tio­nen ist es wich­tig, Bil­der nicht aus dem Web nach­zu­la­den, son­dern die­se gleich in den bestehen­den HTML Code ein­zu­bet­ten. Das gilt zum Bei­spiel für die Signa­tur einer HTML E‑Mail. Nur bei ein­ge­bet­te­tem Bild ist sicher­ge­stellt, dass der Emp­fän­ger der E‑Mail die Signa­tur voll­stän­dig ange­zeigt bekommt. Andern­falls kann das Laden des Bil­des aus dem Web fehl­schla­gen oder vom E‑Mail Pro­gramm blo­ckiert wer­den. Der Emp­fän­ger der E‑mail sieht dann nur ein lee­res wei­ßes Feld mit dem alter­na­ti­ven Text und einem Sym­bol, das dar­auf hin­weist, dass hier etwas fehlt.

4.8/5 – (41 votes) 

Bei­spiel eines nicht gela­de­nen Bil­des in einer E‑Mail

Lösung für die­ses Problem

Um dies zu ver­hin­dern kann das Logo und auch jedes ande­re Bild in die E‑Mail ein­ge­bet­tet wer­den. Dies wird erreicht indem man das Bild nicht mit Hil­fe eines Pfa­des ein­bin­det son­dern die gesam­ten Bild­in­for­ma­tio­nen Base64 kodiert in den HTML Code einpflegt.

Um das gewünsch­te Ergeb­nis zu erhal­ten muss der Teil aus dem Feld XHTML Image kopiert wer­den. Mit dem kopier­ten Teil wird der <img> Tag in der Signa­tur ersetzt. Man kann die Attri­bu­te alt und style über­neh­men, wenn man die­se wei­ter­hin benut­zen möchte.

Das Ergeb­nis mit base64 Bild sieht so aus

E-Mail mit Logo
Für den Blog Arti­kel wur­de das inline Bild gekürzt. Je nach grö­ße des Bil­des ist die Zei­chen­ket­te sehr lang.

Viel Spaß beim Ausprobieren.

Schreibe einen Kommentar