Using Images in HTML Email

I love a good, all-text email. If you can pull off an elegant, interesting design using only type then I’ll buy you a beer.

That’s just me, though. Most people like seeing a beautiful photograph or a quirky illustration in an email. In this chapter, we’ll take a look at how best to incorporate images in our campaigns. We’ll start by looking at which image formats work best, how to mark them up, using retina-ready images, and what to do when those damned email clients block our pretty pictures.

Which formats work best?

How many file formats are there for images? A dozen? Two dozen? More?

Fortunately for us, we only really need to concern ourselves with three image formats for everyday use. When it comes to email design, you should only ever encounter the following:

• JPEG
• PNG
• GIF

You may run into the occasional BMP, and more recently SVG files, but email designers have largely standardized on the three formats above.

Let’s look at the benefits and drawbacks of each.

JPEG (.jpg)

The JPEG file format, which stands for Joint Photographic Experts Group, is a great option when you need to include complex graphics like photographs or illustrations. Really, anything with either a lot of colors or subtle gradations between colors or shades.

JPEGs are lossy, which means that, when compressed to save space, they discard information that can lead to a loss in quality or the introduction of visual artifacts. However, unless you’re using extreme compression settings, most people won’t notice the loss in quality.

They are perfect for pictures of people, product shots, and intricate illustrations. I’d wager that most images you see in an email are likely JPEGs. They’re a great option. More importantly, JPEGs are supported across virtually every email client.

The two main drawbacks of JPEGs are that they do not support transparency and they cannot be animated. If we want transparency, we’ll want to use…

PNG (.png)

The Portable Network Graphics format, or PNG for short, is similar to JPEG in that it is a great option for anything with lots of colors. It works equally well for simpler graphics that need to be nice and crisp. In contrast to JPEG, it is a lossless file format–meaning that it does not discard any information when compressed. Because of this, file sizes for complex images can be larger than when using a JPEG.

There are a few varieties of the PNG format: PNG-8, PNG-24, and PNG-32. PNG-8 only supports up to 256 colors, compared to the millions for the other two options. While they all support transparency, the added colors in 24 and 32 allow for smoother looking graphics, which is why I recommend using 24. Both produce larger file sizes than 8, but 24 is a nice tradeoff between quality and file size.

While widely supported, PNG does not work in the worst email client in the world: Lotus Notes, specifically versions 6 and 7. For most of us, though, we can safely use PNGs since we aren’t catering to dinosaurs. However, if you have an audience that likes using frustratingly slow, archaic enterprise email clients, you will need to rely on either JPEGs or…

GIF (.gif)

Ah, the GIF. Let’s all say it together: GIF, not JIF. Seriously, if you call it a JIF, you can show yourself the door. I’m looking at you, Kevin.

GIFs are an interesting format. They are definitely not the best for complex images, since they only support up to 256 colors. But, they excel at displaying text. And they support transparency. And they work everywhere.

Most importantly, GIFs are the only option that allow for animated images. Have you ever received an email campaign showing a devastatingly good-looking model cycling through several different outfits? That’s the GIF in action. When you want to add some motion to an email, the GIF is still the best way to do it (we’ll talk about motion in email a bit later).

Apart from the color support, the main drawback to using GIFs is that they have the tendency to produce larger file sizes.

Breaking It Down

So, if you are wondering which format to use, here are some handy little guidelines to help you out:

• JPEG Use for any complex images that don’t require transparency (e.g. photos, gradients, product shots).
• PNG Use for complex or simple images that require transparency. Unless you are John Hammond.
• GIF Use for simple graphics like logos or icons, or when you need animation in an email.

Now, let’s look at how to incorporate images into an actual email template.

Coding Images

Adding an image to an email is actually surprisingly simple. All it really requires is the img tag. But, there are a few things that you should always keep in mind when adding images.

First, you always need to use absolute paths for your images. You have to host an image somewhere, it doesn’t matter whether it is on your own server or your ESP’s. Never use relative image paths. So, instead of doing this, which is common on the web:

<img src="/path/to/image.jpg" />

You need to do this:

<img src="http://site.com/path/to/image.jpg" />

That will successfully get your image into a campaign, but it might not look its best. Depending on where you view your email, you’ll likely run into a few problems. Let’s dive in and see how we can combat these issues.

Problem 1: Images Aren’t Properly Sized

Unless you’re slicing up a design in Photoshop or know precisely what size you need to save an image, chances are good that just dumping images into an email will result in improperly sized images and broken designs.

While we can easily constrain images within a parent element on the web–without specifying an image’s size-we need to explicitly state the width of an image to ensure that it displays at its intended size. Especially in Outlook, which can’t interpret an image’s size from the file. However, this isn’t typically done in an inline style. Instead, we use the width attribute on the img element.

<img src="http://site.com/path/to/image.jpg" width="600" />

This works for most email clients. Occasionally, you may run into a problem with an image’s height being improperly interpreted. In this case, you can either add the height attribute or rely on CSS to set the height property to auto.

Attribute Method:

<img src="http://site.com/path/to/image.jpg" width="600" height="200" />

Inline CSS Method:

<img src="http://site.com/path/to/image.jpg" width="600" style="height: auto;" />

Embedded CSS Method:

<style type=“text/css”>
  img { height: auto !important; }
</style>

One thing to keep in mind is that Microsoft Outlook is really weird with images. For whatever reason, Outlook has problems inferring the size of an image from a file and won’t necessarily display it as intended without explicitly declaring the dimensions of an image in code. While it can be an issue for any image, it is most noticeable when using hi-res images for Retina devices, which we’ll talk about in just a bit. At the very minimum, you should declare a width for your images. So, moving forward, we will incorporate that into our boilerplate img tag.

