了解 HTML 電子郵件中的 Retina 圖像

除了屏幕尺寸的衝擊之外，移動革命還為電子郵件設計師帶來了另一個有趣的挑戰：高 DPI 顯示器。 這些顯示器通常被稱為 Retina 顯示器（由 Apple 營銷機器創造的術語），既可以增強任何電子郵件活動，也可以為您的訂閱者提供不太出色的電子郵件體驗。

在這篇博文中，我們將具體了解高 DPI 顯示的工作原理以及這對電子郵件設計人員和營銷人員的意義。 在了解瞭如何在您自己的活動中實施視網膜圖像後，我們將討論一些重要的注意事項，供任何使用視網膜圖像的人使用。

一點歷史

早在 2010 年，Apple 就發布了 iPhone 4。在其他硬件改進中，iPhone 4 配備了 Apple 所謂的 Retina 顯示屏。 Apple 的 Retina 顯示屏是首批為消費者批量生產的高 DPI（即每英寸高點數）顯示屏之一。

在設備屏幕上，DPI 是指製造商可以容納一英寸屏幕的像素數。 DPI 越高，該屏幕上顯示的圖像和文本就越詳細和清晰。

儘管 Apple 是第一個向主流受眾推出 Retina 顯示屏的公司，但不久之後其他設備製造商也加入了進來。 雖然大多數公司都是從手機等較小的設備開始的，但現在可以在平板電腦、筆記本電腦甚至台式電腦上找到視網膜屏幕，比如蘋果的大型 27 英寸 Retina 5k iMac。

需要視網膜圖像

了解有關硬件和 DPI 的更多信息是很好的，但您可能會發現自己會問：

這跟電子郵件營銷有什麼關係，傑森？

好問題！

作為營銷人員，我們的工作是盡可能以最佳方式展示我們的品牌。 雖然主題行、文案和節奏都在讓訂閱者看起來好看方面發揮著重要作用，但視覺效果首先將人們吸引到電子郵件活動中。 打開電子郵件後，在我們開始閱讀任何副本或點擊號召性用語之前，我們的目光會轉移到設計和圖像上。

如果您不考慮高 DPI 顯示器，您就有可能在訂閱者眼中顯得粗心大意。 由於高 DPI 顯示器的工作方式，未優化的圖像最終在視網膜屏幕上看起來模糊和像素化。 下面是一個例子：

隨著用戶逐漸習慣於視網膜屏幕，他們希望文本和圖像看起來清晰明了。 如果您沒有針對高 DPI 屏幕優化圖像，那麼這些用戶會看到降級的電子郵件設計，這可能會導致對您品牌的信任度同樣下降。

對訂閱者來說幸運的是，在過去幾年中，越來越多的品牌採用了視網膜優化圖像，這在我們的年度電子郵件狀況調查中就很明顯。

在電子郵件中使用 Retina 圖像

您究竟如何優化視網膜屏幕的圖像？ 事實證明，答案很簡單。

粗略地說，高 DPI 顯示器的每英寸像素數是傳統顯示器的兩倍。 因此，如果我們希望我們的圖像在這些屏幕上看起來不錯，它們需要兩倍大，以便當它們在電子郵件中按比例縮小時，視網膜屏幕可以顯示更多像素。

讓我們看一個例子。

在我們的電子郵件中，我們在頂部包含 Litmus 徽標。 使用 HTML，它的大小可以顯示為 130 x 48 像素。 如果我們以該尺寸創建並保存徽標圖像，訂閱者將在視網膜屏幕上看到一團亂麻：

為了保持徽標清晰，我們只需創建一個更大尺寸的圖像。 在這種情況下，圖像文件為 276 x 102 像素，但任何至少是預期顯示尺寸的兩倍都可以使用。 然後，在我們的 HTML 中，我們在 width 和 height 屬性中使用原始的預期顯示大小來縮小較大的圖像：

 <img alt="Litmus" src="[email protected]" width="130" height="48" border="0">

在高 DPI 顯示器上，我們可以獲得漂亮、清晰的視網膜圖像。

在 Outlook 中使用 Retina 圖像

