Natürlich kann man in jedem E-Mail-Client schön bunte E-Mails erstellen. Ich bevorzuge es aber manchmal, den Content selbst als HTML-Quellcode zu erstellen. Doch wie versendet man diesen HTML-Quellcode dann als E-Mail?

Vorher etwas zu Bildern, die in der HTML-E-Mail verwendet werden sollen...

Bilder in Mails

Natürlich kann man Bilder auf einen Webserver hochladen und dann in der E-Mail nur verlinken. Allerdings werden diese Bilder dann oft von den E-Mail-Clients geblockt und ohne weiteres Zutun des Empfängers nicht angezeigt.
Außerdem können sie überhaupt nicht mehr angezeigt werden, wenn ich die Bilder irgendwann wieder vom Webserver lösche, der Empfänger die E-Mail aber ggf. archiviert hat und nach einer Dekade nochmals anschaut.

E-Mail-Clients binden die Bilder in die E-Mails ein. Wie mache ich das, wenn ich den HTML-Quellcode selbst schreibe?

Mit dem Befehl

cat /pfad/zu/bild.png | base64 > /pfad/zu/code.txt

wird eine Bild-Datei in base64-kodierten Text umgewandelt.

So wird zum Beispiel aus diesem kleinen GIF-Bildchen Mr. Green folgender Text

R0lGODlhDwARAOZEAAAAAP///zpANwDkfgCKTAC8aACyYgB8RQB+RQDIbgCoXQDSdEZOROnq6QCcVe7u7gCOTtXW1UxXSQDaeADqgVViUgDug/b29kZQQgDOcVtkWFNbUZaZlQDifACCSIWMhHyCegDceUJKQADyhW92bQC+aVJdT01WSwDGbWtyabW4tSlyRlODaQCGSgCgWQDKb5OwogCmWwDsggDEbQDWdgDYd4CFfgGBR2l+Zf3+/gDgewC0YwCWUwCaVQB4QkuPZ11oWomPiFF7YwCqXv///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAEQALAAAAAAPABEAQAe9gESCF0FAJhUmGh8XgkQMHgABAZGSlAAJAo2CKkIaKTA5mh8QDgoAADMZNacWIwM2RCQICKeSkwAxCiSCHDgKBgUJCxMDFBYSHEQSBDwuQzsFKBk0IToDISIgB5a2liUggg0CBwceBAQQEAINmhEVwMLEFBsRgg8MpfDDxa0CDyekAAAD8AJAhw4AZAwQUaHFqYcQTy3AwGBbpW6VSjCIIIHWJIwCMdR7IMAHLYg9HPjT1GDDihvnfrBgJygQADs=

welchen man wie folgt als <img/>-tag in den HTML-Quellcode einbinden kann:

<img src='data:image/**FORMAT**;filename=**URSP. DATEINAME**;base64,**BASE64 TEXT**'>
<img src='data:image/gif;filename=mrgreen.gif;base64,R0lGODlhDw....'>

Natürlich wird der Quelltext auf die Art schnell unübersichtlich, weil die base64-Strings sehr lange sind.

Mehr Ãœbersicht dank Multipart

Bei AppleMail kann man auch Multipart-E-Mails erstellen und die Bilddaten auslagern, so dass der HTML-Quelltext übersichtlicher wird.

Nachdem wir in AppleMail den Inhalt der .eml-Datei in einem Texteditor geöffnet haben, wird die Zeile Content-Type im Header folgendermaßen geändert.

Inhalt vorher:
Content-Type: text/html;
        charset=us-ascii

Ändern zu:

Content-Type: multipart/related;
 boundary="------------diesIstMeinEinmaligesTrennzeichen"

Der Text "diesIstMeinEinmaligesTrennzeichen" kann beliebig geändert werden. Leer- und Sonderzeichen sind natürlich nicht empfehlenswert ;-)

Zwischen Header und HTML-Quellcode wird Folgendes eingefügt, um den Beginn des HTML-Bodys anzuzeigen:

--------------diesIstMeinEinmaligesTrennzeichen
Content-Type: text/html; charset=UTF-8
Content-Transfer-Encoding: 8bit

Danach folgt wie zuvor der E-Mail-Body <html>...</html> und danach können alle in der E-Mail einzubettenden Bilder eingefügt werden.

Jedes einzelne Bild ist nach diesem Schema anzufügen:

--------------diesIstMeinEinmaligesTrennzeichen
Content-Type: image/jpeg; name="bildname.jpg"
Content-Disposition: inline; filename="bildname.jpg"
Content-Id: <irgendEineEindeutigeIDfuerDiesesBild>
Content-Transfer-Encoding: base64

**base64 Code**

Nach allen Bildern ganz am Ende der Datei dann nochmals das Trennzeichen, dieses Mal mit nochmals zwei -- dahinter.

--------------diesIstMeinEinmaligesTrennzeichen--

Im HTML-Quellcode können die Bilder nun wie folgt verwendet werden:
cid: gefolgt von der Content-Id des Bildes (ohne die spitzen Klammern drumherum). Zum Beispiel:

<img src="cid:irgendEineEindeutigeIDfuerDiesesBild">

Kleines Komplettbeispiel mit Smily im E-Mail-Body:

Subject:
Mime-Version: 1.0
X-Apple-Base-Url: x-msg://7/
X-Universally-Unique-Identifier: BE3F396F-A83D-4CBE-AA88-77691FCE8749
X-Apple-Mail-Remote-Attachments: NO
From: Mirco Ropic <unglaublich@apfelz.ned>
X-Apple-Windows-Friendly: 1
Date: Tue, 13 Dec 2022 16:56:16 +0100
X-Apple-Mail-Signature:
Content-Transfer-Encoding: 7bit
Content-Type: multipart/related;
 boundary="------------diesIstMeinEinmaligesTrennzeichen"
Message-Id: <23CEC033-FA09-4AAF-AFBA-1347EDFAA185@apfelz.ned>
X-Uniform-Type-Identifier: com.apple.mail-draft


--------------diesIstMeinEinmaligesTrennzeichen
Content-Type: text/html; charset=UTF-8
Content-Transfer-Encoding: 8bit

<html><head></head><body dir="auto" style="word-wrap: break-word; -webkit-nbsp-mode: space; line-break: after-white-space;">
        <img src="cid:mrGreenSmily"> <== Hier ist der Smily
</body></html>

--------------diesIstMeinEinmaligesTrennzeichen
Content-Type: image/jpeg; name="image019.jpg"
Content-Disposition: inline; filename="image019.jpg"
Content-Id: <mrGreenSmily>
Content-Transfer-Encoding: base64

R0lGODlhDwARAOZEAAAAAP///zpANwDkfgCKTAC8aACyYgB8RQB+RQDIbgCoXQDSdEZOROnq6QCcVe7u7gCOTtXW1UxXSQDaeADqgVViUgDug/b29kZQQgDOcVtkWFNbUZaZlQDifACCSIWMhHyCegDceUJKQADyhW92bQC+aVJdT01WSwDGbWtyabW4tSlyRlODaQCGSgCgWQDKb5OwogCmWwDsggDEbQDWdgDYd4CFfgGBR2l+Zf3+/gDgewC0YwCWUwCaVQB4QkuPZ11oWomPiFF7YwCqXv///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAEQALAAAAAAPABEAQAe9gESCF0FAJhUmGh8XgkQMHgABAZGSlAAJAo2CKkIaKTA5mh8QDgoAADMZNacWIwM2RCQICKeSkwAxCiSCHDgKBgUJCxMDFBYSHEQSBDwuQzsFKBk0IToDISIgB5a2liUggg0CBwceBAQQEAINmhEVwMLEFBsRgg8MpfDDxa0CDyekAAAD8AJAhw4AZAwQUaHFqYcQTy3AwGBbpW6VSjCIIIHWJIwCMdR7IMAHLYg9HPjT1GDDihvnfrBgJygQADs=

--------------diesIstMeinEinmaligesTrennzeichen--

Wie versendete man speziell angepassten HTML-Quellcode nun per E-Mail?

Das hängt vom E-Mail-Client ab.

Thunderbird

Dank der Extension thunderhtmledit lässt sich durch einen weiteren Reiter im E-Mail-Bearbeitungsfenster in den Quelltext jeder E-Mail eingreifen.

Dies ist sicherlich die angenehmste Lösung, für selbst-erstellte HTML-E-Mails.

Apple Mail

Etwas komplizierter.
 
Man erstelle eine neue E-Mail. Ich habe da mal nur XXX in den E-Mail-Body rein geschrieben.
 
Diese E-Mail als Entwurf speichern und den Entwurf auf den Desktop (oder sonstwohin in den Finder) ziehen...
 

Wir haben nun eine .eml-Datei, die wir in einem Texteditor wie etwa meinem Lieblingseditor BBEdit öffnen können.
Im Texteditor sollten wir dann in etwa sowas sehen:

Content-Type: text/html;
        charset=us-ascii
Subject:
X-Apple-Base-Url: x-msg://5/
X-Universally-Unique-Identifier: 6165DEEB-8D76-44CE-AAC2-13D7A46BA06C
X-Apple-Mail-Remote-Attachments: YES
From: Apfel Z <unglaublich@apfelz.ned>
X-Apple-Windows-Friendly: 1
Date: Tue, 13 Dec 2022 08:40:01 +0100
X-Apple-Mail-Signature:
Content-Transfer-Encoding: 7bit
Message-Id: <4CE51E57-6E9F-4BCA-9552-204DC48B4677@apfelz.ned>
X-Uniform-Type-Identifier: com.apple.mail-draft
MIME-Version: 1.0

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii"></head>
<body dir="auto" style="word-wrap: break-word; -webkit-nbsp-mode: space; line-break: after-white-space;">
XXX
</body></html>

Nach belieben austoben und die Datei dann wieder speichern.

Nun die .eml-Datei öffnen und auf das "Weiterleiten"-Icon klicken (worauf man erst den ganzen Weiterleitungs-Kram wieder entfernen muss) oder nicht ganz so offensichtlich: In Apple Mail Ablage > Postfächer importieren... wählen. Wer hätte danach von sich aus danach gesucht?

"Daten von Apple Mail" auswählen und dann die gespeicherte .eml- Datei auswählen.

Es müsste nun in der Seitenleiste einen neuen Ordner "On my mac > Importiert" geben, in dem sich die bearbeitete E-Mail befindet, welche sich nun auf den weiteren Weg in das Postfach von anderen Personen machen kann.
Am besten durch einen Rechtsklick auf die E-Mail und dann "Erneut senden".

Entourage

Altes Programm, aber der Vollständigkeit halber und da ich es bis vor kurzem auf Grund fehlender Alternativen noch zum Versenden meine HTML-E-Mails verwendet hatte.

Hier hatte ich immer das Apple-Skript Complex HTML with inline File verwendet, welches man unter ~/Dokumente/Microsoft-Benutzerdaten/Entourage Script Menu Items ablegt.
Danach erstellt man eine neue E-Mail, in der die Adressaten und der Betreff schonmal eingetragen wird, danach wird aus dem Skript-Menü "Complex HTML with inline File" ausgewählt und der Datei-Auswahldialog erscheint, bei dem man eine HTML-Datei auswählen kann, die dann den E-Mail-Body darstellt.
Die E-Mail wird sofort nach Auswahl der Datei versendet und kann nicht mehr angesehen/bearbeitet werden.