Comment garder des petits visuels toujours visibles ?

Un article récent du blog Stylecampaign présente une technique amusante et innovante permettant de "garantir" la visualisation de petit visuel dans n'importe quelle interface, même si l'affichage des images est désactivé.
Le principe est assez ancien et nous renvoie à l'âge préhistorique du Minitel et du Pixel Art. Le pixel Art est une technique qui permet de fabriquer des images en travaillant chaque pixel individuellement.
La technique est reprise au niveau du HTML en fabriquant des tableaux dont chaque cellule représente un pixel de l'image à représenter.

L'idée consiste à insérer ce tableau HTML dans un email. Celui-ci  sera affiché même si les images sont bloquées ! 

Le résultat sur un de mes derniers emailing, pour le lancement de l'Email Academy, a été le suivant sur Yahoo. Le logo Florence Consultant apparait même en ayant les visuels bloqués !


 

Le concept est séduisant mais présente quelques inconvénients :

• Le tableau HTML généré est lourd. Pour le logo de Florence Consultant, il représente 257 Ko (!) mais cela peut être optimisé (ce que je n'ai pas fait).
• L'affichage de l'email est lent car le navigateur doit afficher plusieurs milliers de cellules.
• Sur Outlook 2007, l'interprétation spécifique des tableaux HTML donne de mauvais résultats.
• Enfin il y a une petite suspicion d'augmentation du score de présomption de spam sur cette technique (à confirmer).

L'utilité de cette technique consistera à reprendre en haut des emails quelques logos utiles (réseaux sociaux, marque  ...) et à les rendre cliquables.

Vous trouverez 3 liens de programme permettant de convertir une image en un tableau HTML. Un bon exercice de programmation de niveau BTS/DUT

• http://seofuckly.com/life/transformer-une-image-en-html-sans-images.seo
• http://neil.fraser.name/software/img2html/
• http://github.com/Schepp/IMG-2-TABLE

Pour vous permettre de tester cette technique, je vous ai préparé un formulaire vous permettant d'envoyer un email utilisant cette technique sur votre boite aux lettres favorite.

Comments

[Rédigé par : Alban]

Sur Gmail cela fonctionne mal. Le message est résumé par
> ...
>
> [Message tronqué] Afficher l'intégralité du message

Et l'on doit cliquer sur le lien "Afficher ..." afin de pouvoir lire le message (qui fonctionne bien cette fois ci) dans une nouvelle fenetre.

[Rédigé par : mathieu]

Effectivement, Gmail n'accepte pas de message de plus de 100ko (d'HTML) :
http://mail.google.com/support/bin/answer.py?hl=fr&answer=9377

Ce qui est effectivement atteint rapidement avec une image de 257ko :)

En ce qui concerne l'optimisation du code, il doit être possible de détecter les couleurs similaires afin d'effectuer des colspan plus larges. Sinon, une amélioration basée sur le rowspan doit aussi être possible.

[Rédigé par : Isabelle]

Cela ne fonctionne pas! J'ai Outlook 2003 SP3 sur Windows XP.

[Rédigé par : pignonsurmail]

le mail marche maintenant très bien sous de nombreuses interfaces ... Presque toutes . A vous de tester