交付第 4 集：了解電子郵件中的背景圖像

在這一集中的交付中，我們將了解電子郵件設計人員的一項基本技術：不起眼但功能強大的背景圖像。 了解背景圖像為何重要，如何使用各種技術對其進行編碼，以及這些不同的方法如何在不同的電子郵件客戶端之間進行比較。 本集是我們最近更新的電子郵件背景圖像終極指南的配套內容。 查看它的提示、技巧和代碼。

請務必訂閱在 iTunes 或 Spotify 上交付以收聽未來的劇集，並使用標籤#DeliveringPodcast 在 Twitter 上加入對話。

情節抄本

有很多方法可以為電子郵件活動添加有趣的視覺效果。

雖然 CSS 允許許多不同的樣式選項，但有時您只需要一個好的圖像。 但是在電子郵件中使用圖像的最佳方式是什麼？ 在這一集中的交付中，我們將了解電子郵件設計人員的一項基本技術：不起眼但功能強大的背景圖像。

我是 Jason Rodriguez，歡迎來到 Delivering，這是一個關於電子郵件營銷及其在世界上的地位的播客。 Litmus 是面向電子郵件營銷人員的行業領先平台，為您提供交付服務。 加入超過 600,000 名使用 Litmus 來創建、審查、測試和跟踪更好的電子郵件營銷活動的電子郵件專業人士。 在 Litmus.com 上了解更多信息並獲得 7 天免費試用。

圖片是電子郵件營銷活動的主要內容。 它們用於產品照片、可愛的插圖、徽標、圖標，以及在某些情況下用於整個電子郵件本身。 尤其是在零售領域，營銷人員傾向於完全使用 Photoshop 等工具設計活動，將這些圖像切片，然後在發送給訂閱者之前將它們轉儲為 HTML。 所有信息——標題、文案、號召性用語等等——都存在於圖像中。

這是遵守品牌準則并快速生成電子郵件的好方法，但以這種方式使用圖像有一些主要缺點。

首先是許多電子郵件客戶端默認禁用圖像。 電子郵件中的圖像和所有內容實際上都被電子郵件客戶端卸載了，從而導致在許多訂閱者看來已損壞的空白活動。

第二個是使用輔助技術（如屏幕閱讀器軟件）的訂閱者將無法體驗電子郵件中的內容。

在這兩種情況下，您花時間投入電子郵件活動的所有副本、交易和價值基本上都被浪費了。 必須有更好的解決方案，對嗎？

輸入背景圖像。

背景圖像只是圖像，就像電子郵件中的任何其他圖像一樣。 它們是上傳到服務器並在代碼中鏈接的文件。 不同之處在於背景圖像不是通過 HTML 圖像標籤應用的，而是作為其他 HTML 元素的屬性或 CSS 應用的。

有四種編碼背景圖像的方法，每種方法都有其優缺點。

第一種也是更傳統的方法是將背景屬性應用於表格單元格。 該屬性的值只是指向圖像的 URL。 這種方法很酷，因為它在電子郵件客戶端中得到了很好的支持。 然而，主要的缺點是它不是很靈活。 您無法控制背景圖像的大小，默認情況下，圖像將在您的元素中重複。

您還可以使用 CSS 加載背景圖像。 以下兩種技術使用相同的方法，但應用不同。

CSS 有許多背景屬性，最顯著的是：background-image、background-repeat、background-position、background-size 和 background-color。 還有超級有用的背景速記屬性。

使用這些屬性，您可以包含圖像的 URL，控制該圖像的定位方式以及它是否重複，以及在未加載圖像時包含後備顏色。

使用 CSS 背景的第一種方法是將這些屬性嵌入電子郵件頭部的樣式塊中。 只需定位一個 HTML 元素，如表格單元格或 div，並使用它。 此方法易於編碼、閱讀和維護，但並非所有電子郵件客戶端都支持嵌入樣式。

一種更可靠的方法是在 HTML 元素中內聯包含這些屬性。 如果您在多個元素上使用背景圖像，這可能會變得混亂，但是，由於我們是電子郵件極客並習慣於使用內嵌圖像，因此它仍然完全可以管理。

在電子郵件中包含背景圖像的最後一種方法是使用所謂的“防彈背景”。 Bulletproof 背景建立在 HTML 屬性方法之上，還在代碼中包含 VML（或矢量標記語言）。 VML 是一種 Microsoft 專有語言，用於 Outlook 等 Office 產品。 通過在 VML 中應用背景圖像，它們將在 Microsoft Outlook 中工作，這對於前面討論的其他方法不一定正確。

使用 VML 的主要缺點是它不是很容易訪問或沒有很好的文檔記錄，並且它添加了很多坦率地說難以理解的代碼。 為方便起見，我們在 Campaign Monitor 的朋友實際上構建了一個驚人的工具來生成防彈背景。 您可以方便地在 backgrounds.cm 上找到它。

無論您選擇哪種方法，與傳統編碼圖像相比，在電子郵件中使用背景圖像都有驚人的好處。

主要的好處是可訪問性。 通過使用背景圖像，您可以依賴實時的 HTML 文本而不是圖像來呈現您的所有內容。 文本不會像圖像一樣受到阻塞，因此即使關閉圖像，訂閱者仍然可以閱讀您的消息。 而且，對於需要屏幕閱讀器的用戶，他們將能夠聽到向他們讀出的內容，這與傳統圖像不同。

您可以使用 CSS 來設置 HTML 內容的樣式，使其看起來像 Photoshop 中的圖像一樣經過精心設計，您甚至可以在其中包含 CTA 按鈕。

然後，背景圖像用於包含額外的視覺樣式，無論是簡單的漸變、一些花哨的產品照片還是重複的圖案。 它們與 HTML 文本結合使用以創建美觀且實用的電子郵件。

更酷的是，您可以執行更高級的操作，例如將 GIF 動畫作為背景圖像，根據屏幕大小或設備交換圖像，甚至像我們幾年前為 Litmus Live 公告電子郵件所做的那樣編寫視頻背景。

充分利用背景圖像有很多事情要做。 我們最近在 Litmus 博客上發布了對電子郵件背景圖像終極指南的更新，值得一看。 這是查看支持背景圖像的代碼以及獲取更新您自己的廣告系列的靈感的好方法。 只需轉到今天的節目說明即可獲得鏈接。

並且一定要訂閱在 iTunes 或 Spotify 上交付以收聽未來的劇集，我們將深入研究更多技術以構建更好的 HTML 電子郵件。