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

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. So z.B. in der Signa­tur einer HTML E-Mail. Damit wird sicher­ge­stellt, dass der Leser nicht nur ein lee­res wei­ßes Feld sieht mit dem alter­na­ti­ven Text und einem Sym­bol, das dar­auf hin­weißt, dass hier etwas fehlt.

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.

base64 kodier­te Bil­der in HTML ein­bet­ten
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

Letz­te Arti­kel von Andreas Nitsche (Alle anzei­gen)

    Schreibe einen Kommentar