L'enfer de la signature électronique - Comment inclure une image de logo et la garder nette?

J'ai trouvé quelques discussions utiles sur ce forum en ce qui concerne les problèmes posés par (l'affichage) d'images dans les signatures de courrier électronique - ici , par exemple - et j'ai cherché partout sur le Web, mais je n'ai toujours pas trouvé de bonne solution qui traite suffisamment le problème. Un de mes clients voudrait simplement que le logo de son entreprise soit inclus dans la signature de ses courriels, et les problèmes que j'ai rencontrés peuvent être résumés comme suit:

1. Je peux exporter une version pixellisée du logo de l'IA à sa taille réelle, et elle sera nette sur le bureau mais pixelisée / floue sur les écrans haute densité (par exemple "rétine") tels que l'iPhone.
2. Comme suggéré dans le fil de discussion auquel j'ai fait référence, je peux exporter le logo à 2-3 fois la taille réelle affichée pour cibler les écrans haute densité, mais le logo apparaîtra alors doux sur les écrans non haute densité lorsqu'il est réduit . C'est un problème particulier dans ce cas, car le logo contient du texte, qui a l'air terrible lorsqu'il est juxtaposé au texte réel dans le navigateur / client de messagerie.
3. J'ai considéré .svgcomme une option, mais apparemment, le support n'est pas excellent; et dans ce cas, je suppose que la grande majorité des utilisateurs qui lisent l'e-mail de ce client utiliseront Outlook, donc quelque chose qui ne s'affiche correctement que dans iOS / webkit / etc n'est pas une option viable.

Je suis désemparé à ce stade et je me demande s'il y a une autre option possible. Je ne suis pas sûr, par exemple, s'il est possible d'implémenter une image haute densité avec repli en basse résolution dans une signature d'email?

Toutes suggestions / idées ici sont très appréciées. C'est presque comique à quel point cette tâche s'est avérée difficile.

Si j'étais vous, j'abandonnerais l'idée. La gestion des embauches est le moindre de vos problèmes, car il n'y a tout simplement pas de support dans les e-mails.

Mais les problèmes commencent plus tôt. La plupart des clients de messagerie suppriment les images et ajoutent un bouton où l'utilisateur peut activer les images. Tout ce tapage pour juste un logo est trop compliqué.

Je voudrais juste écrire la signature avec du texte en clair et c'est tout.

Mais peut-être que vous ne voulez pas abandonner, cela pourrait être quelque chose pour votre

Ou utilisez cette technique:

http://blog.mailchimp.com/keep-high-density-displays-from-uglifying-your-emails/

Les solutions techniques pourraient être:

1. Hébergez l'image sur un serveur et intégrez simplement une <img>balise avec l'adresse. Le serveur pourrait utiliser les méta-informations de la requête HTTP qui récupéreront l'image et fourniront la bonne taille d'image pour le périphérique.

2. Faites de même avec les CSS sensibles à la taille d'affichage (mais je ne sais pas à quel point la prise en charge est bonne dans divers clients de messagerie) Mais essentiellement, vous pouvez ajouter les deux images au courrier et utiliser CSS pour différentes tailles d'affichage pour afficher le image de droite (et vous pouvez même spécifier une image spéciale pour l'impression ...)

Aujourd'hui, de nombreux clients de messagerie prennent en charge SVG (Scalable Vector Graphics). Pour ces clients, montrez un SVG. Il est garanti de ne pas être détruit par la mise à l'échelle, car il se lit comme un programme informatique (par exemple, dessinez un cercle, puis tracez une ligne connectée à ce cercle à 120 et 240 degrés, etc.), de sorte que le processeur rendra correctement une image non floue. à l'intérieur du logiciel de support.

Il existe une variété de techniques de secours si vous vous souciez des clients plus âgés, mais vous devrez déterminer les solutions de repli, le cas échéant, dont vous vous souciez (par exemple, les clients de messagerie qui vous préoccupent de montrer la signature). Personnellement, je choisirais une méthode qui offre une couverture presque universelle avec un effort minimal plutôt que d'essayer une couverture compliquée à 100% ou pas de couverture - il y en a une qui prend en charge tout sauf Android 2.3, ce qui est probablement rare, et n'est que quatre lignes de code.

D'un autre côté, les sélecteurs de médias CSS devraient également fonctionner. Si la résolution d'écran est inférieure à, disons 800 pixels de large, utilisez le PNG ou JPEG que vous utilisez aujourd'hui, sinon utilisez un SVG. Je suis à peu près certain que tous les appareils à «affichage rétine» prendraient en charge SVG, ou du moins la majorité le feraient.

Vraiment un vieux post, mais comme je me débattais avec le même problème pendant des heures et que je venais de le résoudre, je vais décrire comment je l'ai fait. Le problème que j'ai rencontré était que le logo de l'entreprise que j'avais bien affiché sur les moniteurs de bureau (même HD). Mais il semblait flou / flou lorsqu'il était vu sur un téléphone à écran rétine. L'image que j'ai reçue du client était exactement égale à la taille demandée. Le problème (strictement pour les développeurs :) avec les écrans rétine est qu'ils ont quatre fois plus de pixels dans une zone unitaire que les écrans standard. Vous avez donc besoin d'une image de deux fois la taille que vous souhaitez à l'écran. Par exemple, si vous souhaitez que votre logo ait une largeur et une hauteur de 124 x 48, créez une image de 248 x 28. Ce que cela fait, c'est qu'il double la résolution de l'image et quadruple le nombre de pixels. Ensuite, utilisez HTML pour forcer votre nouvelle image à s'afficher à la moitié de sa nouvelle largeur, c'est-à-dire<img src=”your_image.jpg” width=”124” />. Cela devrait résoudre toute pixellisation ou flou de l'image. À votre santé

J'ai eu le même problème! Super frustrant, mais j'ai finalement trouvé que l'utilisation d'un plan de travail 120px (hauteur) par 300px (largeur), par exemple, dans Illustrator, puis l'exportation pour les écrans au format PNG 8 avec une résolution de 96 ppi fonctionne bien pour les signatures Microsoft Outlook!