确保您的图标和徽标具有响应性,并在所有平台上保持其图像质量不受影响,这是非常具有挑战性的。但是,使用以下技术,您应该能够轻松做到这一点。
1.使用双倍尺寸的 PNG
这是在电子邮件中显示图标和徽标的最标准方式。这背后有三个根本原因:
PNG 与所有电子邮件客户端兼容。
不需要太多额外的代码来嵌入它们。
PNG 是无损的;您可以压缩图像数据而不影响质量。
您可能会问,使用双倍尺寸 PNG 背后的逻辑是什么?好吧,贝宁 手机号码列表 这只是为了确保图标和徽标的图像质量在所有视网膜质量的显示屏上保持清晰。因此,开发人员所做的就是使用双倍尺寸的 PNG,然后在电子邮件代码中强制使用特定尺寸。
2.使用 SVG(可缩放矢量图形)文件格式
SVG 图形由点和矢量组成,这意味着它们可以根据设备要求缩放而不会牺牲质量。SVG 不包含任何图像数据。它们仅包含生成形状所需的路径坐标。因此,它们的文件大小相对 JPEG 和 PNG 要小。此外,人们也不必为尺寸而烦恼,因为它可以在代码中轻松管理。通常,网页设计师会使用 SVG 来制作网站上的图标和徽标。然而,最近,许多电子邮件设计师也采用了这种做法。
尽管如此,并非所有电子邮件客户端都一致支持 SVG。虽然 Apple Mail、iOS Mail 和 Samsung Mail 9 提供了良好的支持,但其他客户端(例如 Outlook(Mac Outlook 2016 除外)和 Gmail)不提供跨平台支持。因此,对于这些客户端,开发人员不得不求助于使用 PNG 形式的后备方案。
- 使用 Sourceset
Sourceset 技术在网络人士中非常流行,指的是根据不同的分辨率显示特定图像的不同版本的做法。以下是 Sourceset 在网页设计中的工作原理:
开发人员向浏览器提供某个图像的多个不同宽度的版本。
然后,浏览器仅下载它认为最适合当前启动的屏幕宽度的版本。
正如您已经知道的那样,sourceset 是一种确保您的图标和徽标保持响应的出色技术。通过使用 sourceset,您不再需要使用背景图像技术根据用户的屏幕尺寸缩放图像。
但是,与 SVG 的情况非常相似,电子邮件中的源集仅受 Apple Mail 和 iOS Mail 的支持。要使其在其余客户端上工作,您必须使用带有 srcset 属性的图像标签,并将整个内容包裹在图片标签中。
总结
图标和徽标为您的电子邮件增添了巨大的价值。为了提供卓越的用户体验,确保其质量在所有平台上都保持不变至关重要。我们希望上述做法能帮助您朝这个方向迈出第一步。