Envoi de mail HTML : images intégrées ou CSS sur internet ?

Bonjour,
Je ne sais pas poser où poser la question, alors je viens faire un tour au bar, pour discuter.

Presque tout est dans le titre.

Lors d'un envoi de mail en HTML, avec des images et autres effets de style, est-il préférable, à votre avis, d'intégrer le maximum de choses dans le mail ou de faire référence à une feuille de style localisée sur internet ?

Nonobstant le fait que la localisation sur internet interdit une lecture hors connexion.

D'avance, merci pour vos suggestions et remarques.

Pas de feuille de styles distante, non.

Pour l'utilisation de CSS pour les e-mails, la FAQ en parle et pointe vers diverses lectures et ressources qui vont bien.

Good luck !

(todo : tuto à ce sujet)

En général (et malheureusement) les styles doivent être inline dans le code pour ne pas être supprimés par la majorité des webmails.

Bonsoir,
@Florent V : pourquoi pas de feuille de style distante ? Les liens récents, annexés à la FAQ m'inclinent même à penser le contraire.

@dew : après quelques essais, j'ai intégré tous les effets de style dans la balise style.
Juste un souci pour gèrer cela

<div style="margin-top:10px;
	width:717px;
	background-image:url(http://xsoftware.fr/img/css/cadrehaut.png);
	background-repeat:no-repeat;
	margin-left:auto;
	margin-right:auto;
	text-align:justify;">

Mais bon, ce n'est pas très important, au pire je m'en passerai.

En fait je dis souci car j'intègre mes images en base64 comme cela

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

mais je ne sais pas comment le faire pour le background-image:url

Le fait d'intégrer les images m'ouvre le webmail de gmail qui ne refuse d'afficher que les images externes.
Idem pour le webmail orange
Idem pour thunderbird
Je serai preneur de gentils valideurs qui auraient l'amabilité de me donner leur courriel s'il ont d'autres courrielleurs ou d'autres webmails (entreprendre_at_christophe-charron_dot_org)
hotmail refuse de charger nativement les images, qu'elles soient en ligne ou intégrées.
En fonction du nombre de courrielleurs acceptant les images intégrées, je choisirai telle ou telle option.

Pour l'instant, l'avantage est au images intégrées, même si c'est un peu plus lourd (le mail fait 400 ko).

Merci encore pour votre aide.

christophe charron a écrit :
@Florent V : pourquoi pas de feuille de style distante ? Les liens récents, annexés à la FAQ m'inclinent même à penser le contraire.

La plupart des clients mail bloquent les scripts et images distantes. On peut parier qu'ils bloquent aussi les feuilles de styles distantes, dans le cas où ils les prendraient en compte. On peut éventuellement voir ce qu'en dit email-standards.org, je ne sais pas s'ils testent ce point.

christophe charron a écrit :
En fait je dis souci car j'intègre mes images en base64 (...) mais je ne sais pas comment le faire pour le background-image:url

En image de fond ça marche ainsi:

background-image:url('data:image/png;base64,...');

Ceci dit utiliser les DATA URI à l'heure actuelle c'est faire preuve d'un optimisme remarquable. Pour rappel, ce mécanisme n'est pas supporté par Internet Explorer 6 et 7 (il le sera par IE8). Je doute que tous les clients mail le supportent, notamment Outlook 2003 et (pire encore) Outlook 2007.

En passant:
- 400 Ko, c'est trop lourd, il faut optimiser ou revoir les contenus à la baisse (de toute façon vu le temps accordé par une personne à un e-mail, mieux vaut aller à l'essentiel).
- 717px, c'est tout de même large pour un client mail.
- Le centrage horizontal n'est pas forcément pertinent. Ça va à l'encontre d'une convention venant de l'e-mail «classique»: le contenu d'un e-mail est généralement aligné à gauche.

Florent V. a écrit :

La plupart des clients mail bloquent les scripts et images distantes. On peut parier qu'ils bloquent aussi les feuilles de styles distantes, dans le cas où ils les prendraient en compte. On peut éventuellement voir ce qu'en dit email-standards.org, je ne sais pas s'ils testent ce point.

sur les essais que j'ai fait, non, je n'ai pas été bloqué.

Florent V. a écrit :

En image de fond ça marche ainsi:

background-image:url('data:image/png;base64,...');

Ceci dit utiliser les DATA URI à l'heure actuelle c'est faire preuve d'un optimisme remarquable. Pour rappel, ce mécanisme n'est pas supporté par Internet Explorer 6 et 7 (il le sera par IE8). Je doute que tous les clients mail le supportent, notamment Outlook 2003 et (pire encore) Outlook 2007.

