How to Send HTML Emails with Embedded Images in Make.com

Sending HTML emails with embedded images in make.com can dramatically improve your automations, letting you deliver visually rich content that renders reliably in most email clients. This guide walks you through practical methods to add images to your messages, from simple hosted links to advanced inline embedding techniques.

Understanding HTML Email Basics in Make.com

Before adding images, it is important to understand how HTML emails work inside the make.com platform. When you send a message with an email module, the content area typically accepts plain text or HTML. Images can be referenced either as remote files hosted online or as encoded data inside the HTML itself.

Most email clients support basic HTML, but they handle images and CSS differently. To avoid layout issues, use simple, well-structured HTML, minimal CSS, and test your messages in several mail clients.

Ways to Embed Images in HTML Emails with Make.com

In make.com, you can embed images in HTML emails using two main strategies:

Linking to hosted image files via standard image tags.
Embedding images directly with data URIs.

Each approach has pros and cons. Hosted images keep your email size small but can be blocked if remote content is disabled. Embedded images travel with the email, which improves reliability in some cases but increases message size.

Option 1: Use Hosted Image URLs in Make.com Emails

This is the simplest method and works well when you have stable image hosting. You place an image tag in your HTML and point it to a publicly accessible URL.

Use this pattern:

<img src="https://example.com/path/to/image.png" alt="Description" width="600" style="display:block;">

In make.com, you typically paste this HTML into the body field of your email module, such as the standard email or Gmail module.

Create or open your scenario.
Add an email module capable of sending HTML.
Switch the content mode to HTML if needed.
Paste your HTML template that includes the <img> tags.
Map dynamic data into attributes like alt text or query parameters as required.

Ensure the image URLs are public. Many email clients will not display images served from private or authenticated locations.

Option 2: Use Data URIs to Embed Images in Make.com

For more control over image rendering, you can embed images directly into your HTML using data URIs. This method stores the image as a base64 string inside the src attribute of your image tag.

The structure looks like this:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." alt="Description" width="600" style="display:block;">

In make.com, the typical process to embed an image as a data URI is:

Obtain the image file you want to embed.
Convert the image to a base64-encoded string using a tool or module.
Build a data URI that starts with the correct MIME type, followed by ;base64, and then the encoded string.
Insert the data URI as the src attribute value in your HTML.
Use that HTML in your email module within make.com.

Data URIs are helpful when you need the email to be self-contained, such as transactional messages that must display key images even when remote content is disabled.

Creating the HTML Email Template for Make.com

An effective HTML email template for use in make.com should be lightweight, table based where appropriate, and use inline CSS for reliable rendering across email clients.

Basic HTML Email Structure

Here is a simple structure you can adapt in make.com:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Your Email Title</title>
</head>
<body style="margin:0; padding:0;">
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td align="center">
        <table width="600" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td align="center" style="padding:20px 0;">
              <img src="YOUR_IMAGE_SRC" alt="Header" width="600" style="display:block;" />
            </td>
          </tr>
          <tr>
            <td style="font-family:Arial, sans-serif; font-size:14px; color:#333333; padding:20px;">
              <p>Your email message goes here.</p>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>

Replace YOUR_IMAGE_SRC with either a hosted URL or a data URI, depending on your chosen embedding method in make.com.

Inline Styling for Better Email Client Support

Most email clients strip or ignore stylesheets in the head. Therefore, keep CSS inline on each element. When designing templates for make.com, avoid complex layouts, floats, or advanced CSS features, and instead rely on nested tables and simple properties like padding, font, and color.

Use inline style attributes on table cells.
Define font families and sizes directly on <td> elements.
Set display:block; on images to prevent unwanted gaps.

Implementing Embedded Image Emails in Make.com

To put this into practice, follow a structured workflow inside make.com when creating or modifying your scenarios.

Step-by-Step Workflow in Make.com

Prepare your images: Decide whether you will host them externally or embed them via data URIs.
Create your HTML template: Build a minimal, table-based layout in an editor, including placeholders for your image sources.
Set up the scenario in make.com: Add the trigger and actions needed, including your chosen email sending module.
Paste the HTML: In the email module body, switch to HTML and insert your template. Map dynamic fields as needed.
Test in multiple clients: Send test messages to several accounts (for example Gmail, Outlook, Apple Mail) to verify image rendering.
Iterate and refine: Adjust image sizes, alt text, and spacing to ensure consistent presentation.

Best Practices for HTML Images in Make.com Emails

When working with HTML images in make.com, keep the following best practices in mind:

Use descriptive alt text: Provide meaningful alt descriptions for users who block images or use screen readers.
Optimize file sizes: Compress images before hosting or encoding to reduce message size and improve delivery speed.
Keep dimensions explicit: Set width and, if needed, height attributes or inline styles so layouts do not shift as images load.
Avoid too many large images: Excessive or oversized graphics can cause slow loading or trigger spam filters.

Combining these practical tips with the tools available in make.com will help ensure your HTML emails look consistent and professional across different inboxes.

Learning More About HTML Email in Make.com

If you want deeper technical detail on embedding images using HTML for email automations built with make.com, you can review the official how-to guide here: How to use HTML to send emails with embedded images. It expands on the underlying concepts, data URI formatting, and email client behaviors.

For broader automation and integration strategy around platforms like make.com, you can also explore expert resources such as Consultevo, which focuses on workflow design, optimization, and scalable automation architectures.

By combining a solid HTML structure, carefully chosen image embedding methods, and thorough testing inside make.com, you can build robust email workflows that consistently deliver visually engaging content to your audience.

Need Help With Make.com?

If you want expert help building, automating, or scaling your Make scenarios, work with ConsultEvo — certified workflow and automation specialists.

Get Help

HTML Email Images with Make.com