Comment insérer une image dans un e-mail HTML

Il existe trois façons d’inclure des images dans un e-mail HTML. Pour la plupart des gens, le lien vers une image hébergée est la plus fiable.

1. Image hébergée (recommandé)

Mettez l’image en ligne et utilisez son lien direct :

<img src="https://your-image-link.jpg" width="600" alt="Spring sale banner" style="display:block;border:0">
  • Fonctionne dans Gmail, Outlook, Apple Mail et les autres
  • Garde l’e-mail léger
  • Les images peuvent rester masquées tant que le lecteur n’a pas cliqué sur « afficher les images » : ajoutez donc toujours un texte alternatif

Obtenez un lien en quelques secondes avec Convertir image en URL.

2. CID (jointe et référencée)

L’image est jointe à l’e-mail et référencée sous la forme cid:logo123. La plupart des logiciels de messagerie de bureau l’affichent, mais certains webmails la montrent aussi comme pièce jointe, et elle alourdit l’e-mail.

3. Base64 (données intégrées)

L’image est encodée dans le HTML sous la forme data:image/png;base64,…. Plusieurs grandes messageries, dont Gmail, la bloquent ou l’ignorent : mieux vaut l’éviter pour les images importantes.

Conseils

  • Définissez les attributs width et height pour que la mise en page ne saute pas.
  • Gardez chaque image sous environ 200 Ko.
  • Utilisez le JPG pour les photos et le PNG pour les logos avec transparence.
  • Ne mettez pas de texte important uniquement dans des images.
  • Vérifiez que le lien de l’image n’expirera pas avant que les destinataires ouvrent l’e-mail.

Articles similaires