First of all, let’s get something out of the way. I do not like all image emails. I don’t like getting them and I don’t like sending them. Especially if more than 50% of the image is text. Because you know how else you could do that? With HTML.
However, I also don’t like when I get a super boring all-text email. So use some images. Here’s some best practices:
Images, Nice if you use the best format
Let’s start with a little run down of image file types and when to use them:
Best for photo-type images
Best for images with 256 colors or more
Best for images with gradients
Usually compress pretty well
Great for text-based images, like logos!
Best when you need a transparent background
Lossless compression (which can mean bigger file size)
Good for images with limited colors
Good for line drawings, transparency
Best for ANIMATION! But remember: not all email browser support animation but they will display the first frame of your gif, so make sure it’s a good one
Images, Nice if you can see them
The thing about images is that not everyone can see them. Some people can’t see them because they have impaired vision. Some people can’t see them because they have images turned off in their email browser (And some email browsers have images off by default).
The good news is that you can make the email experience for these groups of people better with just one trick.
USE ALT TAGS. It’s just so easy. The alt tag should describe the image. If your image has text on it, absolutely make sure that text is in the alt tag. Screen readers, sometimes used by people with impaired vision to navigate digital experiences, will read the alt text. And most (though not all) email providers will display the alt text if the images are turned off.
You can even style the alt text to make it easier to read. Here’s what that code might look like:
<img src=”http://placekitten.com/400/200″ alt=”One cute kitten gazes fondly into your eyes” width=”100%” height=”auto” style=”max-width:400px; text-align:center; font-size:21px; color:#AC342B; font-family: Impact, Helvetica, sans-serif;”>
And below you can see this code in action. On the right is what the user sees if the images are on. On the left, is what the user would see if the images are off.
Images, Nice if they don’t take forever to load
One of the other problems with image-heavy emails is that if those images are too large they can take forever to load. Especially if someone is checking their email on their cellular network.
Half of users will leave a website if it takes longer than 3 seconds to load. So, do you think someone is going to wait for your images to load when they are checking their email? Probably not. They probably will just hit delete, or swipe to the next email.
Luckily, there’s a few solutions to make your images as efficient as possible:
First of all, size your image correctly. If you read my previous post, you probably have a max-width on your email body. That means that you definitely do not need any image larger than the max-width of your email. Probably you don’t even need it that big. I’ll bet you don’t need an image larger than 600px. (There’s a whole discussion about sizing for Retina images that I’m not going to get into here.)
So, pop your image into Photoshop if you’ve got it, or something like reduceimages.com (there’s plenty of options, I’m not endorsing one over the other). Change the size to 600px, or whatever size you plan on using the image. If you have the option, your image should be 72dpi, anything higher isn’t necessary for web.
If I’ve got an image in the correct size, I always pop over to tinyjpg.com to compress it. This website will compress your image and remove any extra information from the file. Now your image is ready to go.
As you can see in the above image, the difference between an unsized photo of my sweet little dog Rosie and one that has been sized for email and compressed on tinyjpg is 50kb! That makes a huge difference, especially if I’m using several images in my email.
This post is part of a series based on an email training presentation I did for my co-workers. Want to read the whole series?