Pros and Cons of Image Maps

Why Image Maps Aren't So Common These Days

It used to be that every site out there had an image map on nearly every page. Many sites used image maps for their navigation. And a lot of sites liked to come up with a visual theme for their site that would be displayed through an image map. Thankfully, that has fallen out of favor for most sites!

But image maps are a tool, and just like we shouldn't use a hammer for every situation (at least that's what my dad keeps telling me...), image maps work great in one situation and not so great in the rest.

When to Use Image Maps

Use image maps when the information you need to convey is better presented visually than in text. The best use of an image map is for, well, a map. Maps convey a large amount of information in a small space. And image maps make them more interactive.

To see a great example of how to use an image map on a map, check out About.com's Guide to Camping: Camping Reviews - State Index. David took a map of the United States and mapped it with an image map so that you just click on the state you want to camp in and you can see a list of all the reviews for that state. Note that David doesn't rely only on the image map. He has all the states listed as text links in alphabetical order underneath the image map.

When to NEVER Use Image Maps

No matter how tempting it is, never use image maps for navigation. Navigation should be the easiest and most self-explanatory portion of your site.

Image maps are hard for customers to use. They don't act like standard links and can be difficult to figure out. You want your navigation to be simple and painless, so much that your customers don't even notice it.

Why are Image Maps Questionable?

  • Image maps slow page load times. Image maps require that you have an image, often fairly large, and a <map> tag with <area> tags inside it. Depending upon how complicated your coordinates were, the HTML required for an image map could be much larger than simply cutting the image up into slices and linking each slice with an <a> tag.

    If you must use an image map, make sure that your image is optimized to be really small so that it doesn't take forever to download.
  • Image maps are not very accessible. When a screen reader or search engine robot comes to the page, they see a giant image. It can be very difficult for them to navigate through the links, and when they do, they aren't sure what they're going to be taken to.

    If you must use an image map, make sure to include alt text in your maps and to include the links within the map somewhere else on the page as plain text.
  • Image maps can be confusing even when you can see them. Many Web designers like to use image maps to hide things on their sites. One site I visited had as their front page a large picture of a face, and nothing else. It took me several minutes to realize that the eyes were clickable and would take me into the main site. If it hadn't been a friend's site, I wouldn't have bothered to search.

    If you must use an image map, don't play games with it. Unless your site is a mystery lover's site, most of your readers will be turned off by having to hunt for links. Easter eggs are fun, but hiding the main navigation is just annoying.
  • Image maps can be a pain to build. These days there are lots of image map editors and many Web design programs have them built in. But even with a program it can take a lot longer to build a map than to simply highlight an image and click "link" or add <a href=""></a> around it.

    If you must use an image map, I would recommend using an image map editor or a Web editor like Dreamweaver or FrontPage rather than building your image map from scratch.
  • Image maps aren't in style. The reality is that technology goes through trends in popularity, and image maps are on the back side of the popularity curve right now. Who knows, they might come back into fashion.

The bottom line is that if you want or need to use an image map, don't let my comments stop you. Image maps are still a part of the standard, and they have valid uses. Just try to make them as accessible and easy to use as you can. (Or not, it's your Web page...).

Thanks to Keith for the question that sparked this article!