關於如何在電子郵件模板中添加背景圖像的 4 條提示

已發表: 2020-12-14

電子郵件背景圖片

每個人都在消息中使用電子郵件背景圖像。 它們非常引人注目，以正確的方式使用它們非常重要。 所以，讓我們開始我們在電子郵件中使用背景圖像的指南。 你會發現：

  • 為什麼需要在時事通訊中使用圖片；

  • 如何使用 HTML 代碼插入背景圖片；

  • 如何使用 CSS 添加背景圖像。

電子郵件的背景是什麼？

時事通訊背景是用作電子郵件中所有其他元素的環繞的圖像。 與其像英雄形像那樣成為主要焦點，它更經常是微妙的，並且與活動的其他內容相輔相成。

在 HTML 中添加電子郵件的背景圖像需要更改時事通訊的代碼。 如果您對自定義編碼一無所知 - 正確的方法是使用已加載到您的電子郵件軟件 Atomic Email Sender 中的免費現成模板。 選擇您喜歡的內容，添加內容並發送廣告系列。

無論您是熟悉 HTML 和 CSS 的高級用戶，並且具備使用這些代碼的一些技能，我們的文章都會為您提供一些有關如何在 HTML 中創建背景圖像的提示。

為什麼使用電子郵件背景

電子郵件 HTML 背景圖像的主要好處是您可以獲得額外的分層可能性，並且您可以將關鍵信息以及其他圖片或號召性用語放置在電子郵件背景圖像之上。

就美而言，獲得一份設計精美的時事通訊總是件好事。 此外，您可以使用動畫 GIF 作為時事通訊的背景圖像。


通過電子郵件發送背景圖片
動畫電子郵件背景

保持簡單：電子郵件後台的基本設計

請記住，背景圖像應該簡單，並且沒有可以搶鏡的大聲圖案。 HTML 電子郵件背景顏色不應太亮，以免引起比電子郵件通訊的主要信息更多的關注。 請記住，時事通訊背景只是對內容的補充，以使電子郵件看起來更漂亮。 最好的時事通訊背景圖像具有安靜的風格，並且可以包含圖形元素（紋理、漸變、圖案等）。

如果您不是設計專業人士，我們建議您不要冒險並避免來自藝術背景。 極簡主義現在很流行，您可以成功地將其應用到您的電子郵件活動中。 電子郵件最佳實踐中的圖像之一是電子郵件的漸變背景。 使用顏色並根據電子郵件的內容選擇具有平滑過渡的漸變背景。 可以使用 CSS 來完成。 因此，您會得到一個電子郵件背景，它可以很好地替代 PNG、JPG 或 GIF 圖片的背景。


電子郵件模板背景圖片
漸變電子郵件背景

通訊圖片的最佳尺寸和格式

電子郵件的圖像格式

當您選擇或創建用於電子郵件活動的圖像時，請確保以正確的格式保存它們 - PNG、JPG 或 GIF。 每種圖像格式都有自己的特殊性，例如保存為 PNG 的圖像保持透明度。

大小事項！

與您的 ESP 保持聯繫很好，現在是時候向您的 ESP 詢問圖像大小和重量的限制。 看，一些 ESP 會壓縮太大或重量太大的圖像——所有這些都會影響圖像的質量和信息的總體印象。 如果您的圖像太大，則電子郵件可能會被防火牆或電子郵件過濾器阻止，並且您的電子郵件活動將無法到達收件人。

由於理想的電子郵件模板大小在 600-650 像素之間波動，因此最好使用大小完全相同的背景圖像。 這涉及保存為 PNG 和 JPG 文件的圖像。

最佳 Outlook 和 Gmail 背景圖像大小是否不同？ 不，接收者使用哪個客戶端來閱讀新聞通訊並不重要。 Gmail 和 Outlook 電子郵件背景圖像的完美尺寸均為 600-650 像素。

要將 GIF 圖像用作背景圖像並覆蓋整個內容區域，請將其大小保持為 1280 像素寬。 想要強調除 Outlook 2007-2013 之外的幾乎所有電子郵件客戶端都支持 GIF 文件 - 他們的用戶只會看到動畫 GIF 文件中的第一幀。 這就是為什麼把最重要的框架放在第一位的原因。 一般情況下，動畫 GIF 中的幀數不應超過 10 個單位。

