base64 kodier­te Bil­der in HTML ein­bet­ten

4.8
41

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
41

 

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

E-Mail ohne Logo

[cray­on-5ac­f176745b14258892256/]

Lösung für die­ses Pro­blem

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 ein­pflegt.

Jedes Bild kann mit Hil­fe eines Tools umge­wan­delt wer­den. Es gibt im Inter­net zahl­rei­che Tools mit denen man Bil­der in Base64 kon­ver­tie­ren kann. Ich habe die­se Tool genutzt: http://www.base64-image.de/

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öch­te.

Das Ergeb­nis mit base64 Bild sieht so aus

E-Mail mit Logo

[cray­on-5ac­f176745b24774462066/]

Für den Blog Arti­kel wur­de das inli­ne Bild gekürzt. Je nach grö­ße des Bil­des ist die Zei­chen­ket­te sehr lang.

Viel Spaß beim Aus­pro­bie­ren.

Die­sen Bei­trag tei­len

Schreibe einen Kommentar