電子郵件營銷與自動化

如何在 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 像素或更高的設備。 這 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 是 CMO 的 開放洞察 和創始人 Martech Zone。 道格拉斯幫助了數十家成功的 MarTech 新創公司,協助進行了超過 5 億美元的 MarTech 收購和投資盡職調查,並繼續協助公司實施和自動化其銷售和行銷策略。 道格拉斯是國際公認的數位轉型和 MarTech 專家和演講者。 道格拉斯也是一本傻瓜指南和一本商業領導書的出版作者。

相關文章

返回頂部按鈕
關閉

檢測到Adblock

Martech Zone 我們能夠免費為您提供這些內容,因為我們通過廣告收入、聯屬鏈接和讚助從我們的網站中獲利。 如果您在瀏覽我們的網站時刪除廣告攔截器,我們將不勝感激。