Bilder in HTML-Mail einbetten
Einbinden von Logos (zum Beispiel in Signatur)
Um ein Bild (Logo) in eine E-Mail einzubinden, gibt es verschiedene Möglichkeiten. Sie können ein Bild verlinken, einbetten oder CID Tags verwenden. CID-Tags werden mit dem MailCenter nicht mehr unterstützt. Egal für welche Methode Sie sich entscheiden, gelten folgende Regeln. Weniger ist mehr (Marketing Profis werden das natürlich anders sehen).
Inhaltsverzeichnis
Soll heißen, je weniger Bilder Sie verwenden, umso besser ist die Performance. Komprimieren Sie Bilder und überprüfen die verwendeten Formate und Größen. Unabhängig davon, welche Methode Sie für das Einbinden und Einbetten wählen, sollten Sie Ihre E-Mails vor dem Versenden testen.
Einbetten Inline mit Base64-Codierung
Das Bild ist vollständig in der E-Mail enthalten
Das Einbetten von Bildern in die E-Mail erfordert eine Base64-codierte Zeichenfolge. Konvertieren Sie also zunächst das Bild in das BASE64-Format. Sobald Ihr Bild codiert ist, betten Sie es mit einem Standard-HTML-Bild-Tag in die E-Mail ein.
Befolgen Sie bitte die folgenden Schritte, um Bilder in Ihre E-Mails Inline mit Base64-Codierung einzubetten.
- Reduzieren Sie die Bildgröße, damit die E-Mail möglichst klein gehalten wird
- Wandel Sie das Bild in eine Base64 Codierung um. Sie finden entsprechende kostenlose Konverter im Web.
Vorteil
- Einfach
Nachteile
- Kann die Größe von E-Mails erhöhen
- Erhöhte Gefahr der Blockierung
HTML Beispiele – Bild einbetten mit Base64-Codierung
- Beispiel 1 – mit Verlinkung auf eine Webseite
- Beispiel 2 – Html Bildgröße ändern
Einbinden per Link
So machen es AMAZON & Co
Wenn wir einen Blick auf Amazon E-Mails werfen, dann sehen wir, dass die Bilder in diesen E-Mails über eine URL Link eingebunden werden.
„LERNE NICHT VON IRGENDWEM. LERNE VON DEN BESTEN.“, TÜV SÜD Akademie, 2022
Befolgen Sie bitte die folgenden Schritte, um Bilder in Ihre E-Mails per Link einzubinden.
- Reduzieren Sie die Bildgröße, damit möglichst wenig Daten über das Netz gehen müssen
- Laden Sie die Bilder in ein Verzeichnis auf Ihrem Server oder in einen beliebigen anderen öffentlichen Ordner in der Cloud
- Stellen Sie sicher, dass das Bild öffentlich zugänglich ist
- Verlinken Sie zu den Bildern in Ihrer HTML-E-Mail mit dem vollständigen URL-Pfad
Vorteile
- Hält die E-Mail-Größe gering
- Erfordert wenig zusätzlichen Aufwand
- Ermöglicht Änderungen an Bildern nach dem Senden
Nachteile
- Leidet manchmal unter Blockierungsproblemen bei manchen Diensten
- Erfordert Download von externen Servern
HTML Beispiel – Bild einbinden mit URL-Link
Einbinden per CID
CID-Bilder ist eine etwas veraltete Methode, Bilder in HTML E-Mails einzubetten.
Das Bild wird dabei an die E-Mail angehängt und mit einem HTML-Tag in der E-Mail darauf verlinkt. Wenn die E-Mail vom Anwender geöffnet, wird das Bild in die E-Mail eingebettet.
