邮件客户端中的图像处理

许多客户端默认会阻止图像，直到用户点击“显示图像”。Outlook、Gmail（针对未知发件人）以及使用按流量计费连接的大多数移动客户端会改为显示占位符。请按照图像可能不会出现的前提进行设计。

绝不要将关键文案（标题、CTA 标签、价格）制作到图像中。请使用带有内联 CSS 样式的 HTML 文本，这样即使图像被阻止，消息仍能传达，屏幕阅读器也能读取，并且深色模式能够适当地调整反转效果。

每个 <img> 都需要一个描述性的 alt 属性。当图像被阻止时，替代文本会显示在占位框中——编写良好的替代文本可以用图像原本要传达的消息填补视觉上的空白。

如果没有明确的尺寸，占位符会收缩，并且图像加载后布局会发生偏移。请同时设置这两个属性以及对应的内联样式，这样无论图像最终是否加载，单元格都会预留空间。

Outlook 会在内联图像下方插入一小段空隙。请在每个 <img> 上应用 style="display:block"，以消除该空隙，并确保所有客户端的垂直节奏一致。

较旧的客户端会在 <a><img></a> 周围添加蓝色边框。请在图像属性上设置 border="0"，并以内联方式设置 style="border:0"，这样包裹在行动号召中的图像就能保持干净的呈现效果。

电子邮件客户端没有“当前页面”的概念。每个图像的 src 都必须是指向公开可访问 CDN 的绝对 https:// URL。本地路径、相对路径和 http:// URL（混合内容）都会静默加载失败。

请使用快速且具有地理分布能力的图像主机。一些客户端会通过代理（如 Gmail）获取图像，并在此过程中添加自己的缓存层；第一方 CDN 可以避免从缓慢的源站加载过多请求，并确保图像在各个地区稳定加载。

对于主视觉背景，请将 CSS background-image 与匹配主色调的 bgcolor 配对。如果图像被阻止，单元格仍会显示合理的颜色，叠加在 bgcolor 上的文本也能保持可读，从而避免白色文字出现在白色区块上的灾难。

请以 2 倍尺寸渲染图像，再通过 width 属性缩小显示，以便在高 DPI 显示屏上保持清晰：尺寸为 600x600 的源图像以 width="300" height="300" 显示时，在 Retina 屏幕上会清晰锐利。代价是会增加带宽消耗，因此请使用相当于 WebP 的压缩方式来减小文件大小。

动画 GIF 在大多数客户端中都能正常工作，但 Outlook 只会显示第一帧。请将第一帧设计成即使作为静态图像也有意义的画面——即使没有后续动画，标题、CTA 或关键价值也必须清晰可读。

请将图像视为增强元素，而不是消息本身。使用绝对 https URL，设置 width/height/display:block/border:0，编写有意义的替代文本，将图像托管在快速的 CDN 上，为背景配备 bgcolor 后备方案，按照 Retina 的 2 倍尺寸进行设计，并记住 Outlook 会将 GIF 冻结在第一帧。