Image Map Support in HTML Email

An image map is an image that contains areas that map to distinct links. Image maps are largely considered antiquated on the web since there are more suitable techniques available and it comes with a host of downsides. However, support for image maps is surprisingly good among the major email clients.

An image map is an image that is linked to a map of areas within the image specified by coordinates and a link. Clicking within the areas within the image will take the user to the associated link.

The code for the above image map (example on codepen) that contains a clickable rectangle and triangle looks like this:

                            

                                <img src="https://www.emailonacid.com/images/blog_images/Emailology/2017/2017_imagemap/shapes.jpg" usemap="#image-map" width="600">
<map name="image-map">
 <area target="new" alt="Square" title="Rectangle" href="https://www.google.com/#q=rectangle" coords="30,29,306,153" shape="rect">
 <area target="new" alt="Triangle" title="Triangle" href="https://www.google.com/#q=triangle" coords="323,267,572,26,571,267" shape="poly">
</map>
                            
                        

There are three types of shapes for image maps: rect (rectangle), circle and poly (polygon).

You’d normally need a tool to generate the coordinates such as Dreamweaver or an online service like this.

From my tests, all the major email clients support image maps. Yes, even Microsoft Outlook! Other clients that I’ve tested that works with image maps include, iOS, Apple Mail, Yahoo! Mail, Gmail, Outlook.com, AOL and the Samsung Android client.

With all the utility of image maps, there are some distinct drawbacks that you should consider should you decide to use them.

When an image is blocked by the client, all you see is a single alt text of the image and not the individual links.

Since the coordinates are hard coded, you cannot have images that scale to the width of its container as this will cause the coordinates to drift. Images must have fixed width and height dimensions.

In Gmail and Outlook.com, the link pointer (hand) will appear even when the user hovers the cursor over areas that are not defined by the image map. Clicking on these areas will highlight the image in its own window and can potentially confuse users which areas contain actual links.

If the image is autoscaled by the client, the coordinates of the image map will be off. A simple fix is to wrap the image within a table and this will fix this problem.

Some email service providers won’t track clicks if the link is embedded in an image map.

And finally there seems to be a bug in Apple Mail that if the image map is the last piece of content in an email, it loses its links. Granted this situation is highly unlikely, but may come in handy during testing.

Contrary to popular belief, image map support in email clients is pretty robust. If you decide to incorporate image maps in your campaigns however, you should definitely consider its many shortcomings before you embark.

At Email on Acid, testing is at the core of our mission. After you’ve finished setting up the perfect design for your campaign, ensure the email looks fantastic in EVERY inbox. Because every client renders your HTML differently, it’s critical to test your email across the most popular clients and devices.

Try us free for 7 days and get unlimited access to email, image and spam testing to ensure you get delivered and look good doing it!

TEST TODAY!