Image Map not responsive on Outlook mobile app

[tapan_1156]

We encountered an issue with the image map rendering—specifically in Outlook mobile apps. Currently, the default width for an image is 600px.
On devices with a screen width less than 600px, the expected behaviour is:

• The image scales down to fit the screen.
• The image map coordinates scale proportionally with the image.

This works as expected in Gmail mobile, where both the image and the map coordinates scale properly. However, in Outlook mobile, while the image may appear scaled using CSS, the image map coordinates do not scale, resulting in incorrect click targets. 

[BenPleysier]

Outlook mobile has been known to handle images and scaling differently from other email clients, which can lead to unexpected behavior like this.

One possible workaround is to use vector-based solutions like SVGs instead of image maps, as they tend to scale more reliably across different email clients. Another approach is to use CSS-based clickable areas rather than relying on traditional image maps. Some developers have also found success by explicitly defining the width and height of the image and ensuring that the image map coordinates are dynamically adjusted using JavaScript before sending the email.

If you're looking for more technical insights or potential fixes, you might find discussions on Stack Overflow and Microsoft Community helpful.

[Nancy OShea]

This isn't really a Dreamweaver question.

By default, client-side image maps are NOT responsive. The hotspots invariably drift out of register when the image is re-scaled. That's why nobody uses image maps anymore.

To make image maps responsive requires 3rd party scripts or other workarounds. Sadly, none of them are likely to work in Outlook.  Best solution: don't use image maps in email.

[Bilal3448616586bk]

This is a known limitation with the Outlook mobile app, it doesn’t properly support responsive image maps. Unlike Gmail, Outlook doesn’t recalculate the image map coordinates when the image is scaled with CSS, which causes the click targets to misalign. One workaround is to avoid image maps in email for Outlook or use alternative methods like sliced images with individual links. Unfortunately, full support for responsive image maps is still lacking across many email clients.  [SPAM removed by moderator.]