Do image maps work in HTML email?
We've revisited these results in a newer blog post on image maps in email clients.
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.
15th November
Windows Live Mail is in there twice with different results—which one is true?
15th November
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.
15th November
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?
16th November
Thanks for the additional information Mark and for the clarification on the GMail image maps issue. Very useful to know!
1st December
Thanks - this answered my question exactly. Guess I’ll need to slice up my images after all…
7th December
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.
7th December
Not everyone here knows exactly what you mean when you say Image Maps. Please define.
7th December
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!
26th January
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.
31st January
//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.
28th February
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.
29th February
Cheers Geoffrey, we’ll look at running a new test some time soon and updating our findings.
10th April
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
25th April
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.
25th April
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.
4th July
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…
4th July
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?
4th July
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.
20th August
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…
26th October
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?
4th December
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…
16th December
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?