Problem 2: Borders Around Images

For most images, you’ll likely want to link an image out to a landing page. They are exciting, people are drawn to them, and they are familiar with tapping on images to take them places on the web. So it makes sense to link images in an email.

When you wrap your img tag with an link, though, some email clients will automatically add a blue border around the image to denote that it is a link. While this is great from a usability standpoint, it sucks from a designer’s perspective.

To prevent blue borders, we add the border attribute to our boilerplate image tag and make the value zero.

<img src="http://site.com/path/to/image.jpg" width="600" border="0" />

Now, even when images are linked, we can sleep easy knowing that they won’t have any nasty blue borders around them ruining our design.

Problem 3: Gaps Around Images

Some designs call for images placed next to or on top of each other.

While this is easy enough to pull off, you may notice some email clients displaying a gap between or below the images, making the email look broken. This is due to how some rendering engines (justifiably) handle images in regards to the baseline of text elements in the document.

The easiest fix for ensuring your images appear without gaps is to add the following to your img tag:

<img src="http://site.com/path/to/image.jpg" width="600" border="0" style="display: block;" />

That display: block; rule takes the baseline out of the equation and keeps everything tidy. Just keep an eye on where you’re applying it, as not every image needs to be made into a block-level element. If you have something like an icon next to a line of text, making that icon a block-level element will force it down on its own line.

Problem 4: Image Blocking

This is the big one when it comes to using images in email. As mentioned earlier in the book, a lot of email clients (and some users, too) will disable the loading of images in an email until you specifically tell them to download and display images. Ever see something similar to this?

That’s image blocking in action. Gmail used to be one of the main culprits, but recently enabled images by default. Litmus actually did a great study when this happened and found out that nearly 43% of all Gmail users had images disabled.

While that doesn’t necessarily apply to every other email client, we can certainly make some assumptions…

Image blocking is a huge problem. If your message is even partially tied up in an image, subscribers won’t see it. That’s why I advocate using as much HTML text as is humanly possible. But, nearly everyone will need to have images in an email at some point. So, how do we mitigate the effects of image blocking?

Simple: we use the alt attribute to provide some contextual information about our images.

<img src="http://site.com/path/to/image.jpg" alt="Lifting off to the future" width="600" border="0" style="display: block;" />

Now, when our images are blocked, most email clients will display the alternative (ALT) text, providing subscribers with at least some information about what the hell’s going on.

The cool thing about ALT text is that we can actually get fairly creative with it. Using inline styles on the img tag, we can style our ALT text so that it fits into our design aesthetic. We can make use of font styling and background colors to make a design that holds up beautifully even in the absence of images.

<img src="http://site.com/path/to/image.jpg" alt="Lifting off to the future" width="600" border="0" style="color: #00bafc; font-family: Arial, sans-serif; font-size: 18px; display: block;" />

ALT text should be baked into your image tags, at least for most images in an email. In some cases, it doesn’t make sense to use ALT text, like with logos or icons. These images tend to be smaller in size, so trying to cram a bunch of ALT text in that space doesn’t make a whole lot of sense. Likewise, those elements usually don’t have a textual equivalent, so you don’t really need to describe them if you don’t want to.

That being said, nearly every image also provides the opportunity to get cheeky and have some fun with ALT text. Some senders use ALT text as a place to include inside jokes, weird musings, and even emoticons. While not everyone sees them, having little easter eggs like that in an email is a killer way to build a relationship with subscribers and just make someone’s day.

Retina Images

With the introduction of the iPhone 4, Apple popularized the Retina display. Retina displays pack a huge number of pixels into a screen, far more than traditional computer displays. This increased pixel density makes the screen exceedingly sharp and clear, so much so that the human eye can no longer distinguish individual pixels.

One of the side effects of a Retina display is that images that are not optimized for them appear to be fuzzy or blurred. This can get frustrating, especially for notoriously picky designers. The way to get around this is to use higher resolution images and scale them down to the appropriate size in our code.

As an example, let’s say we have a photograph that needs to be 600x400 pixels. Normally, we would export that image from our graphics editor at that size. To make it appear crisp on Retina displays, we would instead save it out at least twice the intended size. In this case, we would export it at 1200x800 pixels.

Then, in our code, we would just use the 600x400 sizing:

<img src="http://site.com/path/to/retina-image.jpg" alt="So Crisp" width="600" height="400" border="0" style="display: block;" />

Now, that picture looks absolutely beautiful on Retina displays.

The major drawback of using Retina images in an email is that the increased image dimensions equate to an increased file size, too. For mobile users with limited data plans, this can be a very real concern. There are typically two methods that can help out.

Optimizing Images

One way to keep file size down, not only for Retina images, is to optimize and compress your images using software. While most designers play with the quality setting in Photoshop, applications built specifically for compressing images are typically more effective than whatever Photoshop can do.

It’s good practice to run your images through an optimization tool before uploading them to your server. There are a variety of tools available, my favorites being ImageOptim and JPEGmini. If you’re using Retina images, running them through one of these is a great way to keep your mobile subscribers happy.

Using Compressive Images

Another solution for reducing the file size of a Retina image is to use what are referred to as compressive images. Compressive images aren’t a new file format, but a way to export a JPEG to keep the file size small while still retaining good quality.

Essentially, you would have an image that is at least four times its intended size. This enormous image is then saved with an extremely low quality setting in Photoshop. Even though the large image looks terrible when viewed at full size, when it is scaled down in the code, it retains its detail–all without the added file weight.