為了方便管理電子郵件，請使用電子郵件工作室。 我們還有一個很棒的電子郵件列表管理器，用於管理電子郵件列表。 使用電子郵件提取器，您可以收集用於發送信件的電子郵件地址。

讓您的電子郵件適合移動設備使用

請記住，人們使用移動設備打開的電子郵件超過一半。 在創建電子郵件設計時，您應該考慮這一點。 準備簡訊手機版，圖片尺寸更小，避免郵件加載時間過長等問題。 如何讓郵件在智能手機上正確顯示？ 使用 CSS 調整每個特定智能手機屏幕的背景圖片。 收件人將感謝優質設計，節省時間和交通！

如何在電子郵件中添加背景圖片？ 讓我們了解如何在我們的電子郵件發送軟件 - Atomic Mail Sender 中使用背景圖像。

如何添加背景圖片 - Atomic Mail Sender Rocks

添加背景圖像有四種主要方法：

  • 使用表格屬性在 HTML 中插入背景圖片
  • 使用內聯 CSS
  • 使用嵌入式 CSS
  • 使用防彈背景

讓我們想像一下，您已經有一個 HTML 電子郵件模板，並且只想向其添加背景圖像。 由於時事通訊因業務分支而異，編碼也各不相同，我們將從 Atomic Mail Sender 現成的模板中選取一個，向您展示後台實現的主要原則。

1.表格屬性作為HTML添加背景圖片的方式

如果您查看由表格設計的電子郵件模板，您會看到包含其他較小表格塊的第一個主表格。 這就是我們需要的——第一個打開的表格和屬性background 。

提及的屬性可以應用於整個表格（標籤 <table>）或表格單元格（標籤 <td>）。

背景屬性包含託管背景圖像的 URL。

例如：

<td width="100%" align="center" bgcolor="#fcd539" border="0" cellspacing="0" cellpadding="0" background="https://path-to-image/title.png"></td>

對於不支持背景圖像的客戶端，您確實需要提及背景顏色 (bgcolor) 以及 ALT 文本。 謹慎選擇背景顏色。 所有內容元素和消息文本都應在後台清晰可讀。 有些讀者不打開圖像，這就是為什麼使用 ALT 文本很好。 不要只使用您可能用於 SEO 需求的普通替代文本。 想像一下，這是圖像的唯一替代方法，並將您的 ALT 文本用作號召性用語。 讓它們聽起來很好聽！ 您將從中受益。 讀者可以打開圖像以查看圖像，或者只需點擊鏈接即可查看報價。

前：


背景圖像_1
沒有背景的電子郵件

後：


背景圖像_2
帶有圖案背景的電子郵件

沒有背景圖像但有背景顏色：


background_image_3
純背景的電子郵件

如果您沒有網站，我們建議您將用作背景的圖像保存在免費服務或公共服務器上。 始終鍵入背景圖像文件的絕對路徑。

所以，這就是如何使用 HTML 代碼添加背景圖像。 現在讓我們轉到下一種插入方式。

2. 如何使用內聯 CSS 代碼作為背景圖片

操作原理同上，修改第一個打開表格或表格單元格的代碼。 不同之處在於您使用style屬性。

HTML 代碼示例：

<td width="100%" align="center" border="0" cellspacing="0" cellpadding="0"></td>

  • 添加以下屬性： background-repeat: no-repeat; 到桌子上，使背景圖像不再重複。 所以，它不會是這樣的： 背景圖像_4 它將顯示如下： background_image_5 不重複的背景圖片
  • 背景尺寸：封面； - 這個重要的屬性允許用您的圖像覆蓋所有可用的時事通訊空間。 當您的通訊空間和需要調整大小的圖像受到限制時，對於移動電子郵件活動特別有用。 背景圖像_6

最好有一個鏈接指向您的電子郵件信息的 WEB 版本。 有時無法看到圖像，這可能是由於錯誤或電子郵件客戶端錯誤而發生的。 最好有一個指向電子郵件 WEB 版本的鏈接。 讓它聽起來像“查看圖像有問題？單擊此處獲取 WEB 版本”

3. 嵌入式CSS表格用於背景圖片創建

首先，您需要在電子郵件消息的頭部添加一個 css <style> 標籤。 確保現有 HTML 代碼中沒有其他背景屬性，否則它們會覆蓋背景圖像。

