如何在 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 像素或更高的设备。 这 600w
和 1200w
描述符以像素为单位指定图像的大小,这有助于浏览器根据设备的分辨率确定要下载的图像。
并非所有电子邮件客户端都支持 srcset
属性。 支持水平 srcset
根据电子邮件客户端的不同,可能会有很大差异,因此在多个客户端上测试您的电子邮件以确保正确显示图像非常重要。
针对 Retina 显示器优化的电子邮件中图像的 HTML
可以编写响应式 HTML 电子邮件,以针对视网膜显示器优化的分辨率正确显示图像。 就是这样:
- 创建一个高分辨率图像,其大小是您要在电子邮件中显示的实际图像的两倍。 例如,如果要显示 300×200 的图像,请创建 600×400 的图像。
- 保存高分辨率图像 @2x 后缀。 例如,如果您的原始图像是 image.png, 将高分辨率版本另存为 图片@2x.png.
- 在您的 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 电子邮件的一些额外提示: