Do image maps work in HTML email?
Given current conditions in which images are very often blocked in email messages, image maps seem to be an odd technique to pursue. Because when your source image is blocked, your links are no longer functional. That’s a fundamental accessibility issue. However, the Campaign Monitor team receives frequent inquires about image maps so we decided to test them out for people who are curious. Then you, the web designer, can decide how brave you are when you unleash them into the wild.
The Results
Remarkably, email clients offered good support for image maps. And most surprising is that many clients retain functionality of the links even with images off. Following is a table which exhibits how popular email clients handled the image maps.
| Image Map Support in Email Clients | ||
|---|---|---|
| Client | Functions With Images On | Functions With Images Off |
| .Mac | ||
| Yahoo! Mail | ||
| Yahoo! Mail Classic | ||
| AOL Webmail | ||
| Gmail | ||
| Windows Live Hotmail | ||
| Apple Mail | ||
| Thunderbird | ||
| Penelope (Eudora 8) | ||
| Outlook 2007 | ||
| Outlook 2003 | ||
| Outlook Express | ||
| Windows Live Mail | ||
| Lotus Notes 8 | ||
| Entourage | ||
The Recommendation
The results indicate that it’s not a good idea to use image maps. Specifically because of the following issues:
- The frequency in which images are disabled
- Image maps and their respective images don’t marry well and therefore pose accessibility issues for those visually impaired
- Gmail—a very popular email client—doesn’t support them consistently (they do not work when using Safari)
And with that you have the knowledge you need to discourage use of image maps.
Posted in: Tips & Resources
Comments for this entry are closed.
Browse the Blog
- Behind the Scenes (18)
- Interviews & Buzz (124)
- New Features & Updates (201)
- Observations & Answers (189)
- Tips & Resources (368)
Explore the Email Gallery
- All designs
- One column (248)
- Two column (189)
- Three column (23)
- Announcement (77)
- Newsletter (341)
- Invitation (25)
About • Our Book • Contact • API • Anti-spam Policy • Terms of Use • Privacy Policy
Proud founders of the Email Standards Project and supporters of the design community.
23 Comments
Nick Dunn
November 15, 2007 3:26am
Windows Live Mail is in there twice with different results—which one is true?
Kelly
November 15, 2007 4:21am
I don’t know about Campaign Monitor, but every other email service provider I’ve used does not allow you to track links in image maps, which can create problems for measuring your success.
DD
November 15, 2007 6:50am
Can you elaborate on image maps not working in GMail? I send out HTML emails every week that use image maps, test them in my GMail account, and have never had a problem with them not working. Do they not function under specific conditions perhaps?
Mark Wyner
November 15, 2007 9:44am
@Nick Dunn:
Very sorry, Nick et al. One of those items was supposed to be Windows Live Hotmail. With all the name changes, I became a little dizzy. The table has been updated to reflect both Windows Live Hotmail and Windows Live Mail.
@ Kelly:
Good question. As it turns out Campaign Monitor does indeed track image-map links.
@DD:
I probably should have clarified that Gmail support is inconsistent, not altogether absent (I have updated the post). Image maps in Gmail function in all browsers except Safari. And because Safari is a common web browser, the results are inconsistent and thus unstable.
It’s very odd that a browser should have an impact on the presentation of an HTML email in a webmail client (other than general browser inconsistencies), but in this case it does. So we consider it to be a Gmail flaw in communicating with Safari, because Safari does indeed support image maps.
The important thing to consider, though, is not which email clients support image maps. Rather, their use should be carefully considered because of the frequency of disabled images and also the accessibility issues for those using assistive devices.
DD
November 16, 2007 10:26am
Thanks for the additional information Mark and for the clarification on the GMail image maps issue. Very useful to know!
Kim Flournoy
December 1, 2007 7:23am
Thanks - this answered my question exactly. Guess I’ll need to slice up my images after all…
KC
December 7, 2007 7:37am
I have noticed that if an email is forwarded to someone else, a lot of email clients will drop the image map as well. Another reason to avoid image maps.
RB
December 7, 2007 8:57am
Not everyone here knows exactly what you mean when you say Image Maps. Please define.
Ryan in Noo Zeelund
December 7, 2007 9:26am
I’ve recently experienced image map inconsistencies in Gmail between Firefox and IE7 in a mate’s email.
2 maps, both worked in IE7 but one map broke in Firefox… needless to say I’ll be sending my mate a link to this page to help build an argument against maps!
Wendy
January 26, 2008 8:34am
Have you encountered any problems with Outlook Web Access? I have an email with an image map and it works everywhere except when users check their email through Outlook Web Access.
Stephen Bair
January 31, 2008 5:18am
//Windows Live Mail is in there twice with different results—which one is true?
One is for Live Mail the other is for Hotmail they’re both on the Windows Live platform, but different servers and such. Hence the difference.
Geoffrey R
February 27, 2008 11:38pm
Just wondering, are you going to revisit this test any time soon? Only I just tested one of my emails (with an imagemap) in Gmail/Safari, and it seems to work fine. They might have fixed it in the meantime.
Dave Greiner
February 29, 2008 3:10pm
Cheers Geoffrey, we’ll look at running a new test some time soon and updating our findings.
Eric Mehlenbeck
April 10, 2008 3:53am
Has anyone seen that once in mousedown state a border appears around the map in MS Entourage? Anyone figure out a workaround for this?
Cheers,
Eric
AS
April 25, 2008 1:41am
Has anyone had issues with “mailto” links not working in an image map? The link do not seem to be recognized in Hotmail, Gmail and Outlook ‘03. To my surprise they seem to work in Outlook ‘07.
David Levin
April 25, 2008 9:01am
One thing to keep in mind when using image maps in an email is to make sure to take advantage of the ALT tag to give a description of where the user will go. If the user has images turned off, many email clients will still show the alt tags so he/she can still get an idea of the purpose of the graphic and where each link should take them.
Its a bummer about safari and gmail. Has anyone tried using Safari for the PC with Gmail? I wonder if this issue still remains.
Pieter Jelle De Brue
July 3, 2008 8:51pm
I’ve had different experiences with Apple Mail, which seems to have started blocking image maps since one of its more recent releases. Something you might want to look into…
Amanda
July 4, 2008 3:45am
Would you say that most B2B email though would not be using the Safari Gmail combination?
What do you believe is the best alternative to using image maps?
Dave Greiner
July 4, 2008 8:24am
Amanda, I probably wouldn’t risk that assumption, especially as more and more corporates embrace services like Google Apps and bring it into the enterprise. There is always an alternative to image maps, the simplest is just to slice your images accordingly and then link them up separately.
I’d also recommend considering the effect of image blocking and perhaps avoid relying on images to get my message across.
analysis
August 20, 2008 2:53am
Many of us always try to impress our visitors with JavaScripts, Java Applets, Flash Players, stunning graphics and so on, but we keep forgetting that good old HTML can also impress visitors… with a little help.
First of all, you need a suitable graphic. You need to be a bit careful when choosing the right image. An image that cannot be divided in different sections is not your best choice, but an image that has clear cut-offs or lines would be better. Of course, this down not apply to navigational menus or similar, just to everyday pictures like animals, objects or people…
Jessica
October 26, 2008 5:38am
I have been toying with the idea of scrapping my splices in favor of the simpler image map, but you’ve successfully planted a seed of doubt. As others have requested, I’d be interested in seeing an updated test. I’ve noticed several BIG corporations who have recently started sending out their email newsletters in the form of image maps. I’m wondering if this is just a trend among the uninformed, or is it now more widely supported?
Phil
December 4, 2008 2:31am
I’ve just experienced a strange thing - a map which worked in all mail clients (that we tested in including google), apart from just ONE area of the map which didn’t work in Outlook 2007 and Yahoo. I redrew the map and it now ALL appears to work just fine - copied the href and alt attributes from the old map, only the map name, id and area coordinates were changed (and the order of the areas in the code). The original code validated fine and I could see no errors in it.
I wonder if anyone has had any similar experiences?
Right now I don’t have the time to go through changing just 1 thing at a time to try to find what fixed the problem, but I would sure love to know…
Nick Poulos
December 16, 2008 6:38am
I also am having a problem getting Outlook 2007 to support correctly functioning image maps. Here is a copy of the exact HTML being e-mailed, as you can see the image maps work fine when posted to a web server. The problem comes when I open the HTML e-mail in outlook, the hotspots are still there, the shapes are perfect, but the positioning of them isn’t. They are significantly higher than they should be.
http://farrellfritz.com/seasonsgreetings/index.html
I would redraw the map specifically for Outlook, but it works fine in every other mail client I’ve tested and the e-mail is being sent out to tons of people using different systems and software. So I need a more universal solution if there is one.
Any ideas?