Embedding images in HTML emails: How to create the perfect logo
There are various ways to embed images in e-mails – from classic linking to direct embedding. But which method delivers the best result? While CID tags are becoming less important, one golden rule remains: less is more.
To ensure the performance of your mailings, you should always compress images and check formats in a targeted manner. Find out here how to integrate graphics professionally and why a final shipping test is indispensable for an error-free display.
Table of Contents
Embed inline with Base64 encoding
The image is completely included in the email
Embedding images in the email requires a Base64 encoded string. So first, convert the image to BASE64 format. Once your image is encoded, embed it in the email with a standard HTML image tag.
Please follow the steps below to embed images in your emails inline with Base64 encoding.
- Reduce the image size to keep the email as small as possible
- Convert the image to a Base64 encoding. You can find corresponding free converters on the web.
Advantage
- Simple
Cons
- Can increase the size of emails
- Increased risk of blocking
HTML Examples – Embed Image with Base64 Encoding
- Example 1 – with link to a website
- Example 2 – Change html image size
Embedding via link
This is how AMAZON & Co do it
If we take a look at Amazon emails, we see that the images in these emails are included via a URL link.
“DON’T LEARN FROM ANYONE. LEARN FROM THE BEST.”, TÜV SÜD Academy, 2022
Please follow the steps below to include images in your emails via link.
- Reduce the image size so that as little data as possible has to go over the network
- Upload the images to a directory on your server or to any other public folder in the cloud
- Make sure the image is publicly available
- Link to the images in your HTML email with the full URL path
Benefits
- Keeps email size small
- Requires little additional effort
- Allows you to make changes to images after they are sent
Cons
- Sometimes suffers from blocking problems with some services
- Requires download from external servers
HTML example – Embed image with URL link
Integration via CID
CID images is a somewhat outdated way to embed images in HTML emails.
The image is attached to the e-mail and linked to it with an HTML tag in the e-mail. When the e-mail is opened by the user, the image is embedded in the e-mail.
HTML Example – Embed image via CID
Einbinden per CID
code
/code
SAP ABAP Examples
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
