Une image cliquable est une image redirigeant vers différentes pages selon la zone de l’image cliquée. Désormais peu utilisées sur le web, les images cliquables sont cependant très bien supportées par la plupart des clients emails. Quelles possibilités offre donc cette technique et quelles sont ses limites ?

Qu’est-ce qu’une image map ou image cliquable ?

Une image map est une image divisée en plusieurs zones cliquables : chaque zone (dite « mappée ») redirige vers une page différente, définie grâce à un lien hypergraphique.

Quelques exemples d’utilisations d’images cliquables :

• Créer une carte du monde avec les pays délimités et cliquables,
• Détailler une photo de mode où chaque article est cliquable et renvoie sur une fiche produit,
• Rendre un plan d’architecte interactif,
• Afficher les noms de personnes se trouvant sur une photo lorsqu’on survole leur visage avec la souris (grâce à des attributs <title>),
• Etc.

Comment cela fonctionne-t-il ?

Les zones mappées sont considérées comme des ancres. Elles sont définies selon une forme (rectangle, cercle ou polygone) suivant des coordonnées fixes :

Ici, nous avons défini une zone sur l’image en forme de cercle (shape= »circle ») de coordonnées 310,176,156 (coords= »310,176,156″) qui renvoie vers la page d’accueil du site de Majelice. Concrètement, cela signifie que le cercle de rayon 156px et débutant à partir du point situé 310px à droite et 176px sous le coin supérieur gauche de l’image renvoie sur une autre url que celle de l’image globale. Ce qui nous donne :

Cliquez sur la loupe pour découvrir le site internet de l’agence Majelice ou sur le plan pour voir où elle se situe

Les images mappées dans l’email, à faire ou à éviter ?

Les + :

• Généralement, les emails s’affichent sur une largeur de 600px sur les écrans d’ordinateurs et les images mappées sont créées pour ce format : vous pourrez donc obtenir une image mappée tout à fait correcte sur tous les postes d’ordinateurs, avec vos liens hypergraphiques renvoyant chacun sur une page web qui lui est propre et/ou les titles s’affichant pour légender votre image.
• Chaque client webmail interprète à sa façon le contenu de l’email et l’affiche selon ses propres règles, ce qui entraîne bien souvent des complications lors de la création des emails… Excepté pour les images mappées ! Tous les principaux webmails supportent les images mappées et les affichent sans problème : iOs, Apple Mail, Yahoo! Mail, Gmail, Outlook.com, AOL, Samsung Android et même… Microsoft Outlook !

Les – :

• Les coordonnées des images mappées sont fixes : si la taille de l’image est modifiée, la carte des liens ne se redimensionnera pas mais restera fidèle aux coordonnées définies initialement. Vous l’aurez donc compris, les images mappées sont incompatibles avec un design responsive puisqu’elles ne se redimensionnent pas selon la taille du support !
• Seule l’image peut posséder un attribut <alt> ; il est impossible d’en définir pour chacun des liens hypergraphiques. Un gros point noir pour l’accessibilité de l’email, puisque les légendes définies en <title> ou les url ne seront pas prises en compte par les lecteurs d’écran : les malvoyants ne percevront l’image mappée que comme une simple image et ne pourront pas accéder aux différents liens et légendes.
• Gmail et Outlook font apparaître le pointeur de la souris même sur des zones de l’image qui ne sont pas définies comme cliquables.
• Certains routeurs ne trackent pas les liens hypergraphiques : les clics sur ces liens ne sont pas pris en compte dans les statistiques de campagne.

En conclusion

Avec plus de 81% d’emails ouverts sur supports mobiles*, le responsive design est désormais la norme. Impossible sachant cela d’utiliser une image mappée qui ne s’adapte pas à la taille de l’écran du destinataire !

Si toutefois vous souhaitez rendre votre email plus interactif avec des liens hypergraphiques, vous pouvez définir la taille de votre image de manière à ce qu’elle n’ait pas à être redimensionnée sur mobile : une largeur de 320px conviendra à tous les mobiles.

*Chiffre issu de l’enquête EMA – Email Marketing Attitude BtoC 2017 du SNCD