HTML-Mail Bilder einbetten

Bilder in HTML-Mails einbetten: So gelingt das perfekte Logo
Für das Einbinden von Bildern in E-Mails gibt es verschiedene Wege – von der klassischen Verlinkung bis zur direkten Einbettung. Doch welche Methode liefert das beste Ergebnis? Während CID-Tags zunehmend an Bedeutung verlieren, bleibt eine goldene Regel bestehen: Weniger ist mehr.

Um die Performance Ihrer Mailings zu sichern, sollten Sie Bilder stets komprimieren und Formate gezielt prüfen. Erfahren Sie hier, wie Sie Grafiken professionell integrieren und warum ein abschließender Versandtest für eine fehlerfreie Anzeige unverzichtbar ist.

Inhaltsverzeichnis

Einbetten Inline mit Base64-Codierung
Einbinden per Link
Einbinden per CID
SAP ABAP Beispiele

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.

HTML Beispiel – Bild einbinden per CID

Einbinden per CID
code

/code

SAP ABAP Beispiele


code
* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
* Logo vom Applikationsserver lesen
* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
  DATA:
  ls_soli TYPE soli,
  itb_bcsy_text2 TYPE bcsy_text,
 lv_filename TYPE localfile VALUE 'c:\mes.png',
 lv_xstring TYPE xstring, " Logo-Dateiinhalt als xstring
 lv_string TYPE string, " Datei von BASE64 in String umwandeln
 lt_soli_tab TYPE soli_tab. " String in soli_tab umwandeln

 itb_bcsy_text2 = itb_bcsy_text.
 REFRESH: itb_bcsy_text.

 LOOP AT itb_bcsy_text2 INTO ls_soli.

 IF ls_soli CS '%%ADD_LOGO%%'.

* Datei zum binären Lesen öffnen
 OPEN DATASET lv_filename FOR INPUT IN BINARY MODE.

 IF sy-subrc IS INITIAL.

* Daten lesen
 READ DATASET lv_filename INTO lv_xstring.

 IF lv_xstring IS NOT INITIAL.

 CALL FUNCTION 'SCMS_BASE64_ENCODE_STR'
 EXPORTING
 input = lv_xstring
 IMPORTING
 output = lv_string.

 CALL METHOD cl_bcs_convert=>string_to_soli
 EXPORTING
 iv_string = lv_string
 RECEIVING
 et_soli = lt_soli_tab.

 ENDIF.
* Datei schließen
 CLOSE DATASET lv_filename.
* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
* Ausgabe in Html
* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
 APPEND 'Das ist ein a - Anker Tag mit href und Title' TO itb_bcsy_text.
 ">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
 APPEND '' TO itb_bcsy_text.
 APPEND '' TO itb_bcsy_text.
 APPEND '' TO itb_bcsy_text.
 ">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
 APPEND '' TO itb_bcsy_text.
 APPEND '' TO itb_bcsy_text.
 APPEND '' TO itb_bcsy_text.
 ">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
 APPEND '' TO itb_bcsy_text.
 APPEND '' TO itb_bcsy_text.
 APPEND '' TO itb_bcsy_text.

 ENDIF.
 ELSE.
 APPEND ls_soli TO itb_bcsy_text.
 ENDIF.
 ENDLOOP.
/code