The Marketer's ultimate guide to embedding images in email
Using images in email elevates plain text emails. It is the main reason that marketers opt for HTML emails instead of plain text emails.
Visual content helps people retain information. In fact, if a relevant image is paired with a piece of information, people retain 65% of the information three days later. And that is why 51% of B2C marketers consider creating engaging visual content is one of their main 3 priorities, according to the Content Marketing Institute.
If you have been facing issues with embedding images in emails, and if you are tired of sending broken emails, continue reading this blog post. We will walk you through everything you need to know how to embed an image in an email effectively.
Coding images in HTML emails
To send images in HTML emails, you can’t send them as graphic attachments, accompanying your email content. Rather host them on a web server and pull them into your email using absolute source links in your code.
What are absolute source links?
An absolute link defines the total and specific location of a certain file:
- The server hosting the file
- The directory it’s located in
- The name of the file itself
On the other hand, a relative link assumes that the server already knows where the file is located. That’s why a relative link only defines the name of the file since we don’t need to mention the server name or the directory.
In these two examples, you can clearly see the difference between absolute and relative links.
This is what an absolute link looks like:
<img src="https://www.chamaileon.io/email/images/logo.png">
As opposed to what a relative link looks like:
<img src="images/logo.png">
Basically, absolute links contain more details about your file- in this case, the image we want to embed in our email. And they guarantee that every person on your email list will be able to view your email content no matter who they are, and how they are reading your email.
Embedding images in HTML emails without wode
It can be overwhelming to manage HTML emails and think about absolute links VS relative links, where to host images, and other time-consuming details.
To overcome these issues, we recommend using a WYSIWYG drag and drop email builder, like Chamaileon. Our platform allows you to embed as many images as you would like without worrying about FTP files or what type of links to use in your code.
We host all digital documents on our own servers and automatically generate a bullet-proof email code that works perfectly on email clients.
The preview feature allows you to visualize your email on desktop and on mobile devices, to see how your images appear on different screens.
Best image formats for emails
Images come in many different formats: JPG, PNG, SVG, HEIC, PSD, BMP, SVG, RAW… But not all image formats are suitable for emails.
Although there is no right answer to which image format is the best for emails, we recommend using JPG or PNG files, since they work on most email clients.
The difference between image formats
In this table, you will clearly see the difference between the major image formats (except for GIF). We have a dedicated blog post about GIF files.
| Format | Abbreviation | Category | Details |
| JPG or JPEG | Joint Photographic Experts Group | Lossy | – Perfect for photographs with complex colors (it blends and displays millions of colors) – Can be compressed without losing quality (experts recommend a 60-75% compression setting) – Cannot preserve transparency Still images (cannot be animated) – Loses quality with every edit and export |
| PNG | Portable Network Graph | Lossless | – Good for images with millions of colors – Preserves transparency – Can be edited and exported multiple times without losing quality – Tend to have a larger size than JPG files – Are not as widely compatible with every platform, unlike JPG |
| SVG | Scalable Vector Graphics | Vector/Lossless | – Best suited for logo and icons created in applications like Illustrator (supports vector graphics) – Perfect for responsive design: can be scaled to any screen size without losing excellent quality – Is not supported on a lot of major platforms – Can become very heavy in size |
Image format for email use
We have put together this table that can serve as a guide to help you choose the right email format according to your needs.
| Format | Use for | Don’t use for |
| JPG | – Photographs with a lot of popping colors – Keeping file size small |
Logos, icons, animated images |
| PNG | – Images with transparent elements – Icons and logos |
Email clients that don’t support PNG |
| SVG | High-quality images (but make sure the file size remains low enough) | Most email clients (very limited support) |
Email example using JPG image
Email example using PNG image
👉 We recommend testing your email before sending it, to make sure that it looks good on all email clients.
Best image size and dimensions for email
Image dimensions for email
When you are making the decision of how big your image should be, you need to keep in mind screen sizes.
The most popular screen size is 360×640, so anything around those dimensions can get the job done. In fact, most experts state that the optimal image width is 600 pixels. There isn’t a specific email image height to respect. However, always keep in mind the size of your file and the length of your overall email.
Header image size should be around 600px – 700 px wide and around 100px-200px for the height.
According to Mailchimp, the rule when it comes to choosing the best email size is to double the original size of the image in question. That way you maintain the image quality on bigger screens.
For example, if you have an image in the dimensions of 700×700, then your email image should be double that size: 1400×1400.
When you are modifying your image dimensions, make sure to preserve the aspect ratio and quality.
Image size for email
The bigger the image, the heavier the email becomes, which ultimately affects its loading speed. That’s why it is advised to keep your image size below 1MB. The smaller the image size the better.
To decrease image size, you can use online tools such as CompressJPEG or ImageCompressor.
Make sure that you use a high-resolution image. That’s why when you compress it, the image still maintains its good quality.
You can find high-resolution images for free on Unsplash, Shutterstock, or Pexels.
How to avoid SPAM filters
If your emails end up in the SPAM folders, one of the reasons can be that you are using too many images. The trick is to balance the text-image ratio in your email. That’s why it’s crucial that you don’t send image-only emails.
Some marketers design an email template on photoshop and send it as an image to their email lists. This type of email gets picked up by SPAM filters and is automatically signaled as spam. In fact, Mailchimp found that the majority of their customers’ emails get flagged by spam filters due to the high image to text ratio.
To avoid this, you can use a professional email builder where you alternate between text elements and image elements.
Email On Acid found that the rule when it comes to image/text ratio is email depends on the number of characters in your email text.
- If your email has 500 characters or less, you should add one image.
- If your email has more than 500 characters, you can add more than one image.
You can also keep in mind the general 60/40 text to image ratio.
When sending the email using your ESP of choice, you can split your email list into 2 or more segments, which can help improve deliverability.
👉 Email Deliverability tips that’ll get you in the right inbox
Images blocked in email
This is what an email with blocked images looks like as opposed to what it should look like.
Why do images get blocked on email
Images get blocked on emails generally because:
- The email client has disabled images from loading for security reasons.
- The email reader (subscriber) has disabled images from loading for bandwidth reasons.
Sadly, as a marketer or email designer, you can’t really prevent your email images from being blocked. However, what you can do is make sure that your email is still comprehensible even without images.
Design your emails in a way that they still make sense, even with no visual content. This is one another benefit of maintaining a good text-to-image ratio in your email.
ALT Text for images in email
Add alternative text, more commonly known as ALT text to your email images. ALT text acts as a description of the images inserted in the email. In case the images are disabled or blocked, the ALT text can help the readers recognize what the image was about, and provides more context to the subscriber. Not to mention that it is an important element of email accessibility.
Here are some tips to keep in mind when writing alt texts:
- Be descriptive but don’t overdo it. Maintain a reasonable length of 2 or 3-word descriptions
- Don’t be repetitive. Try to come up with different alt texts for images with similar messages. That way, you maximize message comprehension.
- Don’t add alt text for every image element, if it’s not relevant to your email message.
Using Chamaileon, you can add ALT text to any image element in 2 simple clicks.
Wrapping up
Visual elements are an important part of every marketing communication support, and especially email. They help catch the attention of the reader and give them more context. Using an image manipulation service might be beneficial. Try experimenting with images in email, and when you feel confident enough, you can even try embedding video content or animated GIFs in your campaigns.
[optin-monster-shortcode id=”o4gbo7o30urqdua2o16v”]