電子郵件中帶樣式的 ALT 文本的終極指南

電子郵件世界中普遍接受的最佳實踐是包含圖像的 ALT 屬性。 替代文本的速記，電子郵件中的 ALT 文本現在是電子郵件愛好者的標準做法。

有幾個原因：

• 大多數電子郵件客戶端默認阻止圖像。 在某些情況下，電子郵件客戶端不會顯示圖像，而是顯示 ALT 文本。 這絕對很方便，尤其是在電子郵件設計主要由圖像組成的情況下。 即使圖像不能，ALT 文本也可以幫助傳達信息。
• 在圖像由於連接不良、鏈接斷開等而無法或不會加載的情況下，將顯示 ALT 文本而不是圖像。
• 對視障讀者的需求敏感的營銷人員和設計師了解屏幕閱讀器使用 ALT 文本。 由於這些用戶無法查看文本或圖像，ALT 文本用於通過屏幕閱讀器描述圖像。

驗證您的圖像是否具有 ALT 文本 使用 Litmus Checklist，您可以在關閉圖像的情況下預覽電子郵件，並在您的任何圖像缺少 ALT 文本時收到通知。 每次都充滿信心地發送。 免費試用 Litmus →

為 HTML 電子郵件中的圖像設置 ALT 文本很簡單。 稱為屬性，它是 HTML 語法的標準部分，包含在圖像標記中：

 <img src="logo.jpg" width="400" height="149" alt="Litmus" >

包含高度和寬度值很重要，因為這會為 ALT 文本創建一個佔位符框，以便在禁用圖像時駐留。

標準 ALT 文本顯示

以下是發送到 Gmail 的沒有 ALT 文本的電子郵件中禁用的圖像的樣子：

與帶有 ALT 文本的電子郵件中的禁用圖像相比：

你更願意接受哪一個？

為 ALT 文本添加樣式

您還可以對 ALT 文本感興趣，添加一些內聯 CSS 來更改 ALT 文本的字體、顏色、大小、樣式和粗細：

 <img src="NAME OF IMAGE.PNG" width="500" height="462" alt="Litmus"/>

這是上面的相同示例，但應用了 ALT 文本樣式：

跨電子郵件客戶端的樣式化 ALT 文本支持

雖然這是一種很好的技術，但這仍然是我們所談論的電子郵件，因此自然支持有點分散在不同的電子郵件程序中。 我從 Salesforce 令人印象深刻的 Dreamforce 電子郵件中藉用了一些元素來測試以下示例的樣式化 ALT 文本。

Webmail 樣式的 ALT 文本支持

Webmail 客戶端（例如 Gmail）最為多樣化，因為這些郵件程序可以在不同的瀏覽器中訪問。 在所有網絡郵件客戶端中，對樣式化 ALT 文本的支持取決於所使用的瀏覽器。 當前版本的 Firefox、Chrome 和 Safari 支持帶樣式的 ALT 文本。

例如，在 Firefox 中查看 Gmail 的訂閱者可以看到樣式化的 ALT 文本，但只能在 Internet Explorer 中使用。 在這種情況下，支持顏色，但不支持字體或其他屬性。 Internet Explorer 似乎是一個不友好的瀏覽器，通常用於樣式化 ALT 文本。 我們發現雖然支持顏色，但通常不支持字體：

• Internet Explorer 中的 Gmail 和 G-Suite
• Internet Explorer 中的 GMX.de
• Internet Explorer 中的 Office 365
• Internet Explorer 中的 Outlook.com
• Internet Explorer 中的 Web.de
• 雅虎！ Internet Explorer 中的郵件

Gmail/Firefox 中的帶樣式的 ALT 文本：

Gmail/IE 中的帶樣式的 ALT 文本：

鏈接圖像上的 ALT 文本

在某些網絡郵件客戶端中，鏈接圖像的 ALT 文本可能帶有下劃線或藍色。 雅虎！ 為鏈接圖像中的 ALT 文本加下劃線，而 Gmail 會同時加下劃線並忽略指定的顏色，而是默認為鮮豔的藍色：

展望網

Outlook.com 並沒有阻止所有圖像，而是聲稱“阻止來自可疑發件人的內容”，儘管我不確定他們如何確定誰看起來可疑！ 隨機地，一些發件人是“受信任的”，會自動顯示圖像，而另一些發件人則會發出阻止內容警告：

