# The Step-by-Step Guide on How to Embed Image in Email

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebPage",
  "headline": "How to Embed Images in Email: A Complete Guide in 2026",
  "description": "This guide discusses what embedding an image in an email means and discusses 4 ways you can do so to make your emails visually appealing.",
  "image": "https://res.cloudinary.com/mailmodo/image/upload/v1720021363/strapi/How_to_Embed_Images_in_Email_A_Simple_Guide_2536c38564.png",
  "datePublished": "2024-07-03T15:38:54.461Z",
  "dateModified": "2026-01-27T02:26:44.999Z",
  "publisher": {
    "@type": "Organization",
    "name": "Mailmodo",
    "url": "https://www.mailmodo.com/",
    "sameAs": [
      "https://www.linkedin.com/company/mailmodo/",
      "https://www.facebook.com/mailmodo/",
      "https://www.instagram.com/mailmodohq/",
      "https://www.youtube.com/@mailmodo"
    ],
    "logo": "https://www.mailmodo.com/static/images/logo/logo-full.svg",
    "description": "Mailmodo is a complete email marketing platform that helps email marketers to create and send interactive emails to drive growth and engagement.",
    "address": {
      "@type": "PostalAddress",
      "addressLocality": "Lewes",
      "addressRegion": "DE",
      "postalCode": "19958",
      "streetAddress": "Mailmodo Technologies Inc. 16192, Coastal Highway",
      "addressCountry": {
        "@type": "Country",
        "name": "US"
      }
    },
    "contactPoint": {
      "@type": "ContactPoint",
      "email": "enquiries@mailmodo.com",
      "contactType": "customer service"
    }
  }
}
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "How to Embed Images in Email: A Complete Guide in 2026",
  "description": "This guide discusses what embedding an image in an email means and discusses 4 ways you can do so to make your emails visually appealing.",
  "image": "https://res.cloudinary.com/mailmodo/image/upload/v1720021363/strapi/How_to_Embed_Images_in_Email_A_Simple_Guide_2536c38564.png",
  "datePublished": "2024-07-03T15:38:54.461Z",
  "dateModified": "2026-01-27T02:26:44.999Z",
  "author": {
    "@type": "Person",
    "name": "Mashkoor Alam",
    "url": "https://www.mailmodo.com/guides/author/mashkoor-alam/"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Mailmodo",
    "logo": {
      "@type": "ImageObject",
      "url": "https://www.mailmodo.com/static/images/logo/logo-full.svg"
    }
  },
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://www.mailmodo.com/guides/embed-image-in-email/"
  }
}
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "@id": "#creator",
  "description": "Email marketing software to create and send interactive emails to maximize conversions and reinvent your user journey",
  "email": "support@mailmodo.com",
  "image": "https://www.mailmodo.com/static/images/og-image.png",
  "knowsAbout": "Email marketing",
  "legalName": "Mailmodo Technologies Inc.",
  "location": "United States",
  "logo": "https://www.mailmodo.com/static/images/logo/logo-full.svg",
  "name": "Mailmodo",
  "sameAs": [
    "https://twitter.com/mailmodo",
    "https://www.facebook.com/company/mailmodo/",
    "https://www.linkedin.com/company/mailmodo/"
  ],
  "url": "https://www.mailmodo.com/"
}
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://www.mailmodo.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Guides",
      "item": "https://www.mailmodo.com/guides/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "embed image in email",
      "item": "https://www.mailmodo.com/guides/embed-image-in-email/"
    }
  ]
}
</script>

## Table of contents

- What does embedding an image in an email mean?
- Which email clients support embedded images?
- How to embed images in an email
- 4 best practices for embedding images in emails
- Conclusion

Marketers go to great lengths to make their emails look more visually appealing. One of the most preferred ways to do this is to embed images into your emails. Images make your emails look interesting as compared to plain text, capture the reader’s attention and prompt them to take action. They also make it easier to convey your message.

However, embedding images in emails isn’t always easy with different [email clients](https://www.mailmodo.com/guides/email-client/). Firstly, you must choose the right format and size to ensure that they are displayed correctly in your reader’s inbox. Secondly, when you try to add an image, it usually gets uploaded as an attachment. So, how do you embed the image within the body of the email in between the text or email copy?

In this guide, we’ll discuss why embedding images in emails is important and how you can embed images to make your emails look visually appealing and get the most out of them.

## What does embedding an image in an email mean?

**Embedding an image in emails means including images in the email body and making them appear within the email copy instead of being attached as a separate file.**

The embedded email images seamlessly blend with the email content, enhancing the visual appeal and delivering an engaging experience for readers. While there can be many use cases of embedding an image into your email, here are a few that are most common:

-   To display the product when you’re launching a new product
    
-   To display the coupon with coupon code when you’re sending a coupon or offers
    
-   To display the banner of the event you’re sending invites to people for
    
-   To display testimonials of satisfied clients
    

  
  

The image below shows an email with an embedded image in the email body.

![12.png](https://res.cloudinary.com/mailmodo/image/upload/f_auto,q_100/v1720022255/strapi/12_e8e2b210af.png)

This is different from attaching an image to your email. When you attach the images, the get appear at the bottom of the email and are usually not displayed unless downloaded and viewed separately. Here's what an attached image looks like in an email.

![9.png](https://res.cloudinary.com/mailmodo/image/upload/f_auto,q_100/v1720022252/strapi/9_2ac4a745fc.png)

Moreover, you can customize the size of embedded images using content blocks and adding links to images. When used strategically, embedded images make a huge difference in the reading experience.

## Which email clients support embedded images?

| Email Client | Renders Image by Default | Renders ALT Text | Renders Styled ALT Text |
|--------------|--------------------------|------------------|-------------------------|
| Apple        | Yes                      | Yes              | Yes                     |
| Gmail        | Yes                      | Yes              | Yes                     |
| Outlook      | No                       | Yes              | Yes                     |
| Yahoo        | No                       | Yes              | Yes                     |

## How to embed images in an email

Adding images in an email depends on how you create the email. There are four ways to do so. Let’s go through them so you can have your pick:

1.  ### Coding an email
    


If you're building an email manually using HTML, you have three main ways to include images: CID Embedding, Inline Embedding, and Linked Images. Processes like handling an [HTML file upload](https://blog.filestack.com/html-file-upload-tutorial-example/) or linking hosted assets work similarly, as each method has its own benefits and limitations.


Here is an in-depth look at each:

#### CID Image Embedding

CID (Content-ID) embedding involves attaching the image directly to the email and referencing it in your HTML using a unique content ID. It’s a common method when sending emails through traditional SMTP servers.


Pros:

-   It works offline as the image is already included in the email
    
-   You don’t need to upload or host the image elsewhere
    
-   It's less likely to be blocked by network firewalls  
      
    

Cons:

-   It can make your email size much larger
    
-   Not all email clients support it (especially Gmail and some webmail apps)
    
-   Some spam filters might remove the attached image automatically  
      
    

#### Inline Image Embedding (Base64)

Inline embedding encodes the image into Base64 format and embeds it directly in the HTML. This means the entire image data lives inside your code.

Pros:

-   You don’t need an image server or host; everything’s in the code
    
-   Great for small images like icons or logos
    
-   It’s easy to include right in your HTML
    

Cons:

-   It can increase your email size quickly, especially with big images
    
-   Emails might load more slowly because of the heavy code
    
-   Spam filters are more likely to flag or block it
    
-   Not ideal if you're using multiple images or large visuals
    

2.  ### Linked images
    

Linked images aren’t embedded in your email’s HTML. Instead, they’re hosted externally on your server, content delivery network (CDN), or image hosting platform and referenced using a standard image URL in the tag.

Pros:

-   Keeps your email size small and lightweight
    
-   Easy to manage and update (just change the image on the server)
    
-   Universally supported by all email clients
    
-   Ideal for campaigns with multiple or large images  
      
    

Cons:

-   Requires an internet connection to load
    
-   If the server goes down or the image is deleted, it won’t display
    
-   Privacy-conscious users or firewalls may prevent images from loading

  ### 3. Using a template builder
    

  

Many email marketing platforms provide user-friendly interfaces that allow you to embed images effortlessly without writing any HTML code. We’ve taken an example of Mailmodo that offers a drag-and-drop template builder and shown you how you can do it:

  

Step 1: Click on Create new template.

  
![7.png](https://res.cloudinary.com/mailmodo/image/upload/f_auto,q_100/v1720022254/strapi/7_5595934b05.png)


  
  

Step 2: Click on Start from scratch.

![5.png](https://res.cloudinary.com/mailmodo/image/upload/f_auto,q_100/v1720022251/strapi/5_9298ce3c15.png)
  



  

Step 3: Go to Quick Add and drag the image block and drop it in the email template.

  
![4.png](https://res.cloudinary.com/mailmodo/image/upload/f_auto,q_100/v1720022251/strapi/4_5719192987.png)



  

Step 4: Select the desired option to add an image. You can choose to upload the image from your computer, add it from the gallery, fetch the image from a URL, get stock images, or get GIFs and stickers.

![3.png](https://res.cloudinary.com/mailmodo/image/upload/f_auto,q_100/v1720022250/strapi/3_78fdf7fc6c.png)

  

When you choose to insert an image from a URL, you can opt for the dynamic URL option and specify a personalization parameter. In this field, enter the corresponding column header from your contact list, which will be used to extract the relevant image URL for each receiver.

  
  
  

Step 5: Select the image that you want to upload and click on Insert.

  
![6.png](https://res.cloudinary.com/mailmodo/image/upload/f_auto,q_100/v1720022251/strapi/6_852b242723.png)

You can customize the image by adding ALT text, borders, linking image to URL, changing alignment and aspect ratio. Once done, click save and your image will be added to your email body.

  

<div class="inline_cta"><div class="ctaBox"><div class="leftdiv"><p>Try Mailmodo’s Template Builder Today</p><div class="button_container"><a href="https://manage.mailmodo.com/auth/signup?utm_content=inline-s&utm_term=/guides/embed-image-in-email/"><button class="primary_button">Try Mailmodo for free</button></a></div></div><div class="rightdiv"><img src="https://res.cloudinary.com/mailmodo/image/upload/v1712747193/strapi/Group_1110165064_1_57b7027899.png" width="290" height="230" alt="cta-img"/></div></div><div class="gradient"></div></div>

  ### 4. Using email clients
    

Email clients such as Gmail and Outlook offer user-friendly options to embed images. Here’s how you can do it on Gmail.

Step 1: Click on the Compose button in your Gmail account.

  
![2.png](https://res.cloudinary.com/mailmodo/image/upload/f_auto,q_100/v1720022251/strapi/2_287071d0a2.png)



Step 2: Click on Insert photo icon.



![1.png](https://res.cloudinary.com/mailmodo/image/upload/f_auto,q_100/v1720023051/strapi/1_08e8143b49.png)
The Insert  Photo dialog box appears. It gives you 4 options to add images - Photos, Album, Upload, and Web Address (URL).
Step 3: Choose the photos that you want to upload. Select the inline options and click on Insert.

![11.png](https://res.cloudinary.com/mailmodo/image/upload/f_auto,q_100/v1720022253/strapi/11_803a5cc0c7.png)

The image will be added inline to the email body.

## 4 best practices for embedding images in emails

### 1. Choose the right image format

Since not all email service providers display every image format, picking the right format is essential. Ideally, you want to use an image format that is:

-   Widely supported across email platforms
    
-   Quick to load
    
-   Reliable across both desktop and mobile devices
    

For most emails, JPEG, PNG, and GIF are your safest options. These formats are supported by nearly all major email services like Gmail, Outlook, and Apple Mail.

For example, a sales rep sending a product promo to Gmail users might include a PNG image, which works perfectly and instantly. But if they had used a PSD file (a Photoshop format), it might not display at all or worse, cause the email to be flagged as spam.

### 2. Keep file sizes small

Your image size can impact not only how your email looks but also how well it performs. If the image is too big, it can break the layout of your email or take too long to load. If it’s too small, it may look blurry, especially on high-definition screens.

Ideally, you want your images to be:

-   Small in file size but still maintains it quality
    
-   Scaled to fit both desktop and mobile screens
    
-   Stay under spam filter limits
    

A good rule of thumb is to keep image widths around 600 pixels for desktop and 320 pixels for mobile. You can use tools like TinyJPG or Photoshop, which compress your image without making it blurry.

Apple, for example, often includes clean product images in emails. These visuals are well-compressed, beautifully sharp, and perfectly sized so they don’t slow down the message or break the experience.

![email marketing examples 1.png](https://res.cloudinary.com/mailmodo/image/upload/f_auto,q_100/v1750740360/strapi/email_marketing_examples_1_cc1eb6d0c4.png)

### 3. Add Alt text

Sometimes email services block images by default despite the best practices. Other times, a recipient might be using a screen reader or a slow internet connection. That’s where alt text comes in. It’s a simple line of text that shows up in place of the image and explains what the reader should be seeing.

Quality alt text is made up of:

-   A short and clear description that explains the purpose of the image
    
-   No extra words like “image of” or “photo of”, just the essential information.
    
-   Thoughtful use of keywords when relevant, without stuffing them in.
    

### 4. Always test your emails

Even if your email looks perfect in your editor, different devices might show it differently. A test helps you catch broken images, weird formatting, or delivery issues before your audience sees them.

Ideally, your testing process should include:

-   Testing across multiple email platforms and devices.
    
-   Checking load times for all images.
    
-   Make sure your message is clear, even if images don’t appear.
    
-   Using tools that detect technical issues before you send.

## Conclusion

Embedding images in emails works better than simply attaching images. Test and find out which techniques work best for your [email marketing campaigns](https://www.mailmodo.com/guides/email-marketing-campaign/). Ensure the images are in the right format and compatible with various email clients. Following the above-mentioned methods of embedding images can make your emails look great and noticeable and increase your engagement rates. It also adds to the overall design of your email and helps you stand out from the competition.

If you want to learn more about designing better emails, check out our resource below.



## Frequently Asked Questions

### What is the best size for embedding images in email?



It is recommended to keep a minimal image size while maintaining quality. For desktops, embed images of 600 pixels maximum and 320 pixels for mobile devices to ensure the images display effectively regardless of how readers access your email.



### Does embedding images affect email deliverability?



If the images are too large, they slow down the email loading times. Next, image-only emails can be flagged as spam. Therefore, keeping a small image file size with adequate text content is necessary to ensure your emails are delivered properly. 


### What are the best practices to use images in emails?


Optimize the images to reduce their size without compromising too much on quality.
Choose supported image formats such as JPEG, GIF, and PNG.
Use descriptive alt text for images that display when images are blocked or cannot be loaded.
Test emails across different email clients before sending them.
Use a trustworthy email service provider such as Mailmodo.
Use responsive email design techniques such as CSS styles in your emails to ensure emails load properly on different devices.
 


<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "What is the best size for embedding images in email?\n",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "\nIt is recommended to keep a minimal image size while maintaining quality. For desktops, embed images of 600 pixels maximum and 320 pixels for mobile devices to ensure the images display effectively regardless of how readers access your email.\n\n"
      }
    },
    {
      "@type": "Question",
      "name": "Does embedding images affect email deliverability?\n",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "\nIf the images are too large, they slow down the email loading times. Next, image-only emails can be flagged as spam. Therefore, keeping a small image file size with adequate text content is necessary to ensure your emails are delivered properly. \n"
      }
    },
    {
      "@type": "Question",
      "name": "What are the best practices to use images in emails?\n",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Optimize the images to reduce their size without compromising too much on quality.\nChoose supported image formats such as JPEG, GIF, and PNG.\nUse descriptive alt text for images that display when images are blocked or cannot be loaded.\nTest emails across different email clients before sending them.\nUse a trustworthy email service provider such as Mailmodo.\nUse responsive email design techniques such as CSS styles in your emails to ensure emails load properly on different devices.\n \n"
      }
    }
  ]
}
</script>

---

**Author: Mashkoor Alam**

Mashkoor has always been passionate about writing. He used to write short stories on his blog before he started writing for SaaS companies years back. He aspires to have a book under his name.

