如何在 HTML 電子郵件中使用視網膜顯示屏的高分辨率圖像
視網膜顯示屏是一個營銷術語 蘋果 描述像素密度高到人眼無法在典型觀看距離區分單個像素的高分辨率顯示器。 視網膜顯示器通常具有每英寸 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 電子郵件的一些額外提示: