Looking to embed images in your emails? You've come to the right place.
It's nice to spice up your marketing or transactional emails with a few images from time to time. Even if it's just a logo, you'll find it helps to add a touch of legitimacy to what you send out.
However, there's no one way to do this. Do you link out to the image on a CDN? Do you embed it and reference it via a CID tag? Maybe as a linked image? Which one should you choose?
In this post, we'll show you how to embed an image in an email with all these options—plus, we'll address the pros and cons of each. For Twilio SendGrid users, we'll show you how you would use these options with SendGrid, so you can look at your needs and your audience and make up your mind.
To me, CID (or Content-ID) feels old, and something very akin to working with emails in Outlook. That aside, it's still an option, and we support it in our client libraries.
CID images work by attaching the image to the email you send and then using standard HTML image tags that reference that image to eventually embed it in the email when the user opens it.
Using the SendGrid Node.js client library, we'd attach the image like so:
Then, in your HTML template, you would embed the image in this way:
Wow, right? No.
The problem with CID embedded images is that they don't always display properly in email clients. The rule of thumb is that CID embedding will work fine in most desktop email clients, but most likely not at all in web-based email clients, such as Gmail or Yahoo! Mail.
Bummer.
Pros of CID images
It's been around for a long time
Its usage ensures the correct mime-type of multipart/related
It's supported via our client libs
Cons of CID images
Increases the size of overall email
Varies in results across email clients, especially webmail
Feels outdated
Requires more effort
Makes it harder for less technical staff to achieve
HTML inline embedding is much more simple, mostly because you don't have to completely roll your emails and dig around in Multipurpose Internet Mail Extensions or MIME to use it.
Embedding an image in an email first requires that you have a version of the said image as a Base64 encoded string. Once your encode your image, jump into your template, or whatever HTML you send out, and embed it using a standard HTML image tag:
Then you're done. Send away.
Pros of HTML inline embedding images
Is simpler to achieve
Is much faster to do
Requires less deep dive into MIME and application code
Cons of HTML inline embedding images
Can really increase the size of emails, especially if you use more than one image
Is most likely blocked by default in many webmail services
As you can see from the above example, if you try to use a lot of Base64 encoded images in your email, the actual size of the email sent will increase significantly, slowing down sending. Your alternative to this is to link out to your images and load them from an external server.
There's nothing super technical to achieve here. It's just linking to an image in HTML. However, you should consider the following if taking this approach—how many people will receive this email, and where are they in the world?
If you send to 100 people over the course of a week, then you don't need to consider this so much—you could host your images in the public folder of your Dropbox account if you want, and it would be more than sufficient.
However, if 200,000 people will get your email over the course of one day, then it would be wise to have your image stored on a Content Delivery Network such as Amazon's CloudFront.
Follow these simple steps to use linked images in your emails:
Upload images to a directory on your server or into any cloud storage public folder
Reduce the image size so that it doesn't require additional bandwidth
Link to the images in your HTML email with the full URL path
Ensure the image is publicly accessible
Pros of linked images
Keeps email weight light
Requires very little extra effort
Allows for changes to images after sending
Cons of linked images
Suffers the same blocking problems as Base64 encoding on most services
Regardless of which image embedding method you choose, you'll want to test your emails before you send. With our integrated Email Testing, you can see how your marketing emails look across clients, browsers, and devices—including iOS, Android, Gmail, Outlook, and more.
Testing your emails beforehand will let you know if an image fails to render on an important browser or in a popular inbox. If your SendGrid stats show that most of your recipients use Gmail, then you'll want to test your emails to make sure your images render properly in that inbox.
Does your image render correctly? Congratulations! If it doesn't, then it's time to start the troubleshooting. A simple solution may be to experiment with another image embedding method. Switch up your method, send another test email, and see if that fixed the problem.
Even if your images do render, it's important to design emails with the assumption that the images will not load. Regardless of your recipient's browser, device, or inbox, they may have adjusted their personal settings to automatically block images. Thus, you'll need to make sure your emails look great (not broken) when the image you planned for doesn't appear.
Also, include ALT text to make your emails more accessible to your visually impaired subscribers. Plus, if the image fails to load, your nonvisually impaired subscribers will know the context around the image that didn't load.
Playing around with images can have adverse effects on your deliverability. Here are a few things you'll want to keep in mind as you add images to your emails.
Regardless if it's a PDF, flyer, or cute cat GIF, don't add attachments to your emails. Inbox providers will usually flag emails with attachments as spam, even if the content of your email is legit. If you'd like to include any of these image elements, either add them via the 3 methods we mentioned above or link out to them with an effective call to action.
With an image, you have complete control over all the design elements and can really create a one-of-a-kind inbox experience. However, having your email only consist of an image (with no text) can cause your email to be flagged as spam.
Add variety to your email. Include images (sparingly) with text blocks and headers throughout. However, be mindful that too many images could be a negative factor to your deliverability.
If you have more questions about email deliverability, download our newest Email Deliverability Guide. It's chock-full of all the latest tips, tricks, and advice to make sure your emails get delivered where intended.
It's quite bleak, isn't it? Sadly, unified support for any of these methods isn't going to happen, so you need to think about what you send and to whom. On top of that, you need to think about where recipients will read it.
You can use the analytics data from your SendGrid account to build up a picture of who reads what and where they read it. Once you know that, you could programmatically choose the best template and embedding method for them.
Overall, it's best to keep imagery light in transactional emails and get to the important stuff quickly, which means mostly you'll want a logo or two in there. The rest you can achieve using inline CSS.
The best way to figure out what will suit your needs is to look at emails from larger-scale companies, such as Amazon, Pinterest, Spotify, or Twitter. View the code, look at their email headers, and discover what works for them, then apply it to your emails and test, test, test.*
*Handy hint: Don't use iOS Mail for testing. It's very kind to images and loads pretty much everything. Test with Gmail and Outlook if you can.
When it comes to embedding images in emails, there are several best practices you should consider to ensure optimal compatibility and deliverability across different email clients and devices.
Here are some guidelines:
Use the correct image format:Stick to widely supported image formats like JPEG, PNG, or GIF. Avoid using uncommon or proprietary formats that may not render correctly in all email clients.
Optimize image file size: Large image files can increase email load times and may get blocked by certain email clients. Compress your images to an appropriate size without compromising too much on quality.
Consider responsive design:Design your emails to be responsive, meaning they adapt to different screen sizes and orientations. Ensure that your images scale appropriately to fit the screen without causing distortion or excessive scrolling.
Use alternative text (alt text): Always include descriptive alt text for your images. Alt text is displayed when images are blocked or cannot be loaded, providing recipients with context and accessibility. It's also helpful for individuals using screen readers.
Test across multiple email clients: Different email clients and devices may render images differently. Test your emails across various popular clients (e.g., Gmail, Outlook, Apple Mail) and devices (desktop, mobile, tablet) to ensure your images display properly.
Provide a clear call to action: If your email contains clickable images, ensure there is a clear call to action (CTA) with text or a button. Some recipients may not understand that an image is clickable, so including explicit instructions can improve engagement.
Avoid image-only emails: Relying solely on images for your email content can be problematic. Some email clients may block images by default, leaving recipients with an empty or uninformative email. Always include relevant text alongside your images.
When you run all these tests and try these different methods, remember why you're trying to embed emails in the first place. Is it to improve your brand consistency? Maybe it's to improve email engagement? Or is it to keep up with your competitors?
With Twilio SendGrid, we can help you monitor your sending analytics and compare and contrast your results. If you try sending image-rich emails for a couple of weeks but find your engagement dipping, it might not be worth the slight bump in your brand consistency.
Your audience varies as widely as the different email clients, browsers, and devices—make sure to include their wants and needs in your design decisions, too.
