An picture map is a picture that comprises areas that map to distinct hyperlinks. Picture maps are largely thought-about antiquated on the net since there are extra appropriate strategies out there and it comes with a number of downsides. Nonetheless, assist for picture maps is surprisingly good among the many main electronic mail shoppers.
What’s an Picture Map?
A picture map is a picture that’s linked to a map of areas inside the picture specified by coordinates and a hyperlink. Clicking inside the areas inside the picture will take the consumer to the related hyperlink.
The code for the above picture map (instance on codepen) that comprises a clickable rectangle and triangle seems like this:
<img src="https://www.emailonacid.com/pictures/blog_images/Emailology/2017/2017_imagemap/shapes.jpg" usemap="#image-map" width="600">
<map identify="image-map">
<space goal="new" alt="Sq." title="Rectangle" href="https://www.google.com/#q=rectangle" coords="30,29,306,153" form="rect">
<space goal="new" alt="Triangle" title="Triangle" href="https://www.google.com/#q=triangle" coords="323,267,572,26,571,267" form="poly">
</map>There are three varieties of shapes for picture maps: rect (rectangle), circle and poly (polygon).
Help for Picture Maps in E-mail Shoppers
From my checks, all the foremost electronic mail shoppers assist picture maps. Sure, even Microsoft Outlook! Different shoppers that I’ve examined that works with picture maps embrace, iOS, Apple Mail, Yahoo! Mail, Gmail, Outlook.com, AOL and the Samsung Android shopper.
Downsides of Picture Maps
With all of the utility of picture maps, there are some distinct drawbacks that you need to think about must you determine to make use of them.
Lack of alt textual content assist.
When a picture is blocked by the shopper, all you see is a single alt textual content of the picture and never the person hyperlinks.
Doesn’t work with responsive pictures.
For the reason that coordinates are laborious coded, you can’t have pictures that scale to the width of its container as it will trigger the coordinates to float. Pictures will need to have fastened width and peak dimensions.
Potential confusion in Gmail and Outlook.com.
In Gmail and Outlook.com, the hyperlink pointer (hand) will seem even when the consumer hovers the cursor over areas that aren’t outlined by the picture map. Clicking on these areas will spotlight the picture in its personal window and might doubtlessly confuse customers which areas comprise precise hyperlinks.
Breaks when iOS and Gmail Android App autoscales pictures
If the picture is autoscaled by the shopper, the coordinates of the picture map will likely be off. A easy repair is to wrap the picture inside a desk and it will repair this downside.
Hyperlink monitoring might not work in some ESPs
Some electronic mail service suppliers gained’t observe clicks if the hyperlink is embedded in a picture map.
And at last there appears to be a bug in Apple Mail that if the picture map is the final piece of content material in an electronic mail, it loses its hyperlinks. Granted this example is very unlikely, however might come in useful throughout testing.
Take Away
Opposite to well-liked perception, picture map assist in electronic mail shoppers is fairly sturdy. In case you determine to include picture maps in your campaigns nevertheless, you need to positively think about its many shortcomings earlier than you embark.
Don’t Guess, Check!
At E-mail on Acid, testing is on the core of our mission. After you’ve completed establishing the proper design in your marketing campaign, guarantee the e-mail seems implausible in EVERY inbox. As a result of each shopper renders your HTML otherwise, it’s crucial to check your electronic mail throughout the most well-liked shoppers and units.
Attempt us free for 7 days and get limitless entry to electronic mail, picture and spam testing to make sure you get delivered and look good doing it!
