web-dev-qa-db-fra.com

Comment intégrer avec succès des images au format HTML à afficher dans les clients de messagerie Web?

J'essaie de faire une signature en HTML en utilisant des images encodées dans des URL de données base 64. Voici un exemple:

<img src="data:image/png;base64,iVBORw0KGgoAAAAN...kJggg==">

Cela fonctionne bien avec un logiciel de messagerie comme Mail sur Mac ou Thunderbird, mais cela ne fonctionne pas avec les courriers Web tels que gmail, Outlook, roundcube, hotmail ...

Avez-vous une idée de comment le faire fonctionner? Je veux vraiment mettre ces images directement dans le code source, c'est plus pratique.

htmlformatbase64webmail
20
frénésie

réponse simple?

Tu ne peux pas. Gmail, Outlook, etc. ignoreront les images base64.

Consultez ce site pour en savoir plus à ce sujet

 enter image description here

Donc, sur la base de nos résultats, il n’est clairement pas intéressant d’utiliser des images incorporées dans vos courriels. Vous ne ferez que forcer les gens à télécharger des images codées qu’ils ne pourront pas visualiser.

23
Mark

J'utilise SVG intégré, voici pourquoi:

  • Il a l'air sympa (les graphiques vectoriels fonctionnent bien pour les logos).
  • Aucune pièce jointe (même les images envoyées en tant que pièces jointes cachées sont visibles en tant que telles dans de nombreux clients de messagerie).
  • Aucune demande http supplémentaire (fonctionne hors connexion, une fois téléchargé).
  • Pas de question "Voulez-vous charger les images ..".
  • C’est bon pour moi, si cela ne s’affiche pas dans Gmail et Outlook. C’est une sorte de dégradation gracieuse.

Mais si vous voulez vraiment afficher des images dans Gmail et Outlook, vous devrez les charger via HTTP. 

Le gars de CSS-tricks a un guide sympa sur SVG dans les emails: https://css-tricks.com/a-guide-on-svg-support-in-email/

La solution finale est la suivante:

/* Resize an element that has a width and height of zero to full size */
.showy {
  height: 100% !important;
  width: 100% !important;
}
<!-- Image: SVG -->
<img class="showy" width="0" height="0" src="my-image.svg">
<!-- Image: JPG -->
<img class="no-showy" src="my-image.jpg">

Mais personnellement, je n’aime pas ça, parce que je ne veux pas d’un client qui demande à l’utilisateur s’il veut charger des ressources supplémentaires.

0
borisdiakur