top of page
  • Writer's pictureBrent D. Payne

Has one or more image-map <map> tags

The URL being analyzed includes at least one instance of an image-map tag.

Why is this important?

Image maps are dependent on static coordinate definitions for individual links, posing issues when viewed on mobile devices. Upon resizing the image, such as when changing orientation from portrait to landscape, the linked hotspots no longer align with the intended regions of the image, turning navigation into a frustrating process of trial and error. This is why using image maps can be considered obsolete in today's mobile-centric web environment.

What does the Optimization check?

The Optimization is triggered for any page within the website that features image-map tags.

Examples that trigger this Optimization:

The following example would cause the Optimization to trigger, indicating the presence of an image-map:

<img src="galaxy.gif" width="145" height="126" alt="Galaxy" usemap="#galaxymap"><map name="galaxymap"><area shape="rect" coords="0,0,82,126" href="sunshine.htm" alt="Sunshine"><area shape="circle" coords="90,58,3" href="mercury.htm" alt="Mercury"><area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus"></map>

How do you resolve this issue?

To modernize the user interface, consider replacing image maps with technologies such as inline SVG graphics or JavaScript frameworks that facilitate responsive image hotspots (see this example library).



bottom of page