电子邮件营销与自动化

如何在 HTML 电子邮件中使用视网膜显示屏的高分辨率图像

视网膜显示屏是一个营销术语 Apple 描述像素密度高到人眼无法在典型观看距离区分单个像素的高分辨率显示器。 视网膜显示器通常具有每英寸 300 像素的像素密度(PPI) 或更高,这明显高于像素密度为 72 ppi 的标准显示器。

视网膜显示屏现在已成为显示器、笔记本电脑、移动设备和平板电脑的主流。 许多制造商现在提供像素密度与 Apple 的 Retina 显示器相当或超过的高分辨率显示器。

CSS 为 Retina 显示器显示更高分辨率的图像

您可以使用以下 CSS 代码为 Retina 显示屏加载高分辨率图像。 此代码检测设备的像素密度并使用 @2x Retina 显示器的后缀,同时为其他显示器加载标准分辨率图像。

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2) {
/* Load high-resolution image */
background-image: url('image@2x.png');
}

另一种方法是使用矢量图形或 SVG的 图像,可以缩放到任何分辨率而不会降低质量。 这是一个例子:

<div style="max-width: 300px;">
    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
    </svg>
</div>

在此示例中,SVG 代码使用 <svg> 标签。 这 viewBox 属性定义 SVG 图像的尺寸,而 xmlns 属性指定 SVG 的 XML 命名空间。

max-width 属性设置在 div 元素以确保 SVG 图像自动缩放以适应可用空间,在本例中最大宽度为 300px。 这是确保 SVG 图像在所有设备和电子邮件客户端上正确显示的最佳实践。

请注意: SVG 支持可能因电子邮件客户端而异,因此在多个客户端上测试您的电子邮件以确保正确显示 SVG 图像非常重要。

为 Retina 显示器编写 HTML 电子邮件的另一种方法是利用 srcset. 使用 srcset 属性允许您为 Retina 显示器提供高分辨率图像,同时确保图像的大小适合低分辨率设备。

<img src="image@2x.jpg" srcset="image.jpg 600w, image@2x.jpg 1200w" alt="My Image" style="width:100%;max-width:600px;">

在这个例子中, srcset 属性提供了两个图像源: image.jpg 对于分辨率为 600 像素或更小的设备,以及 image@2x.jpg 适用于分辨率为 1200 像素或更高的设备。 这 600w1200w 描述符以像素为单位指定图像的大小,这有助于浏览器根据设备的分辨率确定要下载的图像。

并非所有电子邮件客户端都支持 srcset 属性。 支持水平 srcset 根据电子邮件客户端的不同,可能会有很大差异,因此在多个客户端上测试您的电子邮件以确保正确显示图像非常重要。

针对 Retina 显示器优化的电子邮件中图像的 HTML

可以编写响应式 HTML 电子邮件,以针对视网膜显示器优化的分辨率正确显示图像。 就是这样:

  1. 创建一个高分辨率图像,其大小是您要在电子邮件中显示的实际图像的两倍。 例如,如果要显示 300×200 的图像,请创建 600×400 的图像。
  2. 保存高分辨率图像 @2x 后缀。 例如,如果您的原始图像是 image.png, 将高分辨率版本另存为 图片@2x.png.
  3. 在您的 HTML 电子邮件代码中,使用以下代码显示图像:
<img src="image.png" alt="Image" width="300" height="200" style="display:block; border:none; outline:none; text-decoration:none; -ms-interpolation-mode:bicubic;">
<!--[if (gte mso 9)|(IE)]>
  <img src="image@2x.png" alt="Image" width="300" height="200" style="display:block; border:none; outline:none; text-decoration:none; -ms-interpolation-mode:bicubic;">
<![endif]-->

<!--[if (gte mso 9)|(IE)]> 是用于针对特定版本的 Microsoft Outlook 的条件注释,它使用 Microsoft Word 呈现 HTML 电子邮件。 Microsoft Word 的 HTML 呈现引擎可能与其他电子邮件客户端和 Web 浏览器有很大不同,因此它通常需要特殊处理。 这

(gte mso 9) 条件检查 Microsoft Office 版本是否大于或等于 9,这对应于 Microsoft Office 2000。 |(IE) 条件检查客户端是否为 Microsoft Outlook 经常使用的 Internet Explorer。

具有 Retina 显示优化图像的 HTML 电子邮件

下面是响应式 HTML 电子邮件代码示例,它以针对视网膜显示器优化的分辨率显示图像:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Retina-Optimized Email</title>
  <style>
    /* Mobile-specific styles */
    @media only screen and (max-width: 480px) {
      /* Add mobile-specific styles here */
    }
    
    /* High-density display styles */
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      img {
        display: block;
        width: 300px !important;
        height: 200px !important;
        max-width: 100%;
        height: auto;
      }
    }
  </style>
</head>
<body style="margin: 0; padding: 0; background-color: #f7f7f7;">
  <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
      <td align="center" style="padding: 40px 0 30px 0;">
        <img src="image.png" alt="My Image" width="300" height="200" style="display:block; border:none; outline:none; text-decoration:none; -ms-interpolation-mode:bicubic;">
        <!--[if (gte mso 9)|(IE)]>
          <img src="image@2x.png" alt="My Image" width="300" height="200" style="display:block; border:none; outline:none; text-decoration:none; -ms-interpolation-mode:bicubic;">
        <![endif]-->
      </td>
    </tr>
  </table>
</body>
</html>

视网膜显示图像提示

以下是针对针对 Retina 显示屏优化的图像优化 HTML 电子邮件的一些额外提示:

  • 请务必始终让您的图片标签包含使用 alt 为图像提供上下文的文本。
  • 优化 Web 图像以在不影响图像质量的情况下减小文件大小。 这可以包括使用 图像压缩 工具,减少图像中使用的颜色数量,并在将图像上传到电子邮件之前将其调整到最佳尺寸。
  • 避免会减慢电子邮件加载时间的大背景图像。
  • 由于创建动画需要多个帧,因此动画 GIF 的文件大小可能比静态图像大,请务必将它们保持在 1 以下 Mb.

Douglas Karr

Douglas Karr 首席营销官是 开放洞察 和创始人 Martech Zone。 道格拉斯帮助了数十家成功的 MarTech 初创公司,协助进行了超过 5 亿美元的 MarTech 收购和投资尽职调查,并继续协助公司实施和自动化其销售和营销策略。 道格拉斯是国际公认的数字化转型和 MarTech 专家和演讲者。 道格拉斯还是一本傻瓜指南和一本商业领导力书籍的出版作者。

相关文章

返回顶部按钮
关闭

检测到Adblock

Martech Zone 我们能够免费为您提供这些内容,因为我们通过广告收入、联属链接和赞助从我们的网站中获利。 如果您在浏览我们的网站时删除广告拦截器,我们将不胜感激。