Note: With the increasing use of a smartphones to read email, some aspects of image mapping that may affect their usability on older phones. Always test!

It is not at all uncommon to see the hero images in mailings sliced into several pieces. Email marketers have been using this technique for many years. If you normally first view your email with the images turned off, it is not uncommon to encounter an email with a table like this:

Only to have the following appear when you click “Display Images.”

There are some good reasons to slice an image into sections. The best ones are:

• To provide text or barcodes within the image (see Using Text to Deliver your Message)
• To provide animation without increasing the size requirements for the entire image
• To reduce the image size for areas with only a few colors
• To create informative alt tags for an infographic

But in most situations, slicing up an image leads to nothing good. It increases the HTML size and, since browsers only make a few requests at a time, it can slow down the rendering time for the image. When a single large image is requested, the data is sent continuously as fast as the server can send it, and with as much bandwidth as you or the server can provide. When there are multiple images, the browser can simultaneously request several of them at once—between 2 and 8 simultaneous requests are allowed from the browser at once, depending on the browser. But this is for all resources on the page, not just the images, so if you’ve split an image into 4 or more pieces, the browser must receive the first bit of data, then turn around and make another request for more data.  Each request has a round-trip time that mathematically must be longer than the time for a single request.

This process also creates more opportunities for problems to slip into the process. The finished image must be assembled in a table, and if any cell in the table has a problem, it can throw the entire image out of whack. We’ve all received emails with misaligned sections and unwanted gaps in an image where someone forgot to add style=”display: block;” to one of the img tags.

Forget What You’ve Been Told

Some people and even some email blogs recommend slicing up an image to help avoid loading problems in various email programs, but if the image really is big enough to create problems of this sort, it is already bigger than it should be. You would be better advised to reduced the size of the image using an image compression tool such as RIOT, which does a good job of dramatically reducing file sizes without much image deterioration.

The most common reason for sectioning an image is to assign different links to different portions of the image. But this is also the worst reason to section an image. Here’s an example of a hero image from a recent Banana Republic mailing:

And this is how they sliced up the image:

The reason? So that anytime someone clicked on any part of the man it would take them to the Men’s Department, while clicking on the woman takes them to the Women’s Department. They also wanted the text in the upper left to go to various departments and the background to go to the home page. Here is how the image is linked:

Green = Home Page, Pink = Women’s Department, Blue = Men’s Department

So how can you achieve the same thing without slicing your image into dozens of pieces? Try image mapping.

Email Image Mapping Comes of Age

You’ve may have read from past blogs and other sources that image mapping is problematic in email and you shouldn’t use it. “Don’t use image maps,” one website states bluntly. “They are not fully supported across all email clients.” While there may have been some merit to this argument a few years ago (that particular post goes back to 2007), today, image maps work virtually everywhere. Unless you happen to have an unusually large number of customers using Outlook 7, your recipients should have no trouble viewing or clicking image-mapped graphics.

Also, image maps can also cut down on the size of your email. The sliced image shown above required 112 lines of HTML and came in at 13Kb, compared to the image-mapped version, which required only 12 lines of HTML and took 2Kb. Here is the image map as it was applied to this picture using Dreamweaver:

In this example, the image itself links to the home page, as do the “Bright New Arrivals” text at the top and “shop now.” The man and woman link to their appropriate pages.

There are a few idiosyncrasies in the different browsers, but nothing to warrant a blanket rejection of the technique. In Internet Explorer, the link in the image is disabled after the image is loaded. Only the image map links are clickable. The background image, however, will still respond to right clicks and show its alt tag information when the mouse hovers over it. In some cases, the empty image box of a blocked image is still clickable, but the image maps may not be. In our trials, once the image is loaded the image map is active and clickable in all cases. In Gmail, when viewed with Firefox, image-blocked email displays only the alt text of the image with the appropriate link—no box and no image-mapped links—but the image maps become active as soon as the image is loaded. Our test, done in April of 2013, yielded the following results:

Keeping the caveats listed above in mind, we recommend the following as best practices when working with image maps:

Always assign a link to the base image

Yes, these sometimes disappear after the image is loaded, but they do help provide links in email clients where the image is blocked.

Don’t get carried away

The more complicated your image maps are, the more HTML is needed to render them. It is possible (although highly unlikely) to create an image map that is so complex that you’ll end up with an email file as large as the ones created by sliced images. The image maps shown above are not exactly simple polygons, and yet they still resulted in substantially smaller HTML files than the ones using sliced images.

Provide default link-mapped areas

In the case shown above, two of the image-mapped sections go to the same place as the image’s root link. In this way, if the browser does not respond to the image’s link after the image map is loaded, that page is still accessible. If we wanted to be really thorough, we could have blanketed the image with mapped links, but this is often overkill.

In 2014, it came to our attention that image maps were exhibiting some strange behaviors on smart phones. On iPhones, the image and the image map had to be restrained in a table to function properly, and on Android phones the image map was reducing to half its size, rendering it useless. Our recent tests have shown that these problems have been fixed. People using older phones might experience problems, however, so its a good idea to keep track of your subscriber base to make sure they are seeing your emails the way you intended. For more information on both image slicing and image mapping, download a free copy of our Email Image Linking Guide, which includes detailed instructions for creating images slices in Photoshop and image maps in Dreamweaver. Available here.

So go ahead and use those image maps. Are you using them already? Have you done any deliverability tests with image maps versus sliced images? We’d love to hear your findings. Is there a reason we haven’t addressed here why you do or do not use image maps? Drop us a line and let us know.