CSS 代碼示例如下：

<style> .bgImage { background-image: url('https://path.to/image.png'); background-repeat: no-repeat; background-size: cover; } </style>

然後我們直接進入電子郵件模板中的嵌入式 CSS。 使用該類設置與您在電子郵件頭中編寫的 css 樣式的對應關係。

<td class="bgImage"></td>

4. 電子郵件中的防彈背景圖片

背景圖像的防彈原則將 HTML 屬性使用與 Microsoft 的矢量標記語言 (VML) 相結合。 這種方法有助於創建具有背景的電子郵件模板，該模板將顯示在每個電子郵件客戶端中。

今天有一個免費的服務器可以自動生成防彈後台代碼。 轉到 https://backgrounds.cm/ 並嘗試一下。

只需指定所需背景圖片的 URL，指定備用顏色並選擇此規則應應用於新聞通訊的整個正文還是僅應用於表格中的一個單元格。 因此，您可以準備好將 HTML 代碼插入到模板中。

背景圖像如何在電子郵件客戶端中顯示

有一個問題：某些電子郵件客戶端可能不支持背景圖片。 例如，舊版本的 Android。 此外，無論您如何努力，某些版本的 Gmail 客戶端都不會完全顯示帶有圖像的電子郵件模板。 在創建時事通訊時請務必牢記這一點。 為了更容易理解問題，請使用此表。


background_image_7

來源：https://litmus.com/blog/the-ultimate-guide-to-background-images-in-email

為了使您在電子郵件活動中的工作更加有效，我們開發了用於從您計算機上的文本中提取電子郵件的軟件。 然後，使用自動電子郵件批量發件人，您可以進行群發郵件。 發送所有電子郵件後，使用電子郵件跟踪器軟件方便地跟踪它們。

更多提示

  • 推薦的電子郵件寬度 - 600 像素（最大 650 像素）。 這是保證您的電子郵件信息將在每台設備和每台電子郵件客戶端上正確顯示的保證。
  • 推薦的電子郵件高度取決於內容長度，但最多不應超過 200 像素。
  • 推薦字體大小 – 14px，行距 1,5。
  • 文本顏色應與背景顏色形成對比。

說實話，沒有精確的規則可以確定電子郵件元素的大小，因此您可以嘗試形狀和大小，但不要讓模闆對用戶來說太不尋常和陌生。

如何使用 Atomic Mail Sender 在電子郵件中添加背景圖像？

好吧，您了解了時事通訊的背景以及如何設置它們。 但是在什麼工具中可以測試這些知識並獲得可視化結果呢？ 將 Atomic Mail Sender 用於這些目的。 這個工具有一個內置的 HTML 編輯器。 因此，編寫代碼，直觀地評估結果並立即從同一程序發送時事通訊。 讓我們來看看。


電子郵件 html 背景圖片 在 Atomic Mail Sender 中具有漸變背景的時事通訊
html電子郵件中的背景圖片
Atomic Mail Sender 中的 HTML 編輯器

在 Atomic Mail Sender 程序中使用任何背景的代碼和發送電子郵件。

背景圖像是裝飾電子郵件模板的好方法。 但不要僅用圖像替換電子郵件內容。 不要創建完全基於圖像的電子郵件。 這仍然是一個實際的電子郵件營銷錯誤。 有時您打開一封電子郵件，您看到的只是帶有紅十字的正方形。 當然，我不允許所有發件人的圖片，這意味著我肯定會錯過這封電子郵件，即使這不是詐騙或垃圾郵件。 確保您的電子郵件在沒有圖像的情況下看起來內容豐富且有用。

使用 Atomic Mail Sender 免費電子郵件模板獲取靈感，並創建帶有閃亮背景圖像的自有品牌電子郵件。 如果您在下面的評論中有任何問題，請告訴我們。

在我們的軟件列表中，還有用於收集電話號碼的電話號碼提取器、用於查找有關電子郵件所有者的信息的 whois 電子郵件查找和用於檢查電子郵件地址的電子郵件電子郵件驗證器，使用在線電子郵件檢查器進行在線操作。

想要創建彩色郵件並使用相同的工具發送它們？ 下載 Atomic Mail Sender 的測試版，並通過美觀的時事通訊讓收件人高興！