Design Tip of the Week: Image Maps in Email

Image maps tend to be considered the "black sheep" of web design by many, but do they in fact have a place in HTML for email? The answer is yes and no – but mostly no.

Image Map in EmailWhen desiring to link multiple areas of one image to different locations, a coder may choose to use an image map to overlay a custom link map on an image; this allows one image to be linked in unique ways (including non-rectangular regions such as circles and polygons) without having to slice, code and link multiple smaller images. Utilizing image maps reduces the effort involved, but how successfully do they function in major email clients? Overall, image maps work pretty well, but there are enough exceptions that they should probably be avoided (unless of course you have data showing your subscribers use email clients that support image maps).

In our testing, we found that Internet Explorer (7 and 8), Firefox 3.6 (Windows and Mac), Outlook 2007, and Entourage 2008 all work perfectly across the board. However, Chrome and Safari only reliably recognize the links in image maps when:
  • Emails are opened in Yahoo! and Hotmail/Live Mail
  • The view as a webpage link is clicked (from any email client)
When using Gmail and AOL Mail, links in image maps:
  1. Work upon initial open, while images are still off
  2. Do not work once "display images" is clicked, and
  3. Work again once the email is closed and re-opened.
Additionally, if the subscriber has added the sender as a contact (or clicked the "always open images from this sender" link), then the image maps will work every time.

Our advice? Try to avoid using image maps for high-priority calls-to-action, and reserve image maps for secondary and tertiary content below the fold. Instead of relying on image maps, we recommend slicing your images carefully and purposefully into multiple linkable images. This in fact has an added benefit: with additional slices you can include area-specific ALT text, which adds to your email's usability, even from the moment it appears in the preview pane with the images still off.

Check out our other Design Tip of the Week posts for more ideas to improve your email design and performance.

Michael Thom
ExactTarget Campaign Solutions Team

  • Laszlo

    Hey guys,

    Anyone have experience with Blackberries reading img map links?