Je n'ai pas encore essayé les outlook, mais je visionne bien dans l'orange webmail, dans IE6 et IE7 les mails avec les images intégrées.

Florent V. a écrit :

En passant:
- 400 Ko, c'est trop lourd, il faut optimiser ou revoir les contenus à la baisse (de toute façon vu le temps accordé par une personne à un e-mail, mieux vaut aller à l'essentiel).
- 717px, c'est tout de même large pour un client mail.
- Le centrage horizontal n'est pas forcément pertinent. Ça va à l'encontre d'une convention venant de l'e-mail «classique»: le contenu d'un e-mail est généralement aligné à gauche.

D'acc pour les remarques ... pour l'instant je suis sur la "faisabilité technique" mais je prends bonne note.

Merci pour tous ces précieux conseils et ces judicieuses remarques.
Modifié par Florent V. (02 Jan 2009 - 23:54)

Pour résumer :

*styles inline
*images sur un serveur en absolu (évidemment) avec attribut alt vide ou pas (si images bloquées et significatives on a le contenu)
*Partir non pas du body mais d'un div wrapper pour la couleur de fond, la langue du document, etc
*Utiliser la sémantique (hx, ul, ol, p, etc), en plus d'être plus accessible au cas ou rien ne passe on retrouve les styles par défaut
*etc

P.S. : si gmail n'affiche pas les images, c'est uniquement via le web, le mail reste intact et on peut demander de les afficher
Modifié par Patidou (15 Dec 2008 - 07:03)

Pour les images hébergées sur un serveur plutôt qu'en attachement du mail, je plussoie fortement. D'autant que, si on reste logique, quand ton destinataire reçoit le mail, il a sa connexion à ce moment. Si ton mail l'intéresse, il acceptera de pomper les images, le rangera peut-être dans un sous-dossier et ne sera pas dérangé par l'absence d'image lors d'une réouverture offline car, en principe, c'est le contenu qui est intéressant, pas les images.
Si ton mail ne l'intéressera pas, et il sera dans le trash et puis c'est tout


Au niveau des bonnes pratiques, si l'anglais ne te donne pas des boutons, je te conseille l'excellent site de Campaign Monitor avec leurs nombreuses explications et même des templates à choper (pas pour les reprendre tels quels, mais pour observer la source): http://www.campaignmonitor.com/design-guidelines/

Mais, surtout, la page incontournable de ce site est, pour moi, celle qui présente toutes les propriétés CSS et leur interprétation ou non par les clients mails courants: http://www.campaignmonitor.com/css/
Une vraie bible à relire après chaque conception de mail pour voir si tu n'as pas mis de code qui te posera problème. Ceci dépend bien sûr de ta cible, puisque les professionnels auront plus souvent des clients en dur (Outlook, Notes voire Thunderbird) quand les particuliers auront plutôt des webmail (d'où deux tableaux complets dans le lien ci-dessus).


Donc, puisque tu en parlais plus haut: oublie le background-image et préfère une insertion classique des images via

<img src="" alt="" />

car ni Outlook 2007 ni Notes ne l'interprètent pour les clients mail, ni Gmail ou Live mail du côté des webmail, ce qui évidemment dommage.

Ah... les mails html...

Mon taff de "développeur web" à petit à petit sournoisement migré vers "intégrateur d'e-mailing" dans mon précédent boulot. J'ai fait pas mal de tests sur différents webmails et logiciels à l'époque et c'est vrai qu'ils ont tous leurs petites particularités. Tous vont plus ou moins te prendre ton code html pour le recracher en enlevant ou en rajoutant des balises, supprimant des classes, rajoutant leurs styles par défaut et j'en passe.

Pour revenir sur le cas précis des feuilles de style distante, elles sont bloquées par les webmails au même titre que les images. Outlook a une petite subtilité à ce niveau là ("not a bug, a feature") dans le sens où il ne va bel et bien pas te charger tes css distants, mais il ne va pas les charger non plus même quand tu actives le téléchargement des éléments distants... A moins que tu ai au moins une <img> dans ton markup (ce qui m'a forcé à ressortir le spacer.gif de 1px de coté du temps jadis.)

Non, décidemment, rien que repenser à l'intégration d'e-mailing ça me donne des boutons. Si je peux te donner un unique conseil et si tu souhaites garder ta santé mentale : laisse tomber. Perso moi j'ai démissionné
Modifié par Tymlis (03 Jan 2009 - 08:45)