The 102 of Email Code: Working with Images

Seeing code spill out in front of you can feel incredibly intimidating, and sometimes frustrating. I promise you, from marketer to marketer, that it’s way easier than it looks. Plus, being able to navigate email HTML is an incredibly valuable skill. In our email code basics series, we’ll teach you the email HTML fundamentals you need to know to become more comfortable with email code.

In our last post, we covered how you can navigate your email code to get up to speed on how to update links or make quick copy changes. But what about images?

Images are the backbone of many high-performing emails. But, with ever-increasing complexity and various file types, sizes, accessibility, and load time to consider, it can overwhelm even the most skilled marketer.

In this article, we’ll touch on some of the most common ways to add images to your email and go over the basics to make sure your subscribers have a great experience. If you’re looking for a deep dive on images, check out these guides:

You can easily follow along with the topics covered in this guide, so go ahead and open an email in Litmus Builder and we’ll get started!

Prepare your image

Before you can add your image to your email, make sure it’s set up for success. First, make sure the image you’re using is a good file type and size for email. Large file sizes will slow down your loading time, decreasing your overall conversions and engagement, so be sure you’re using a lightweight image that loads quickly.

Insert your image

Find where you want to add the image in your code—if you’re using Litmus Builder, flip on Grid View to click where you’d want an image to appear and then click into the code view. When you’ve found the perfect spot, use the <img> tag to add in your image, but replace the URL here with a direct link to your image.

If you’re not sure what a direct link is, look out for the end of the file name, it should end with an image file type like “.png,” “.jpg,” or “.gif.” Links to folders or HTML won’t work here, it needs to point directly to the image you’re adding to your email.


<img src="img-url.jpg" />

That’s it! Once you add in your tag, your image will show in the preview pane if you’re in Litmus Builder.

Curious where you can host your images? Most ESPs have a file hosting system where you can upload your images and use those public URLs for the image source in your email, so be sure to check your ESP first. If your ESP does not provide image file hosting, consider using Amazon’s AWS or your own website’s FTP server for image hosting.

Find the right dimensions

It’s best to use an image that’s twice the size of the space you’d like to insert your image so it looks great on all monitors and there’s no pixelation or blurriness. Adjust the width and height of your images by adding in a modifier to your <img> tag you built in the previous step. It will look something like this:


<img src="img-url.jpg" width="400" height="100" />

Adjust the values of the width and height depending on whatever makes sense for your email. You can play with these values and see how it looks by making changes, then clicking into the preview pane in Builder to see them update.

Add ALT text

ALT text describes an image so those who have images disabled in their email client or rely on a screen reader can easily read your email. For example, if we have an image of a promotion offering 20% off, adding some ALT text describing the offer makes your reader aware of the offer even if they can’t see images for any reason.


<img src=”img-url.jpg” width=”400” height=”100” alt=”20% off all seeds” />

The best ALT text is descriptive, succinct, and has the same intention as your image. If you run your email through Litmus Checklist before you send, we’ll flag missing ALT text so you can easily go in and update it. Now you don’t even have to check with a developer!

Swap images

Changed your mind on that one image? You’ve got two options:

1. Just the same as creating a new image, you can replace the URL that points to your image with a new one. This will keep all your dimensions, your ALT text, or whatever else might help style your image and just update the image content itself.

Take the current image tag and look for the file path:


<img src=”img-url.jpg” width=”400” height=”100” alt=”20% off all seeds” />

Replace the path with your new image path:


<img src=”updatedimg-url.jpg” width=”400” height=”100” alt=”20% off all seeds” />

2. Depending on where your image is hosted, you could also upload a new image with the exact same name to the same location. That way, you don’t need to touch the code at all to update your email’s image.

Picture-perfect email

Now that you’ve got the power to update and modify images, use that power wisely! Images in email can go wrong quickly. Heavy files that take ages to load, using images for your entire email, or foregoing accessibility for design can create messy subscriber experiences.

Here’s some quick best practices to keep in mind as you build your image library:

Keep files light and sweet, under 1MB is best and the smaller the better (Litmus Checklist checks your load time, so don’t fret if you don’t know every single image size.)
Add alternative text to make your email legible and accessible even if images aren’t visible.
Don’t send image-only emails and make sure your email has live text. It can be tempting to design an entire email using an image, but that can hurt engagement and conversions with long load times and poor experiences for those who have images disabled.

Need help on a specific newbie code question? Let us know what you’d like to see next in this series. No question is too basic!

_________________________________

Learn more about images in email:

Lyla Rozelle

Lyla Rozelle was a Senior Customer Marketing Manager at Litmus