电子邮件签名地狱-如何添加徽标图像并使其保持清晰？

我在这个论坛上找到了几个有用的主题，例如有关在电子邮件签名中显示（显示）图像的问题（例如，在这里），我在网上进行了搜索，但仍然没有找到一个好的解决方案足以解决问题。我的一个客户只是希望在电子邮件签名中包含其公司的徽标，而我遇到的问题可以总结如下：

1. 我可以按实际大小从AI导出徽标的光栅化版本，它在桌面上看起来会很清晰，但在iPhone等高密度（例如“视网膜”）显示器上会显得像素化/模糊。
2. 正如我引用的线程中所建议的那样，我可以将徽标导出为实际显示大小的2-3倍，以定位高密度显示器，但是当按比例缩小徽标时，徽标将在非高密度显示器上显得柔和。在这种情况下，这是一个特殊的问题，因为徽标包含文本，当在浏览器/电子邮件客户端中与实际文本并列时，该文本看起来很糟糕。
3. 我考虑过.svg作为一种选择，但是显然支持不是很好；在这种情况下，我假设阅读此客户的电子邮件的绝大多数用户将使用Outlook，因此仅在iOS / webkit / etc中正确呈现的内容不是可行的选择。

我现在不知所措，想知道是否还有其他可能的选择。例如，我不确定是否可以在电子邮件签名中实现具有低分辨率回退的高密度图像？

非常感谢您在这里提出的任何建议/见解。事实证明，这项任务有多困难。

如果我是你，我会放弃这个主意。雇用处理是您最少的问题，因为电子邮件中根本不提供支持。

但是问题开始得较早。大多数电子邮件客户端会删除图像并添加一个按钮，用户可以在其中激活图像。对于徽标而言，所有这些麻烦事实在是太麻烦了。

我只用纯文本写sig，就这样。

但也许您不想放弃，所以这可能是您的理想之选

或使用此技术：

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

技术解决方案可以是：

1. 将图片托管在服务器上，然后在其中嵌入<img>带有地址的标签。服务器可以使用HTTP请求的元信息，以获取图像并为设备提供正确的图像大小。

2. 使用可识别显示尺寸的CSS进行相同的操作（但我不知道各种电子邮件客户端对此功能的支持有多好），但是实质上，您可以将两个图像都附加到邮件中，并使用CSS来显示各种尺寸的显示内容。正确的图像（您甚至可以指定特殊图像进行打印...）

如今，许多邮件客户端都支持SVG（可缩放矢量图形）。对于这些客户，请显示SVG。保证不会被缩放破坏，因为它的读取就像是计算机程序一样（例如绘制一个圆，然后绘制以120度和240度连接到该圆的线，等等），因此处理器将正确渲染非模糊图像内部支持软件。

如果您关心较旧的客户端，则有多种回退技术，但是您需要确定您关心的回退（如果有）（例如，您关心在哪个电子邮件客户端中显示签名）。我个人选择了一种方法，只需花费很少的精力即可提供几乎通用的覆盖范围，而不是尝试复杂的100％覆盖范围或不进行覆盖范围-有一个不错的方法可以支持除Android 2.3以外的所有功能，这可能很少见，并且只有四行码。

另一方面，CSS媒体选择器也应该也可以工作。如果屏幕分辨率小于800像素，请使用您今天使用的PNG或JPEG，否则请使用SVG。我相当确定，任何“视网膜显示”设备都将支持SVG，或者至少支持大多数。

帖子确实很旧，但是由于我一直在同一个问题上奋斗了几个小时而刚好解决了这个问题，所以我要描述一下我是如何做到的。我面临的问题是，我在台式机显示器（甚至高清显示器）上显示的公司徽标还不错。但是在视网膜显示屏手机上看时，它看起来模糊/模糊。我从客户那里得到的图像恰好等于要求的尺寸。视网膜显示器的问题（严格来说是针对开发人员：）是，它们的单位面积像素是标准屏幕的四倍。因此，您需要的是两倍于屏幕大小的图像。例如，如果您希望徽标的宽度和高度为124x48，则创建一个248x28的图像。它的作用是使图像分辨率加倍，像素数增加四倍。然后使用HTML强制您的新图像以其新宽度的一半显示，即<img src=”your_image.jpg” width=”124” />。这样做可以解决任何图像像素化或模糊。干杯

我有同样的问题！超级令人沮丧，但我最终发现，例如，在Illustrator中使用120px（高）乘300px（宽）的画板，然后将屏幕导出为分辨率为96 ppi的PNG 8，非常适合Microsoft Outlook签名！