电子邮件签名地狱——如何包含徽标图像并使其保持清晰？

平面设计 css 画面质量 html 视网膜
2022-01-21 08:49:01

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

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

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

非常感谢这里的任何建议/见解。这项任务的艰巨程度近乎滑稽。

4个回答

如果我是你，我会放弃这个想法。雇用处理是您遇到的最少的问题，因为电子邮件中根本没有支持。

但问题开始得更早。大多数电子邮件客户端会删除图像并添加一个按钮，用户可以在其中激活图像。只是为了一个标志而大惊小怪太麻烦了。

我只会用纯文本写签名，就是这样。

但也许你不想放弃，所以这可能适合你

或者使用这种技术：

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” />. 这样做应该可以解决任何图像像素化或模糊问题。干杯

其它你可能感兴趣的问题
上一篇用 GIMP 制作的 PNG 不透明 下一篇如何使用 Adob​​e Illustrator 以像素为单位指定画板的大小？