Estou desenvolvendo um aplicativo Web interno na intranet da empresa usando PHP. Uma seção do aplicativo exibe duas imagens de alta resolução para o usuário. Essas imagens estão na região de 5000x3500 pixels. Cada imagem tem um mapa de imagens (usando áreas retangulares) e tudo funciona bem nos navegadores de desktop que eu tente

O problema que estou descobrindo é que, quando os usuários acessam o site por meio de dispositivos iOS, as imagens são redimensionadas pelo safari no dispositivo, no entanto, as coordenadas do mapa de imagens não estão sendo ajustadas para corresponde

Um exemplo do HTML sendo gerado pelo meu PHP é o seguinte:

<img src="largeimage.jpg" width="5000" height="3500" usemap="#examplemap">
<map name="examplemap">
  <area shape="rect" coords="0,0,5000,500" href="blah1"/>
  <area shape="rect" coords="0,500,2500,3500" href="blah2"/>
  <area shape="rect" coords="2500,500,5000,3500" href="blah3"/>
</map>

(As coordenadas reais do retângulo no mapa da imagem são calculadas como uma porcentagem do tamanho da imagem

Sei que o safari está redimensionando a imagem devido a restrições de memória no dispositivo, mas preciso encontrar uma maneira de dimensionar o mapa da imagem para se adequar ou substituir o mapa da imagem por outra que faça o mesmo trabalho. Alguém pode oferecer algum conselho?