What are image maps and why you should avoid them

I’ve been asked more and more recently why image maps should be avoided since mentioning it a couple of times in tutorials. Today I’m going to explain what an image map is and why you shouldn’t use them if you can help it. I’ve noticed an increase in bloggers using and promoting the use of image maps especially for things like navigation, headers and social media icons which is a big no no! There’s a much better way to implement these and I’ll explain better alternatives below.

What are image maps

Image maps are list of coordinates on one image, each coordinate links to specific URL. They are used to add multiple links to an image and are often used for navigation purposes. Image maps should be avoided unless there is a specific reason and no alternative, in fact the best thing to use image maps for is actually a geographic map where theres a lot of information and complicated shapes.

Image Code with Link

Here is an example of an image that links to a URL.

<a href="LINK"><img src="DIRECT IMGE URL" alt="DESCRIPTION"></a>

Image Maps

Here is an example of an image map containing multiple coordinates that links to different URLs.

<img id="Image-Maps-Com-image-maps-example" src="http://i43.tinypic.com/2lsfadt.jpg" border="0" width="800" height="121" usemap="#image-maps-example" />
<map name="image-maps-example">
<area  shape="rect" coords="170,58,253,113" alt="" title="rect_0" target="_self" href="https://xomisse.com"     >
<area  shape="rect" coords="286,58,382,112" alt="" title="rect_1" target="_self" href="https://xomisse.com"     >
<area  shape="rect" coords="418,60,507,112" alt="" title="rect_2" target="_self" href="https://xomisse.com"     >
<area  shape="rect" coords="540,58,632,112" alt="" title="rect_3" target="_self" href="https://xomisse.com"     >
<area shape="rect" coords="798,119,800,121" alt="Image Map" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_0" >
</map>

Image Map

Why you should avoid image maps

  • Not Good For SEO – Search Engines have no idea what the image map is and what it contains. All they see is a huge image. If you use image maps for your navigation, it probably means that your site isn’t being crawled properly and you’re missing out on a lot of great traffic.
  • Not ResponsiveGoogle have told us that responsive design will be an important factor for SEO, ranking and reputation. Image Maps work using co-ordinates which may be altered depending on device and screen size, therefore making it unusable.
  • Bad for Accessibility & Usability – Screen readers and other accessibility tools used by those with a disability don’t understand image maps either due to lack of alt tags and correct positioning meaning that some users mightn’t even be able to use your site.
  • Slow Loading Times – They typically take longer than normal images to load because not only is it usually a large image but there’s an awful lot of coding involved – as you saw above. This not only affects your readers but also your SEO.

What to use instead – tutorials

Instead of using Image Maps, it’s better to slice or cut up your design and use HTML and CSS to position and align the images. I’ll be doing a video on this in the future but basically just create separate images and add them to your design in a similar way to the tutorial for navigation below.

Navigation is so important when it comes to blog/web design so it’s definitely not something you want to use an image map for. You want search engines to crawl your site easily in order to index it. Check out my navigation tutorials where I show you many ways to create a navigation bar including this one using images which is a great alternative to using image maps. You can also check out this tutorial showing you how to add social media icons to your blog without using image maps.

Related Posts

More information about SEO, Search Engines and how to gain more traffic.

Buy me a coffeeBuy me a coffee

6 Comments

  1. Gah! Finally a post that may help! I used Image-maps for my page links and it just doesn’t work! I looked at some of the tutorials but it looks really complex and I have no clue about “html” or whatever so I am left with no direct links to my pages and my website looking really unprofessional. I hope you upload the video soon!
    – Annie (Doughnutandco.blogspot.co.uk)

  2. Hi Mark from image-maps.com.

    So yeah I love image maps!!! YAY! So naturally I have to defend them 🙂 Hope you don’t mind.

    1st
    Not Good For SEO
    I disagree! I have tested a blank image map pure white image on my white background. Size of the image was 100×100 and divided into 3 maps, Not like the color, size and invisibility really matters, I just did not want anyone else to click it.
    Within 32 minutes of posting Google, Bing and Yahoo all hit the links and indexed them.

    2nd
    Not Responsive
    This is true but my tool fixed this problem by resizing the image maps on the fly 🙂 YAY for me!
    onload and onresize triggers the resizing of the image maps.

    3rd
    Bad for Accessibility & Usability
    Image maps support the title and alt tags! Which is what “Screen readers and other accessibility tools” use 🙂

    4th
    Slow Loading Times
    Well yes and no… I get tons of image maps for social icons that are minimal in size…. It only takes the time to load the image 🙂

    Not trying to bash your post. Just speaking my studies and opinions.

    Thanks

    1. Hello Mark. There are times when I do recommend using image maps, especially for those who find HTML really difficult and your site is always the one I send people to. I actually have a tutorial coming up about how to use your site. I’m glad you were able to respond to a few things about your site, my post wasn’t meant as an attack on your service, simply sharing what I have learned in accessibility class. The one thing I have noticed is that a lot of image map users who I deal with skip the title and alt tags and use image maps for a combination of their header, navigation and social media icons which means they are very large in size.

  3. I don’t agree at all. You should update this article from 2014. Just having 4 social media icons “follow me on these channels” is opening 4 http connections to download these images. That a bigger loading time than an image map with the 4 icons. Google is perfectly capable to “see” a website and notice what is navigation and what is content.
    Please make at least a note that times have changed (especially with slow mobile connection) and referer to other sources.

Sorry, comments are closed!