Es gibt verschiedene Arten um Bilder einer E-Mail hinzuzufügen. Eine häufig verwendete Art ist, wie bei Webseiten auch eine Bild-URL zu verwenden. Diese URL ist die Referenz auf den Speicherort (Server) des Bildes. Die Vorteile dieser Art sind, dass die E-Mail Größe sehr gering gehalten wird und dass nach dem die E-Mail verschickt wurde die Bilder bearbeitet werden können. Der große Nachteil an dieser Methode ist, dass der Empfänger die Bildbetrachtung im E-Mail-Programm aktivieren muss um die Bilder zu sehen.
<img src="http://image-url" width="24" height="24" alt="image">
Wenn der Empfänger die Bilder sofort sehen soll, müssen die Bilder in die E-Mail eingebettet werden. Diese Variante hat den Nachteil, dass die E-Mails durch die Bilder etwas größer werden. Allerdings ist der große Vorteil, dass der Empfänger sofort eine schöne mit Bildern befüllte E-Mail zu Gesicht bekommt.
Das Einbetten von Bildern kann auf verschiedene Arten geschehen:
Die erste Variante ist das Bild Base64 kodiert in eine „data“-Url einzufügen.
<img src="data:image/jpg;base64,/9j/4AAQSkZJRgABAgAA=AQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDc=pLDAxND Q0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMj=IyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAEAAQADASIAAhEBAxEB/8 QAHwAAA=QUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIh=MUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoK So0NTY3ODk6Q0RFRkdISUp=TVFVW..." alt="Calendar-Icon" height="100" width="100"/>
Allerdings funktionierte diese Variante nur richtig in Thunderbird. Weder Outlook noch Gmail haben die Bilder angezeigt.
Die andere Variante ist die Bilder per Content-ID (cid) zu referenzieren. Dafür werden die Bilder Base64 kodiert und dann einer Content-ID zugewiesen. Über diese Content-ID kann das Bild dann in der E-Mail referenziert werden. Wichtig ist, dass es sich um eine Multipart-E-Mail handelt.
From: example@foo.de
To: example@foo.de
Subject: Example
MIME-Version: 1.0
Content-Type: multipart/related;
boundary="----=_Part_7_1425761125.1401698010003"
------=_Part_7_1425761125.1401698010003
Content-Type: text/html;charset=UTF-8
Content-Transfer-Encoding: quoted-printable
<html>
...
<img src="cid:userImage" alt="User-Icon" height="70" width="70"/>
...
</html>
------=_Part_7_1425761125.1401698010003
Content-Type: image/jpeg
Content-Transfer-Encoding: base64
Content-Disposition: inline
Content-ID: <userImage>
/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAUDBAQEAwUEBAQFBQUGBwwIBwcHBw8LCwkMEQ8SEhEP
ERETFhwXExQaFRERGCEYGh0dHx8fExciJCIeJBweHx7/2wBDAQUFBQcGBw4ICA4eFBEUHh4eHh4e
Hh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh7/wAARCACWAJYDASIA
AhEBAxEB/8QAHAABAQACAwEBAAAAAAAAAAAAAAcFBgECBAMI/8QAORAAAgECAgYIAwcEAwAAAAAA
AAECAwQFEQYSITFRkQcUIkFUYYGTMnGxExUjM6HB0UJicuEl
------=_Part_7_1425761125.1401698010003
Diese Variante wir von allen gängigen E-Mail-Programmen unterstützt.