儘管寬度和高度屬性設置了明確的尺寸，但某些版本的 Microsoft Outlook 仍然以完整尺寸顯示視網膜圖像。 為了解決這個問題，您可以在圖像的樣式屬性中包含一個最大寬度規則。

在下面的示例中，我們使用 width 屬性（無 height 屬性）和 max-width 來讓視網膜圖像在所有電子郵件客戶端上工作。

 <img alt="Litmus" src="[email protected]" width="600" border="0">

您會注意到包含設置為 100% 的寬度樣式。 這是使圖像響應不同屏幕尺寸的一個方便的技巧。 在較大的屏幕上，最大寬度規則將開始限製圖像大小，而在較小的屏幕上，它們將填充屏幕或容器寬度的 100%。

背景圖像可以是 Retina 嗎？

是的，您可以使用視網膜圖像作為背景圖像。 雖然實現稍微複雜一些，但原理是一樣的。

需要注意的主要事情是它不會在任何地方都有效（但在電子郵件中真正起作用的是什麼？）。 對於視網膜背景圖像，您應該在表格單元格之類的東西上使用背景 CSS 屬性而不是背景 HTML 屬性。

 <td>

背景是使用速記屬性和單獨的 CSS 背景屬性設置的，以解決 Gmail 和 Android 客戶端中的一些怪癖。 進入這裡有點複雜，但是這個社區討論很好地概述了設計師在高 DPI 顯示器上尋找華麗背景圖像時可用的技術。

一些注意事項

雖然將圖像尺寸加倍有助於確保它們在視網膜屏幕上精美顯示，但這種技術並非沒有缺點。

移動數據計劃價格昂貴，而且速度很慢（取決於您的位置和網絡連接）。 隨著我們增加圖像的尺寸，文件大小也會增加。 增加的大小會減少訂閱者的數據計劃，並可能導致電子郵件加載緩慢。 這兩個問題都是一個大問題，並且會造成不太友好的用戶體驗。

因此請記住，並非每個活動都需要視網膜圖像。 如果您在廣告系列中使用了大量圖片，或者圖片非常大，則使用標準的非視網膜圖像可能有助於提供更好的用戶體驗，因為這些圖片可以快速下載並顯示在您的廣告系列中。

如果您確實需要使用視網膜圖像，有兩種技術可以幫助避免文件過大。

第一個——也是更複雜的——是使用一種叫做壓縮圖像的東西。 這些圖像以大尺寸保存，但質量設置非常低。

大多數圖像編輯程序允許您設置保存圖像的質量。 例如，在 Photoshop 中，您可以使用一個簡單的滑塊來調整 JPEG 的質量：

要創建壓縮圖像，請將圖像設計為預期尺寸的四倍左右，並以極低的質量設置保存。 雖然以全尺寸查看圖像時看起來很糟糕，但在電子郵件中將其縮小到預期尺寸後，偽影會縮小並且不會被注意到。 低質量設置確保您的文件大小保持在最小。

控製文件大小的第二種方法是使用專用程序在保存圖像後進一步壓縮圖像。 應用程序（其中許多是免費的）適用於每個操作系統，允許您在創建圖像後對其進行處理和壓縮。

我們最喜歡的一些包括 ImageOptim、JPEGmini、TinyPNG、Compressor.io、Kraken 和 Pied Piper。 在大多數情況下，您只需將圖像拖放或上傳到程序中，然後它們就會對其進行壓縮。 然後，您可以將這些優化的圖像上傳到您的 ESP 或服務器，以包含在您的視網膜就緒活動中。

這是一個視網膜世界

如果最近的統計數據是一個指標，電子郵件營銷人員將繼續看到訂閱者將他們的閱讀習慣轉移到移動設備上。 結合製造商為設備配備高 DPI 顯示器的趨勢，電子郵件活動中對視網膜圖像的需求是顯而易見的。

只要您考慮文件大小，包括視網膜圖像是升級任何活動並發揮最佳作用的相對簡單的方法。 不要擔心模糊的圖形，今天就開始使用視網膜圖像吧！

測試您的圖像文件大小 + 加載時間 使用 Litmus Checklist，您可以測試圖像的文件大小、加載時間和斷開的鏈接。 此外，立即查看您的廣告系列在 50 多個電子郵件客戶端中的外觀。 開始檢查清單 →