Intégrer le source d’une image dans une page HTML

Une astuce pour ajouter dans le contenu d’une page web (ou email) le code source d’une image (norme RFC 2557)

Je cherchais à faire une signature au format HTML pour Mac Mail, signature qui intègre des images et une mise en page évoluée.

Par évolué j’entends trop complexe pour être faite dans les préférences de macmail.

Le problème est que même cette technique ne fonctionne pas, et donc je suis obligé de conserver ma signature avec des images externes.

Mais bon comme cette technique est proche de celle utilisée pour les mailing avec images intégrés je la note en archive personnel ici.

Je détaillerai dans un autre article la solution de contournement pour faire une signature evolué avec images intégrés sous Mac os mail

Revenons à nos moutons pour une page html il suffit de changer le contenu de la balise src de la balise HTML IMG

<img alt="embed image content in web page" width="100" height="100" src="data:image/jpg;base64,DATA">

DATA est a remplacé par le contenu de l'image.

Et bien sur "jpg" et base64 sont à adaptés en fonction de votre image et de votre encodage.

Un example ci-dessous, cliquez le lien pour analyser le source si vous voulez

Cette technique fonctionne dans tous les navigateurs modernes digne de ce nom, donc à vérifier dans les dernières versions de IE 😉