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.
Die Aussage oben ist nicht ganz korrekt, mittlerweile werden base64- Bilder korrekt in Gmail angezeigt.
Trotzdem bleibt die Mulitpart – Variante natürlich, wie oben beschrieben, die bessere, weil sehr viele Clients das out-of-the-box unterstützen ohne dass das Laden der Bilder explizit vom User freigegeben werden müsste.
Meiner Erfahrung nach ist die Größe der Mulitpart-Emails in den meisten Szenarien das kleinere Problem verglichen mit den Sicherheitsbedenken beim Laden von Bildern über eine externe URL. Aber sicherlich gibt’s auch für diese Regel Ausnahmen, gerade Newsletter-Versender setzen die Möglichkeit zum Ausspionieren der Empfänger ja bewusst ein und sehen das eher als Feature, denn als Problem.
Es wäre interessant zu wissen, warum Firmen wie Xing trotzdem ihre HTML-Newsletter ausschließlich mit klassischen Img-Urls verschicken anstatt wenigstens die Header-Grafiken als Multipart einzubetten. Wer weiß warum das so ist? Bin ich der Einzige dem das nicht gefällt?