HTML 電子郵件最佳實踐：僅包含圖像的電子郵件是否不利於營銷？

已發表: 2022-11-24

成功的企業高度重視執行他們的品牌標準——這是理所當然的。這是他們與客戶關係的直觀表現，他們通過始終使用相同的字體、顏色、徽標和圖像樣式來保持這種融洽關係。

這就是為什麼當您開始為您的客戶制定電子郵件營銷策略時，卻意識到您僅限於網絡安全字體，無法輕易地在圖像上覆蓋文字，並且無法控製文本的確切外觀，這可能會如此令人震驚因為填充或邊距因收件箱而異。

因此，您可能會想創建一個僅包含圖像的模板，以便您的電子郵件始終看起來完全符合您的要求。不幸的是，這是一種目光短淺的策略，可能導致的問題多於解決的問題。繼續閱讀以了解原因（以及您應該做什麼）。

為什麼你應該避免只有圖片的電子郵件

可悲的是，純圖像電子郵件的好處並沒有超過缺點。以下是您應該避免使用它們的一些原因。

它們可能導致交付能力問題

在製作您的電子郵件活動時，您的首要任務應該始終是可傳遞性。僅包含圖像的電子郵件通常會直接發送到垃圾郵件文件夾，因為它們可能是詐騙者用來繞過為檢測攻擊性或欺騙性措辭而設置的文本過濾器的一種策略。

電子郵件的整體文件大小也會影響可傳遞性，如這篇關於 acid 文章的電子郵件所示，純圖像電子郵件比 HTML 電子郵件大得多。

它們可能加載緩慢——或者根本不顯示

出於安全原因或保護用戶免受潛在攻擊性內容或惡意軟件的侵害，一些電子郵件客戶端可能默認關閉圖像。如果您創建了一封僅包含圖像的電子郵件，他們可能只會看到一堵破損的圖像圖標牆，就像這篇關於圖像屏蔽的石蕊文章中顯示的示例一樣。

圖片過多的電子郵件還會大大增加電子郵件加載所需的時間，這可能不利於用戶參與。人們平均花 10-13 秒閱讀一封電子郵件；這意味著如果圖像加載時有任何滯後時間，那麼您必須傳達信息的機會窗口已經很窄，將會進一步縮小。

他們妥協的可訪問性

視障人士在使用屏幕閱讀設備解讀純圖像電子郵件時會遇到更多困難。儘管電子郵件中的圖像應始終具有與電子郵件內容相關的描述性替代文本，但它們並不意味著完全取代電子郵件文本。

它們未針對移動設備進行優化

如果您為桌面設計純圖像電子郵件，您的客戶會瞇著眼睛在他們的移動設備上看到它。另一方面，如果你設計它是為了在手機上可讀，它在電腦屏幕上看起來會像卡通一樣大。

它們不像 HTML 電子郵件那樣可搜索

如果您發送一封電子郵件，其中包含聯繫人希望稍後參考的信息，例如優惠券或即將舉行的活動，如果所有文本都是基於圖像的，他們將很難在收件箱中搜索您的消息。

既然您已經了解不應創建僅包含圖像的電子郵件的所有原因，那麼在製作美觀且有效的 HTML 電子郵件時，請牢記以下最佳做法。

創建 HTML 電子郵件的最佳實踐

這是否意味著您應該避免在電子郵件中包含圖片？一點也不！大多數資源建議使用 60/40 的文本與圖像比例，以實現可交付性和最佳用戶體驗的最佳平衡。嘗試使用這些策略來創建在顯示或不顯示圖像的情況下產生影響的電子郵件。

盡可能減小圖像的大小

您可以——而且應該——仍然在電子郵件中包含圖像，但在將它們添加到電子郵件模板之前，它們的文件大小應該最小化。

要從 Photoshop 為電子郵件導出圖像，請選擇“文件”>“導出”>“存儲為 Web”。對於像照片這樣的不透明圖像，JPEG 文件格式將允許比 PNG 更小的文件大小。對於需要透明度的徽標等插圖圖像，PNG 是理想的選擇。

如果您無法訪問 Photoshop，免費的在線圖像壓縮工具（例如 tinypng）可以幫助您將圖像尺寸保持在最小水平。

使用實時文本

在大多數情況下，所有電子郵件措辭都應該是 HTML 文本，可以用光標選擇並通過屏幕閱讀設備閱讀。雖然最初的網絡安全字體列表是您最安全的選擇，但某些收件箱可能會顯示您的字體（例如，Gmail 將顯示 Google 字體）。

您始終可以選擇首先使用您的品牌字體，然後使用網絡安全字體作為後備。通過在 CSS 中使用逗號，您是在告訴收件箱盡可能使用第一種字體，然後儘可能使用第二種字體，如果其他兩種字體不可用，最後使用任何其他無襯線字體。

 <style=”font-family: 'KoHo', Arial, sans-serif”>

創建防彈按鈕

防彈按鈕是使用 HTML 而不是圖像創建的任何電子郵件按鈕。它們可以使用多種方法製作，包括填充、邊框或矢量標記語言 (VML)。

這個防彈電子郵件按鈕創建器可以幫助您輕鬆創建一個風格化的按鈕，該按鈕將在大多數收件箱（包括 Outlook）中精美顯示。

將圖像交換為 Gif 以獲得最大影響

您可能會驚訝地發現動畫 gif 的文件大小甚至比照片還小。這一切都歸結為圖像的複雜性和幀之間有多少像素變化。

本文提供了幾種為您的電子郵件創建大小合理的 gif 的詳細策略。其中一些技巧包括：

切割而不是褪色過渡
使用插圖矢量元素而不是照片
使用疊加層來限制調色板

在電子郵件頂部包含“在瀏覽器中查看”鏈接

有些用戶會更喜歡默認關閉圖像，或者他們可能無法控制此功能，因為他們有一個內置安全功能的工作場所收件箱。

這就是為什麼在您的電子郵件頂部包含一個“在瀏覽器中查看”鏈接總是一個好主意，這樣聯繫人就可以看到最初設計的電子郵件。

使用文本元素而不是圖像圖標

盡可能嘗試使用基於文本/CSS 的元素代替圖像。例如，不要創建箭頭圖像，而是查看是否有包含箭頭的網絡安全字體。您可以在谷歌上搜索“ASCII”或“Unicode”後跟您的關鍵字進行檢查。此圖表顯示了您可能不知道的所有符號，它們都是 Arial 字體系列的一部分。

使圖像成為可選的強調元素

我們注意到的最近趨勢是使用圖像無縫融入純色背景的電子郵件。這給人一種純圖像電子郵件的錯覺，同時保留了桌面和移動設備的 HTML 文本和響應式設計。

儘管您可能無法選擇理想的字體和佈局，但精心設計的 HTML 電子郵件仍然是一種非常有效的營銷工具，可用於接觸每一位顧客——無論他們的人口統計群體或身體能力如何。