用戶可以在 Outlook.com 設置中阻止不在安全發件人列表中的任何人的圖像。 Outlook.com 以不同的方式對待這兩種類型的內容過濾，對“可疑”發件人使用類似於 Gmail 的圖像阻止行為，同時使用 Hotmail 的灰色框為具有更嚴格內容阻止設置的用戶阻止圖像。

桌面樣式的 ALT 文本支持

桌面客戶端更可靠一些，因為涉及的變量並不多：

*Outlook 向 ALT 文本添加了安全消息。 更多詳情如下。

雖然默認情況下 Apple Mail 和 Thunderbird 不會阻止圖像，但您可以在每個應用程序的首選項中選擇這樣做。 我在這些客戶端上手動啟用了圖像阻止功能，以查看它們是否支持帶樣式的 ALT 文本。

在支持其他變量方面有一些細微的變化，特別是與網絡字體相關的：

• Apple Mail 不支持樣式字體，但仍包含顏色和其他屬性。
• 在 Outlook 2000-2003 中，雖然您可以更改顏色，但您無法使用帶樣式的 ALT 文本調整任何其他內容。

Outlook 的安全消息

Outlook 2003、2007、2010、2013 和 2016 的前言 ALT 文本帶有冗長的安全消息，說明“右鍵單擊此處下載圖片。 為了幫助保護您的隱私，Outlook 阻止了從 Internet 自動下載此圖片。” 不幸的是，這使得這些電子郵件客戶端中的 ALT 文本幾乎無用，因為它只出現在 Outlook 安全警告的最後：

此消息也出現在 Windows 10 中，完全阻止了任何 ALT 文本。

移動樣式的 ALT 文本支持

移動客戶端強烈支持帶樣式的 ALT 文本，這是個好消息——尤其是對於擁有大量 Android 受眾的營銷人員。

像 Apple Mail 和 Thunderbird 一樣，我手動更新了我的 iOS 設置來阻止圖像，以便觀察這個移動操作系統如何處理 ALT 文本。

Android 中的樣式 ALT 文本（三星 Galaxy Nexus）：

帶樣式的 ALT 文本在 Android 的電子郵件和 Gmail 應用程序中的顯示方式相同。

BlackBerry OS 6 (Torch 9810) 中的帶樣式的 ALT 文本：

iOS 中的樣式化 ALT 文本（iPhone 5）：

Windows Phone 7.5 (Nokia Lumia 900) 中的圖像攔截：

CSS 字體屬性、鏈接和長度是變量

深入研究細節，顯示帶樣式的 ALT 文本的客戶端支持以下大多數字體屬性：

• 字體系列
• 字體大小
• 字體粗細
• 顏色
• 字體樣式

當涉及到支持的特定屬性時，測試中存在一些差異。 幾乎每個客戶端都支持顏色屬性，但不支持字體。 這也因瀏覽器而異。 例如，在我對兩種不同顏色的樣式字體的測試中，Chrome 中的 Gmail/G-Suite 如下所示：

雖然 Internet Explorer 中的 Gmail/G-Suite 尊重顏色但不尊重字體：

請注意，某些客戶端可能不支持其樣式化 ALT 文本中的所有字體或大小，但這並不意味著您不能添加一些品牌或風格。 查看電子郵件營銷專家 Jaina Mistry 為 Campaign Monitor 編寫的這個方便的資源，以仔細檢查網絡字體支持。

我還推薦 Windows 和 Mac 上常用的字體列表。

其他值得注意的圖像阻塞行為

在許多電子郵件客戶端中，一旦文本的大小或長度超過圖像容器的寬度和/或高度，ALT 文本就會消失。 由於這種行為，最好堅持使用較短的描述和較小的字體大小，以避免完全刪除 ALT 文本。

幾乎所有電子郵件客戶端都允許您更改設置以自動顯示或隱藏圖像（儘管大多數情況下隱藏/阻止是默認設置），並且它們會提示用戶為單個消息打開圖像。 有些還允許用戶將特定發件人添加到許可名單或地址簿，或選擇“始終顯示來自...的圖像”

關閉（和打開！）圖像預覽您的電子郵件

禁用圖像後，您的電子郵件看起來如何？ 您的 ALT 文本渲染正確嗎？ 使用 Litmus 在 50 多個桌面、移動和網絡郵件客戶端（包括圖像關閉視圖）中預覽您的電子郵件。

開始測試 →