It is no secret that images are a powerful tool for marketers to use in marketing campaigns, regardless of the industry. However, in this article, we will talk specifically about embedding images in emails. Images and videos embedded in emails significantly improve the user experience, sometimes conveying more information than written text.
Images are an integral part of commercial advertising, as they are primarily used to depict the advertised products, not to mention other purposes. That said, it is essential to know how to properly embed images in emails to get the most out of the benefits they offer.
Embedded Image in an Email
The thing about embedded images is that they’re built right into the code of the email template, which means they show up in the text. Just like images, videos, and GIFs can also be embedded in emails. Here’s an example of an embedded GIF file in an email.
Why do You Need Images in Emails?
It is a matter of fact that most people prefer to view appealing images rather than simply read plain text. The presence of visual elements is beneficial and will only serve to your advantage. While it may require a bit more time and effort to create an email, it will be worth it. Current patterns show that users’ attention spans are getting shorter and shorter. Visual elements are exactly what can capture your subscriber’s short-term attention. According to Tarvent, the human brain can process images 60,000 times faster than text.
With visual elements, the content of the email will seem more interesting and easier to understand. The GetResponse resource presented a table comparing the results of emails with and without images based on their observations.
| Open rate | Click-through rate | Unsubscribe rate | Bounce rate | |
|---|---|---|---|---|
| Text-only emails | 35.79% | 1.64% | 0.13% | 2.36% |
| Emails with images | 43.12% | 4.84% | 0.15% | 2.42% |
However, this does not mean that images are more important than copy. The best email structure is a balance of visual elements and text. Too many images overload the design and slow down the loading of the email, which has a significant negative impact. It is best to use visual elements to convey the most important information and key points.
How to Embed Images into Email?
Now that your images are fully configured and ready to be embedded, let’s move on to the step-by-step instructions for embedding. Next, we will review and teach you how to properly embed images in emails using common email services, Gmail, and Outlook.
4 Techniques to Embed an Image in an Email
There are at least four main ways to embed an image in an email, each of which is unique and has its own pros and cons. However, some are still better due to their ease of use and higher deliverability rate. Below, we will discuss all four methods, noting which ones are worth using and which are not.
✅ Drag-and-Drop Embedding
This method is the simplest of the four because it does not require any coding knowledge to embed. This embedding option is provided directly by email services, which allow you to drag an image from a folder and drop it into the compose window. This automatically embeds and aligns the image. For more information about drag-and-drop embedding via Gmail and Outlook, read below.
✅ HTML Embedding
When embedding an image in an email using HTML, the file is placed on a web server rather than sent in the email. To embed in this way, you will need to insert an absolute link to the file in the code of your email.
This way, when the user opens the email, the email client server will detect where to find the file you sent. In turn, the email will not contain the image itself, but will know its name and where to find it, which gives certain advantages. These advantages include the fact that the recipient will be able to view your content regardless of who they are and how they view the email. Another significant privilege is that by storing the file on the server, it will take up less storage in the email itself, thus improving optimization and reducing download time.
❌ Inline Embedding
The inline embedding method is more commonly known as the Base64 “binary-to-text” encoding scheme. It involves placing an image inside textual assets such as HTML and CSS. With this method, the image is stored in HTML code as a single file. To do this, you need to insert the Base64 code into the path to the image file of your HTML email.
With this method, the image will load even faster, as it will be embedded in the string as a single file, reducing the number of requests required by the service to retrieve it. The main significant disadvantage of this method is its poor reception by email servers. Some servers do not accept such emails, and Microsoft Outlook blocks them completely. This method will only work for you if you focus on email clients such as Apple Mail, which not only accept embedded Base64 images but also display them instantly in open emails.
❌ Content-ID (CID) Image Embedding
Embedding CID images in email messages works thanks to the MIME (Multipurpose Internet Mail Extensions) standard. Such image embedding is done by writing technical information (file name and format) in the client library, and then inserting a link to the image via the CID identifier.
After sending the email, the mail server uses this CID to find and display the image. This method is also considered ineffective and largely obsolete, as it requires a lot of effort and has significant drawbacks. Among the drawbacks are the complete lack of support from some services, such as Webmail, and incorrect display on mobile devices, which can turn off up to 60% of your audience.
Therefore, the first two embedding methods are the best. They are the simplest, safest, and have higher open and deliverability rates. Even if the other two methods may have better email loading speeds, it is not worth it if your emails will open incorrectly or be totally blocked.
| Drag‑and‑Drop | HTML-linked images | Inline Base64 | CID embedded images | |
|---|---|---|---|---|
| Gmail | ✅ Supported | ✅ Supported | ❌ Blocked | ⚠️ Limited support |
| Outlook | ✅ Supported | ✅ Supported | ❌ Blocked | ✅ Supported |
| Apple Mail | ✅ Supported | ✅ Supported | ✅ Supported | ✅ Supported |
| Yahoo! Mail | ✅ Supported | ✅ Supported | ❌ Blocked | ⚠️ Limited support |
| Hotmail | ✅ Supported | ✅ Supported | ❌ Blocked | ⚠️ Limited support |
How to Embed Email Images with Gmail?
To embed an image in an email via Gmail, do the following:
1. Open your Gmail account.
2. Click on the “Compose” button on the upper left side of the screen.
3. At the bottom of the message window, click the “Insert photo” button.
4. In the “Insert photo” tab, select the required image by uploading it from your device using the “Upload” button or use an image from the Internet by inserting a link using the “Web address (URL)” button.
5. Once the image is uploaded, click “Insert” at the bottom of the screen, pointing the cursor to the place in the letter where you want to place the photo.
6. To change the size of the image, click on it and use the squares to reduce or enlarge it. Alternative text can be edited by clicking on the option below the selected image.
How to Embed Email Images with Outlook?
To embed an image in an email via Outlook, do the following:
1. Open your Outlook email account.
2. Click on the “New Mail” button in the left corner.
3. Move the cursor to the place where you want to add the image.
4. At the top of the editor, click on the “Insert” button on the toolbar.
5. Click the “Picture” button in the menu.
6. Depending on the option you need, select from the buttons “This device”, “Stock images”, or “Online images”.
7. After selecting the image, click the “Open” button.
8. Adjust the image size using the squares in the corners.
Embedding Images in HTML Emails with Email Service Providers
To create attractive HTML emails, marketers use email service providers such as Klaviyo. These platforms are designed as user-friendly tools for creating emails with all the necessary components.
To embed images, email service providers usually offer a drag-and-drop method in their editors, allowing you to drag content blocks and upload the necessary images. The best email editors are those that also offer a built-in image editing feature. They allow you to edit images and customize them to fit the design of your email in the email content editor.
Embedding an Image in Email Signature
Embedding an image in an email signature is also a great, unique idea that will not distract from the main content. When embedding an image in this way, it is important to ensure that the image in the email signature is not too large. The optimal size is 150 px high and 300 px wide. Also, keep in mind that the file size should not significantly affect the loading speed of the email.
How to Embed Images in Emails Properly?
When embedding images in your emails, you can benefit from some of our tips. You may already have a lot of experience with this, but were not aware of all the useful aspects. In any case, take a look at our tips that will help you embed visuals efficiently and make your emails even more appealing. Let’s get right to the key things that are mandatory when using images in emails:
- Provide high-quality images
Make sure that the images you want to add are of high resolution. Low quality and high pixelation will turn your subscribers off by causing them slight discomfort. High-quality visuals will be pleasing to the eye and create a professional impression.
- Set the optimal image file size
Unfortunately, high-quality images are usually too large. A large file size decreases optimization and significantly increases the time it takes to load an email. Subscribers won’t wait long for the email to load and may leave before it’s even finished. The optimal file size that will not affect the optimization is 100 KB.
Pro tip: No need to be discouraged that your high-quality images are significantly deteriorated in order to achieve the optimal size. There are many useful and free tools available on the Internet that compress images without compromising quality. Such tools allow you to achieve a size reduction of as much as 90%.
- Ensure accessibility with alt text
Alternative text in images has many useful features. First of all, it increases the accessibility of your emails for visually impaired users by describing the information in your emails to them. Another useful feature worth mentioning is the fact that alt text helps in case of image loading issues.
- Maintain a cross-device optimization in email
Users typically view emails on their phones, but a considerable percentage of them read emails on computers or tablets. Without cross-device optimization, you’re making it impossible for a significant part of your audience to view your emails, and thus losing customers. Focus on using adaptive email templates to ensure that your campaigns look the way you envisioned them, regardless of the device.
- Keep a balance between images and text
Too many images may not only be unattractive to your subscribers, but also trigger spam filters. If unattractiveness is a matter of personal preference, getting into the spam folder is really harmful to your email marketing. Try to stick to a neutral, balanced 60:40 ratio of text to images.
- Set a general proper image format
Avoid unusual and specific image formats. Stick to one or at least three common formats such as JPEG, PNG, and GIF. There’s little difference between JPEG and PNG, except that the former is suitable for photos and the latter for images with transparent backgrounds. GIFs are an element that adds interactivity to emails and are generally quite appealing, but do not overuse them.
- Stick to a consistent style
Your brand should have a consistent, unified style that emphasizes its identity. Your templates and design elements may slightly differ, but should still have the main features of the brand’s style in common.
- Conduct A/B testing regularly
A/B testing plays a significant role in proper email marketing. Embedded images are also subject to testing, as different audiences may respond differently to visual elements, positioning, or formats. A/B testing will show you the effectiveness of different versions of your email through metrics such as opens, clicks, and audience engagement. The point is to find the best possible strategy, achieve the best results with the best possible emails, and avoid problems such as slow loading, damaged images, or reduced deliverability.
What’s the Problem with Image-Only Emails?
Sending emails that only have pictures might seem easier and more visually appealing, but it can actually have some negative consequences that’ll affect your delivery and more. Let’s review these consequences:
Spam Indicator
Email clients are constantly looking for features that are specific to spammers in order to instantly detect them and send them to the spam folder. The image-only emails are precisely such a trigger for most email clients. Indeed, many images or only images in an email are a feature of content that spam filters are designed to detect. That’s why having a balance of text and images is important, as it will save you from ending up in the spam folder.
Display for the Client
Some users may have image display disabled, which means that when they open an image-only email, they will see a blank email. The same thing can happen because some email clients block images by default. Also, if you only add images, it will be difficult to fit all the content of the email into the alt text, and without it, visually impaired users will not be able to perceive your email.
Pros and Cons of Background Images in Emails
Embedding images in emails offers another design option, such as adding background images. This feature is included in most email service providers. One of the pros of emails with embedded background images is that they make you stand out from the competition by improving your design. A notable con is that email clients may display backgrounds differently, often ruining the look. This means that the design of your email will vary from client to client and may look slightly different from than expected.
The Best Image Formats for Embedding in Emails
Each format has its own specific features, making it more suitable than others for certain needs. You can stick to one if it best suits your style, or combine several to be more flexible in terms of design. The appearance and performance of the email primarily depend on the image format. The most common formats have the following features:
JPG (JPEG) Format
This format is preferred for photos and colorful images. To reduce the size, lossy compression is used. Although this type of compression is good for reducing file size, it can ruin the quality if you edit the image a lot. It all depends on the tool and method you use to compress the image. JPG also does not support transparency, which can cause difficulties.
GIF Format
GIF is a great format for increasing interactivity. GIFs are more likely to entertain the customer and be remembered. They are useful for creating simple graphics, animations, and images with multiple colors. GIF files can support transparent backgrounds, but their main drawback is their limited colors. GIFs only support 256 colors, making them not the best choice for detailed, colorful images.
PNG Format
The PNG format is considered the best format for images. When compressed, it generally does not lose quality. It also supports transparency, making it ideal for logos, icons, and images with a lot of text. However, it is significantly larger than JPEG but has no compression issues, allowing you to maintain high image quality in emails.
| Aspect | JPEG | GIF | PNG |
|---|---|---|---|
| Compression Type | Lossy | Lossless | Lossless |
| Color Support | 16.7 million (24-bit) | 256 colors | 16.7 million (24-bit) |
| Transparency | Not supported | Not supported | Supported |
| File Size | Small | Medium | Large |
| Email HTML Suitability | Good for photos and detailed images | Good for simple animations and graphics | Commonly used for icons and transparency |
Best Image Size for Email
Surely, the size of images in emails may vary, but there are still optimal recommendations that will help maintain quality and optimization regardless of the device. Before referring to these recommendations, consider what type of image you want to embed. Pay attention to the shape, aspect ratio, presence of product images, text, and infographics. After analyzing these components, move on to considering the recommendations for size:
- Full-width header image
Optimal size: 600-650 pixels wide and 200 to 300 pixels high.
With these proportions, the header will not distract subscribers from the main content and will ensure that the image looks good on different devices.
- Smaller in-body or product images
Recommended size: 300-400 px wide and 200-300 px high.
Such images should not take center stage but only reinforce the main message.
- Image thumbnails
Optimal size: 100-200 px wide and 100-200 px high for small images or icons.
They are ideal for previewing and do not take up much space.
- Aspect ratio
Optimal ratio: 16:9 or 4:3
Stick to the standard, optimal aspect ratio to avoid stretching or compressing images.
- Optimization for mobile devices
Optimal size: approximately 320-480 pixels wide and corresponding height.
These proportions are ideal for adapting to mobile devices and ensuring comfortable use on small screens.
Once you find your ideal image size for email, you can match all images according to the template. Working with such a template will speed up your work, and your emails will gain attractive images and a high level of engagement.
What’s the Difference between Attached vs. Embedded Images?
The difference between attached and embedded images in an email is notable and lies mainly in viewing and accessing.
The attached images are viewed as an addition to the email file and appear at the bottom of the email as an attachment. To view this image, recipients will first need to download it. The only advantage of this method is that the image will retain its original size and quality. However, this method of sending is almost useless for advertising. This is because when opening an email, the customer is unlikely to want to spend time downloading and opening the file; some will open it, but not the majority. Attaching an image is only ideal as a supplement to an embedded one as a high-quality file that the recipient may want to save or print.
Embedded images are part of the HTML code of an email and are automatically displayed when the email is opened. This allows the recipient to immediately see the content of the email, instantly attracting their attention and interest. Embedded images are exactly what you need for email marketing because they allow you to attract attention directly. However, embedded images do have some drawbacks. They can increase the size of the email, which will lead to longer loading, but we’ve already discussed how to avoid this above. Another disadvantage is that some email clients may block the content of the email for security reasons, forcing the recipient to activate everything manually.
Why are Images Being Blocked in Emails and How to Avoid It?
There can be different reasons for image blocking, but they’re often related to user protection by email clients. Reasons for image blocking include:
- The automatic image viewing option is turned off in the settings
- The email client has disabled the automatic viewing option to protect against malicious or harmful content. An example of such a company is Microsoft, which has stated this openly.
- Images are blocked due to a low-bandwidth Internet connection.
If your images are constantly blocked, this is not the end. Despite all these blocking conditions, there are some ways to get around them. Let’s take a look at them.
- Providing alternative text
Alternative text once again proves its necessity and usefulness. Alt text not only improves the accessibility of your emails but also helps you cope with image blocking. This is the simplest way to prevent image blocking, which is effective because it can force recipients to open the image.
- Getting to whitelists
To get on a whitelist, you need to ask your subscribers to add you to their list of trusted senders. Ask them once, and they will be able to see your images on a permanent basis.
- Maintain a balance between text and images
As we mentioned earlier, image-only emails are often perceived as spam, which means you need to balance them with text. Read more about the ideal balance ratio above.
- CTA buttons
CTA buttons are much more useful than text CTAs. The reason is not only their better design, but also the fact that they are not blocked. This means that even if your image is blocked, the button will remain visible. This will increase the likelihood of clicks on the button.
Do SPF/DKIM/DMARC Affect the Delivery of Emails with Images?
Your email authentication configuration plays an important role in delivery, regardless of whether your email contains images or not, as it determines whether your email will end up in the “Inbox” or “Spam” folder, or be blocked entirely. However, authentication configurations are given the most attention for emails with images. They pay even more attention to emails with images hosted externally, i.e., those uploaded from a website. The consequences of incorrect SPF/DKIM/DMARC authentication settings can be:
- The email is being marked as spam, even if the image is embedded correctly.
- Images are not loading because the email is marked as unreliable.
- The email is being completely blocked because it is suspected of being fraudulent.
Pro tip: Before sending an email, check your authentication settings using tools such as Mail Tester or GlockApps.
How can Broken Image Links and Redirects Affect Delivery?
Broken image links and redirects will primarily be detected by spam filters, which will lead to certain consequences.
Broken Image Links
Images from a server that cannot be found will cause spam filters to identify your email as non-professional and even harmful. The worst part is that just one such image can lead not only to the blocking of the email but also to a decrease in your sender rating, which is quite unpleasant.
Redirected Image Links
Redirects can also raise suspicion from spam filters. First of all, using links that go through several redirects, such as tracking URLs or proxy services for images, can slow down the loading of images in emails. It is best to avoid redirects because when spam filters decide that there are too many redirects, they will consider your email to be phishing or suspicious tracking.
Pro tip: Every time you send an email, make sure your images are working before sending. This small action will save you from significant consequences. Choose a reliable, fast-loading CDN server to host your images.
The Impact of GDPR and CAN-SPAM on Images in Emails
Neither regulation prohibits the use of images in emails, and both have a much broader purpose, but some actions related to the use of images in emails may violate these regulations.
GDPR (EU) Regulation
The essence of GDPR is to regulate the processing of personal data, including data collected through email tracking. This regulation also controls tracking pixels, i.e., invisible images that help detect when an email is opened; they are considered to be the collection of personal data and are therefore subject to GDPR regulation. According to the principles of the regulation, any tracking tools must request the user’s permission, so when adding such an image, you must add a request for permission to collect data; otherwise, it will be a violation of the regulation.
CAN-SPAM (USA) Regulation
Regarding images in emails and CAN-SPAM regulations, your images must be clear, transparent, and not misleading, as required by the regulations. Needless to say, misleading images that hide links to unrelated products or malicious software are subject to fines and lawsuits.
Tips for Personalizing Images in Emails
Image personalization is not included in the basic recommendations for embedding images, but it is an integral component for improving email marketing. Personalization and targeting are means of establishing contact with subscribers, which will increase interest and enhance conversion. Personalized images also have an impactful effect. Here are our tips on how to effectively personalize your email images.
Named Images
The simplest way to add personalization to an image is to include the customer’s name in it. Studies have shown that people like to be addressed by name, so this seemingly small detail will make the customer feel special. It’s simple: you use a third-party service such as NiftyImages to easily add names to images, and readers are pleasantly surprised by the level of personalization.
Location-based Content
A good method for businesses with physical retail locations or stores is to provide an individualized map of the area with their nearest locations based on the customer’s location. Such guidance will be helpful to interested customers and will lead to increased store visits and stronger customer relationships.
Personalized Product Recommendations
A very widespread method of personalization that uses customer data, such as purchase history or customer behavior while browsing the store’s web pages. Such personalization increases the relevance of product recommendations to the customer by offering what may really interest them. Offering relevant products is guaranteed to increase conversion rates and sales.
Final Thoughts
The presence of images is an integral part of marketing emails. That is why it is necessary to know how to correctly add an image to an email, in our case, embed it. Embedding is the most effective method of adding images, providing a more effective connection with the email. The embedding process itself can involve some issues and difficulties, which is why it is important to know how to achieve the best results.
You can also achieve the best email marketing results with us, Flowium. We are experienced professionals in the field of email marketing. That is why we guarantee you the most effective embedding of images in emails with the most attractive design. To get such results, all you need to do is contact us.
