Add and Configure Images in HTML Emails

Updated
  • 1 minute(s) read
Prev Next

Goal

Add and configure images in an HTML email.

Procedure

Add an Image with HTML Code

  1. Create or edit an email and go to Step 2. Content in the message creation wizard.

  2. Insert the image using the <img> tag:

    <img src="[image URL]">

  3. You can add attributes to modify the image’s appearance (e.g., height, border).

  4. Add an alternative text using the alt attribute:

    <img src="imagename.gif" alt="Description of the image">

  5. This text appears when the image cannot be displayed and is essential for accessibility.

  6. Click Update Draft.

Note: Large images (over 500 KB) may slow down delivery and increase costs.

Add an Image with the Graphical Editor

  1. Create or edit an email and go to Step 2. Content in the message creation wizard.

  2. Click HTML Editor.

  3. Click the Insert/edit image icon.

  4. In the Insert/edit image window:

    • Enter the image URL under Source, or click Browse files to upload from the Mapp Engage content store.

    • Add the alternative description and, optionally, height and width.

  5. Click Save to save changes.

Note

If an image is not yet available in the Content Store, the system prompts you to upload it before continuing.

Configure Image Handling (Optional)

When creating an email, you can define how images are handled during sendout. The selected method affects message size, rendering behavior, and offline availability.

Image Handling Methods

Option

Description

Images Links are Unchanged

Image URLs remain exactly as defined.

Images are Inlined (Offline HTML)

Images are embedded directly into the email. This increases message size but allows offline viewing.

Images are Hosted in Mapp Engage (Online HTML)

Images are stored on Mapp servers and loaded when the email is opened.

Exclude Individual Images from Hosting or Inlining

By default, the selected image handling method applies to all images in your email. If needed, you can exclude specific images from being hosted or inlined.

To prevent a specific image from being processed, add the following attribute to the <img> tag:

ecm:process="false"

Example:

<img src="http://www.website.com/image.gif" ecm:process="false"/>

Images with this attribute remain unchanged and are loaded from the original source.

Best Practices

  • Keep image file sizes as small as possible.

  • Use hosted images for most campaigns.

  • Use inline images only when offline visibility is required.