Email 101: Images, Nice

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:

 

Cute kitten courtesy of placekitten.com.JPG

Best for photo-type images

Best for images with 256 colors or more

Best for images with gradients

Usually compress pretty well

 

cat design with transparent background, courtesy of pngimg.com.PNG

Great for text-based images, like logos!

Best when you need a transparent background

Lossless compression (which can mean bigger file size)

 

 

 

 

Dog and cat cuddling gif.GIF

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

 

 

 

Slide: Images Nice if you can see them. Images of email with images on and images off

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.

Side by side comparison of an email with images on and images 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:

Size

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.

Compress

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?