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>
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>
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 Responsive – Google 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.