Today I wanted to touch on something that should help to better your blog coding knowledge and hopefully distract you from making some common mistakes of using image maps for your navigation menus.
It seems to be pretty common practice, especially with Blogger users, to use image maps in their header navigation.
There are so many other proper ways to create a menu that doing things the image map way is just a bit sloppy, in my opinion… Especially when implemented wrong.
So you might be wondering, “what are image maps for then?”.
Contents
What Are Image Maps For?
Image maps are for linking particular areas of an image to a certain source.
For example, if you had a photo of a world map and wanted to create invisible bounds around Florida which then linked to a page about Florida, that would be a proper use.
With this method, you could use image map coordinates to outline the state of Florida for a precise geographical link.
1. There’s usually no point.
You are making unnecessary work for yourself. Straightforward menus simply don’t need to be created this way.
Imagine an image map like this: you are basically creating an invisible floating shape on top of an existing image.
That existing image isn’t “attached” to the link as it would be had you just sliced up your image and created an image link.
2. They are tricky and take time to implement.
If you have no experience with them you have a high chance of implementing them improperly.
I can’t count the number of times I’ve visited a blog and not been able to click on their navigation links because they’ve included a poorly coded image map that doesn’t work on every browser.
3. Search engines are clueless.
Most of the time, ALT tags are left out, leaving your search engines clueless about the content of your image map.
Basically, search engines don’t care about your image map as much as they do a standard link or image link which can affect your SEO (1).
4. They can eat up your page load time.
If you have a large base image for your image map combined with lots of coordinate data used to make the links, your page file size can get quite large.
Sure, the same thing can be said for sliced images as well so it’s up to you to decide which would load quicker for your site.
Tip: If you’re using WordPress, cut down on image sized by using an image optimization plugin.
Alternatively, you can upload jpeg images instead of png images, saving space on your web host.
5. ALT tags aren’t understood.
One massive consideration for bloggers is to build an accessible website.
This allows people with disabilities to read, navigate, and understand your site.
If you implement image maps, people with disabilities could have a hard time navigating your site.
Screen readers sometimes only read ALT tags and the first link, not all of them.
6. They are not ideal for mobile devices.
Your iPhone might shift the coordinates rendering a menu unusable on the device.
In 2021, as mobile SEO becomes increasingly important, this is a definite no-no.
When you should use image maps
Of course there are instances when you might need to use an image map.
The mention about the world map would be a perfect example.
Image maps can be a good tool for things like that, where you need to link a specific part of an image (especially if it has awkward edges!).
If it makes sense for you to use one, then don’t be afraid to use one but do make sure you consider the above.
If you do use an image map, make sure you have alternate text or graphic links somewhere on your page as well to link to other pages of your site.
Also, make sure you implement them properly and test on all browsers and devices for functionality.
Image map alternatives
Your navigation is not something that should be taken lightly when creating your blog structure.
It is probably one of the most important aspects of your site, so care should be taken when you build it.
You want your blog to be easy to use, to work on all browsers, and to benefit your SEO.
Text links and list items are always an option and can be styled with a little CSS.
Otherwise, slicing up your base image (that you would have used for your image map) and creating individual image links for each link item would be your next best bet.
A while back, I created a tutorial about how to create a header image with navigation links in Blogger.
I recommend reading it to get the basic idea of how to cut up your image and put it back together with links included.
Happy creating!
