PixelCake PixelCake
設計思考與基礎

EDM尺寸規範手冊:2026年技術標準與設計實務建議

完整解析EDM尺寸的業界標準規格,涵蓋寬度600-800px、高度限制、圖文比例等關鍵數值,提供行銷人快速查閱的電子報設計規範參考。

EDM 尺寸規格完整指南:2026 年最新技術規範與實務建議

EDM 電子報的標準尺寸為寬度 600-800px,高度不超過 2000px。這是業界最廣泛採用的規格,能同時相容桌面與手機裝置的顯示需求。以下將提供完整的 EDM 尺寸技術規範,涵蓋圖片規格、程式碼限制、客戶端相容性等關鍵資訊。


EDM 標準尺寸一次搞懂(寬度 × 高度)

EDM 寬度建議設定在 600px 到 800px 之間,高度則以不超過 2000px 為原則,圖文比例維持 3:1 最佳。這組數值並非任意決定,而是根據大多數郵件客戶端的預設顯示區域、以及使用者的閱讀行為長期觀察而得。寬度設在 600-800px 範圍內,能確保 EDM 在桌面信箱(Outlook、Gmail、Apple Mail)開啟時,不需要水平捲動即可完整瀏覽;同時這個寬度在平板裝置上也能保持良好的閱讀體驗。

標準寬度範圍(600px - 800px)

為什麼 EDM 寬度建議落在 600-800px?主要原因是多數主流郵件客戶端的預覽窗格寬度約在 600px 左右。以 Gmail 為例,其桌面版顯示區域寬度約為 600px,如果 EDM 超過這個寬度,就會觸發水平捲動,讓使用者必須左右滑動才能看完內容,大幅降低閱讀意願。寬度低於 600px 又會浪費寶貴的版面空間,讓設計顯得空洞。

值得注意的是,目前手機最小宽度為 320px,若將 EDM 寬度設為 600px,在 320px 寬的手機上顯示時,系統會自動等比例縮小而非破壞版面。這也是為何 600-800px 這個區間被視為「安全區」、往上不會超過桌面預覽寬度,往下不會在最小手機螢幕上出界。

實際操作建議:如果你不確定要設多少,直接選擇 600px 作為基準值。這是最保守也最安全的設定,能確保最大範圍的客戶端相容性。如果你的電子報以圖片為主、圖文比例接近 1:1,可以考慮放寬到 800px;但若以文字內容為主,建議維持在 600-700px 之間,避免長文字行過寬而影響閱讀節奏。

高度與總長度限制

單一畫面建議高度不超過 600px,總長度則不建議超過 2000px。這個限制並非技術無法支援,而是基於使用者體驗的考量。研究顯示,使用者在手機上願意往下捲動的距離有限,超過 2000px 的 EDM 會讓人感覺「永遠滑不完」,進而放棄閱讀。

另一個實務上的原因是:許多郵件客戶端的「預覽模式」只會顯示前 2000px 的內容,超過這個範圍的元素可能被使用者忽略。在桌面環境中,如果 EDM 過長,使用者需要持續往下捲動數秒才能到達結尾,這會增加疲勞感。理想的 EDM 應該讓使用者在 30 秒內完成主要資訊的吸收,其餘延伸內容則可透過 CTA 連結引導至 Landing Page。

如果你的 EDM 確實需要傳達大量資訊,建議將內容拆分成 2-3 封系列信件,而非把所有資訊塞進一封超長 EDM。這不僅能提升開信率(多封信等於多次曝光機會),也能避免資訊過載導致讀者失去興趣。

圖文比例黃金公式(3:1)

文字與圖片的比例建議維持在 3:1 左右、意思是文字內容應佔整體版面的 75%,圖片則佔 25%。這個比例並非強制規定,而是經過長期觀察得出的最佳平衡點:圖片太多會讓 EDM 載入變慢、容易被判定為垃圾郵件;圖片太少則視覺吸引力不足,在資訊爆炸的時代難以抓住注意力。

圖文比例對開信率的影响是間接但顯著的。圖片比例適當的 EDM 通常會有更好的「預覽文字」呈現(因為文字區塊完整),同時圖片載入失敗時不會完全破壞訊息的可讀性。這裡有個常見的設計迷思:很多人以為圖片越多越能吸引目光,但實際上過多圖片會讓 EDM 成為「圖片展示」而非「訊息傳遞」,偏離了電子報的核心目的。

實務上,3:1 的比例意味著:一封長度 1500px 的 EDM,圖片總高度應控制在 375px 以內。如果你需要放入多張圖片,可以將它們以水平排列或小尺寸點綴的方式呈現,而非佔據大面積的單一Banner設計。


手機版 EDM 尺寸對應指南

手機已成為現代人閱讀電子郵件的主要裝置,手機版 EDM 寬度應設計在 320px 到 480px 之間。這是因為目前主流智慧型手機的螢幕寬度(iPhone 14 為例)為 390px,若 EDM 寬度設定過大,手機用戶就必須不斷左右滑動才能完整閱讀,大幅影響使用體驗。

手機螢幕寬度適配原則

手機 EDM 的寬度建議落在 320px 到 480px 之間。320px 是目前最小手機螢幕的寬度基準(iPhone SE 為 320px),而 480px 則能覆蓋大多數 Android 中階手機的螢幕寬度。設計時以 480px 作為最大寬度,可以確保所有手機用戶都能完整瀏覽而不需要水平捲動。

mobile-first(行動優先)的設計趨勢近年更加明顯。根據統計,超过 60% 的 email 開啟行為發生在手機上,這意味著如果你的 EDM 在手機上顯示異常,很可能流失過半的目標讀者。因此建議在設計初期就以手機尺寸作為第一版版型,桌機尺寸則作為寬度放大的響應式調整版本。

平板與桌機的尺寸差異

平板建議寬度為 480px 到 768px,iPad Mini(約 768px 寬度)是主要參考基準。平板用戶的使用情境與手機類似、通常在通勤或移動中閱讀,因此平板版 EDM 的設計原則應與手機版相近,但可以稍微放寬尺寸限制以容納更多視覺元素。

桌機最佳顯示寬度為 600px 到 800px。在桌面環境中,使用者的注意力通常較為集中,螢幕解析度也較高,可以呈現更細緻的圖文設計。但要注意的是,過寬的 EDM(超過 800px)會迫使 Outlook 等客戶端顯示水平捲動軸,這是使用者體驗的大忌。

響應式設計的基本概念

響應式 EDM(Responsive Email Design)是指同一封 EDM 能根據開啟裝置自動調整版面配置。這種技術的原理是透過 CSS 的 Media Query(媒體查詢)語法,在偵測到視窗寬度小於特定數值時,自動套用不同的樣式設定。例如:當視窗寬度小於 480px 時,將圖片寬度從 600px 縮小為 100%、字體大小從 14px 調整為 16px。

然而,響應式設計在 EDM 中的應用比網頁更受限。並非所有郵件客戶端都支援 Media Query、Gmail 的部分版本、Outlook 桌面版對響應式設計的支援度都不佳。因此建議的做法是:確保你的 EDM 在「未響應」的狀態下(即不套用 Media Query),也能在各種裝置上正常顯示。響應式設計應該是「加分」而非「唯一」選項。

實務上,若要同時確保手機與桌機的顯示效果,最保險的策略是使用「彈性寬度」(Fluid Width)設計:將 EDM 寬度設定為百分比(如 100%),搭配 max-width: 800px 的限制,讓版面能自然縮放以適應不同螢幕。


圖片規格與檔案大小優化

圖片是 EDM 視覺設計的核心元素,但也是最容易造成技術問題的地雷區。圖片總大小建議控制在 30KB 到 120KB 之間,單張圖片高度不超過 1728px,圖片總數以 10 張以內為原則。這些數值限制不是任意設定,而是根據郵件客戶端的載入機制與行動網路的傳輸效率综合得出的結果。

圖片尺寸與高度限制

單張圖片高度不建議超過 1728px。這個數值來自於主流郵件客戶端(如 Gmail、Outlook)的解析上限、超過這個高度的圖片可能被截斷或無法正常顯示。在實務設計中,如果需要呈現高解析度的全景圖,建議將其分割成多張圖片垂直排列,而非使用單一超高圖片。

圖片寬度應配合 EDM 版面。舉例來說,如果你的 EDM 寬度設定為 600px,圖片寬度就不應該超過 600px(建議預留 20px 的安全邊距,即最大 580px)。使用超過版面寬度的圖片會導致 EDM 在某些客戶端中版面錯亂,甚至觸發垃圾郵件判定。

圖片檔案大小控制(30KB - 120KB)

整封 EDM 的圖片總大小建議控制在 30KB 到 120KB 之間。這個數值限制是基於兩個考量:首先是載入速度,圖片越大、載入越慢,在行動網路環境下可能造成漫長的載入等待;其次是垃圾郵件過濾機制,許多郵件服務商(特別是企業信箱的 Exchange Server)會掃描附件總大小,過大的圖片可能觸發安全機制而被隔離。

關於單張圖片的大小:如果單張圖片超過 15KB,建議考慮分割成多張較小的圖片。超過 15KB 的圖片不僅載入慢,在 Gmail 等預設封鎖圖片的客戶端中,會讓使用者在點擊「顯示圖片」後看到長時間的載入空白。

圖片數量方面,一封 EDM 建議使用不超過 10 張圖片。圖片越多、連結越多,被垃圾郵件過濾器標記的機率就越高。理想狀態是將圖片數量控制在 5-8 張之間,確保核心視覺元素完整呈現的同時,也降低技術風險。

圖片格式選擇(JPG / PNG / GIF)

JPG 格式適合照片類圖片。JPG 的壓縮率高,能在保持視覺品質的前提下大幅縮小檔案大小,非常適合 EDM 中的人物照片、商品實拍等場景。建議將 JPG 品質設定在 70-80% 之間,既能確保清晰度,也能有效控制檔案大小。

PNG 格式適合需要透明背景的圖片,例如品牌 Logo、圖示按鈕等。PNG 雖然檔案較大,但能保留透明度,在各種背景色的 EDM 版面中都能完美融入。需要注意的是,若 EDM 需要在 Outlook 中正常顯示,PNG 圖片應該避免放在需要透明效果的區塊(因為 Outlook 不完全支援 PNG 透明色)。

GIF 動畫可以為 EDM 增加動態亮點,但數量應控制在 3 個以內。過多 GIF 動畫會延長載入時間,也可能觸發垃圾郵件過濾器的注意。如果使用 GIF,建議將動畫檔案大小控制在 30KB 以內,並避免複雜的逐幀動畫(Frame 數過多會讓檔案暴增)。

圖片 ALT 屬性設定

ALT 屬性是圖片的替代文字,當圖片無法載入時會顯示這段文字。這在 EDM 中特別重要,因為 Gmail、Apple Mail 等客戶端預設會封鎖外部圖片,使用者必須點擊「顯示圖片」才能看到實際圖片。在圖片未載入的這段時間,ALT 文字就是唯一傳遞訊息的方式。

ALT 文字的長度建議控制在 50 字以內。過長的 ALT 文字在某些客戶端中會被截斷,無法完整呈現訊息。撰寫 ALT 文字時應聚焦於「圖片傳達的核心訊息」,例如:一張促銷Banner的 ALT 可以寫「春季新品全面 7 折,限時優惠至月底」,而非單純寫「促銷活動圖片」。

SEO 友善的 ALT 文字應具備描述性與關鍵字適度融入。以行銷角度來看,ALT 文字同時肩負著「當圖片失效時傳遞訊息」與「協助搜尋引擎理解圖片內容」的雙重任務,因此在撰寫時應同時考量這兩個目標。


字體設定與排版規範

字體是影響 EDM 可讀性的關鍵因素,也是最容易因為客戶端差異而產生顯示問題的元素。中文字體最小字号建議為 12px,推薦使用宋體或黑體;英文字體則建議使用 Arial、Helvetica、Georgia 等 Web Safe Font。選擇保守的字體設定,是確保跨客戶端一致顯示的不二法門。

中文字體最小字号規定

中文字體最小不建议小於 12px。在 12px 以下的字号,在手機小螢幕上會變得難以閱讀,對視力較弱的讀者更是造成困擾。實務上,如果 EDM 主要針對行動裝置用戶(如年輕族群),字體可以設定在 14-16px,確保舒適的閱讀體驗。

推薦使用宋體與黑體作為主要中文字體。這兩種字體是 Windows 與 macOS 系統的內建字體,在幾乎所有郵件客戶端中都能正常顯示。避免使用特殊字體(如華康系列、文鼎系列)的理由很簡單:這些字體在收件者的電腦上可能不存在,一旦系統找不到指定字體,就會自動替換成預設字體,造成版面錯亂。

有些設計師喜歡使用粗體或斜體來增加視覺層次,但在 EDM 中,這些效果可能因為客戶端支援度不同而無法正確呈現。如果需要強調某段文字,建議直接使用「全大寫」或「不同顏色」的方式替代。

英文字體與 Web Safe Font

推薦使用的英文字體包括 Arial、Helvetica、Georgia。選擇這些字體的理由是它們屬於「Web Safe Font」、幾乎所有作業系統與瀏覽器都已預設安裝這些字體,能確保跨平台的一致顯示效果。

Web Safe Font 的概念是指在網頁或 Email 中使用、幾乎所有使用者的裝置都能正常渲染的字體。這些字體之所以「安全」,是因為它們已經存在於全球數十億台電腦與手機中。以 Arial 為例,它是 Windows 與 macOS 的標準內建字體,同時也存在於大多數 Linux 發行版中。

如果想要稍微增加設計感,可以考慮使用 Georgia(襯線字體,適合呈現正式感)或 Verdana(無襯線字體,螢幕可讀性佳)。但無論選擇哪種字體,都應該在主要的文案區塊使用系統內建的替代字體作為後備選項,例如:font-family: Georgia, "Times New Roman", serif; 這樣的寫法能確保在 Georgia 不存在時自動切換到 Times New Roman。

色彩模式與解析度

建議使用 RGB 色彩模式,而非 CMYK。這是因為螢幕顯示採用 RGB 模式,如果你設計 EDM 時使用 CMYK 模式,可能會出現色彩偏差問題。舉例來說,你在設計軟體中看到的「飽和紅」在 CMYK 模式下可能是 #e6194b,但在 RGB 螢幕上實際顯示的可能是不同的色調。

解析度建議設定為 72dpi。這是螢幕顯示的標準解析度,與印刷品使用的 300dpi 不同。如果你為 EDM 設計的圖片解析度過高(如 150dpi 或 300dpi),不僅檔案會變大,在螢幕上顯示時也不會比 72dpi 的版本更清晰、因為螢幕本身解析度有限。

CMYK 的潛在風險在實務上經常被忽略。某些設計師習慣將印刷品素材直接用於 EDM,但 CMYK 圖片在 RGB 螢幕上可能呈現暗淡、飽和度不足的問題。如果你的圖片素材來自印刷用途,請先在設計軟體中將色彩模式從 CMYK 轉換為 RGB,再輸出用於 EDM。


HTML 技術限制與程式碼規範

EDM 的 HTML 與網頁 HTML 有本質上的差異。網頁瀏覽器對程式碼的支援度高、容錯性強,但郵件客戶端(尤其是 Outlook)對 HTML 的支援度相對保守。了解這些技術限制,是避免 EDM 顯示異常的第一步。

EDM 絕對禁止的技術元素

JavaScript(腳本語言)絕對禁止使用於 EDM 中。JavaScript 在幾乎所有主流郵件客戶端中都被視為安全威脅而遭到封鎖。無論你的 JavaScript 目的是什麼(動態效果、點擊追蹤、按鈕互動),都不應該寫入 EDM 的 HTML 程式碼中。如果需要互動功能,應使用靜態連結的方式處理。

External CSS(外聯樣式表)也不建議使用。雖然理論上可以透過 <link> 標籤引用外部 CSS 檔案,但多數郵件客戶端出於安全考量會忽略外部樣式表。即使 Gmail 支援外部 CSS,也只限於特定的少數情況。安全的做法是將所有樣式直接內嵌到 HTML 標籤中(Inline CSS)。

I-frame(嵌入框架)應該完全避免。I-frame 曾經是網頁設計的常見技術,但在 EDM 領域它已被所有主流郵件客戶端封鎖。除了安全風險外,I-frame 在行動裝置上的相容性幾乎為零,會導致版面完全錯亂。

Frame Set(分幀頁面)同樣應該避免。這種將瀏覽器視窗分割成多個區塊的技術,在現代郵件客戶端中完全不受支援。過去有些 EDM 設計者使用 Frame Set 來固定版面,但現今這個技術已經走入歷史。

HTML 檔案大小控制(10KB 以內)

HTML 原始碼的大小建議控制在 10KB 以內。這個限制的意義在於:當使用者下載 EDM 時,HTML 程式碼會跟隨郵件一起下載。如果 HTML 過大,會延長下載時間,尤其是在行動網路環境下這會造成明顯的延迟感受。

檢查 HTML 檔案大小的方式很簡單:在文字編輯器(如 VS Code、Sublime Text)中開啟 HTML 檔案,查看檔案大小資訊。另一個更準確的方式是使用線上工具(如「HTML 檔案大小計算器」)來分析程式碼的位元組數。

過大的常見原因包括:過多的 Inline CSS 重複定義、使用 Base64 編碼的圖片(佔用大量字元)、冗餘的 HTML 標籤。解決方式是對 HTML 進行精簡化、移除不必要的空白、壓縮重複的樣式定義、將圖片改為外部連結而非 Base64 嵌入。

內嵌樣式(Inline CSS)的必要性

EDM 需要使用內嵌樣式(Inline CSS),而非外部或內部樣式表。這個要求來自於郵件客戶端的渲染機制:當一封 EDM 被開啟時,客戶端會擷取 HTML 並在隔離環境中渲染。如果樣式不是內嵌的,很多客戶端會忽略這些樣式,導致版面完全崩潰。

表格式版面的概念在 EDM 設計中非常重要。傳統網頁設計使用 <div> 配合 CSS 進行版面配置,但在 EDM 中,<table> 是更可靠的版面元素。建議使用巢狀表格(Nested Table)結構來建立複雜的版面配置,每個區塊都使用獨立的表格包覆,確保版面在各種客戶端中都能保持正確的排列。

背景圖片的使用需要特別注意。當你在 <td> 中使用 background-image 屬性時,強烈建議同時加上 width 與 height 的行內樣式定義。這是因為某些客戶端可能無法正確擷取背景圖片的實際尺寸,導致版面高度計算錯誤。範例:<td background="image.jpg" width="600" height="300">

連結與點擊行為設定

連結應使用標準的錨點標籤 <a>。在 EDM 中,連結是使用者互動的主要入口,必須確保每個可點擊的元素都是有效的 HTML 連結。避免使用圖片熱區(Image Map)或 JavaScript 觸發的連結,這些方式在郵件客戶端中通常無法正常運作。

點擊行為建議使用 target="_blank" 開新窗口。當使用者點擊 EDM 中的連結時,如果沒有特別指定,通常會在當前視窗載入新頁面,這會導致使用者關閉郵件。若希望連結在新視窗中開啟(讓使用者同時保留 EDM),應明確指定 target="_blank"。

避免使用 javascript: 開頭的連結。雖然 JavaScript 在網頁中可以用於各種互動功能,但在 EDM 中這類連結會被完全封鎖。如果需要追蹤點擊,應使用 EDM 發送平台(如 Benchmark Email、Mailchimp)提供的追蹤功能,而非自行撰寫 JavaScript。


主流郵件客戶端相容性攻略

不同郵件客戶端對 EDM 的支援度差異巨大,了解這些差異才能設計出「跨客戶端通用」的 EDM。Outlook 使用 Word 渲染引擎,Gmail 有嚴格的安全機制,Apple Mail 支援度較高但並非完美、掌握這些特性,是避免顯示異常的關鍵。

Outlook 的特殊限制

Outlook(尤其是 Windows 版本的 Outlook 2007-2019)使用 Microsoft Word 作為 HTML 渲染引擎,而非傳統的瀏覽器引擎。這意味著 Word 能正確解析的 HTML 標籤才會正常顯示,Word 不支援的語法則可能被忽略或錯誤呈現。

Outlook 不支援背景圖片。這是設計者經常踩到的地雷、在 Gmail、Apple Mail 中顯示正常的背景圖片,在 Outlook 中會完全消失。解決方案是避免使用 <td background="..."> 或 CSS background-image,改以實心色彩作為替代,或使用「Stacked Image + Color」技術(將圖片與背景色分層處理)。

圖片行距與文字對齊也是常見問題。在 Word 渲染引擎中,圖片與文字的垂直對齊方式可能與預期不同。建議使用 vertical-align 屬性明確指定對齊方式(如 vertical-align="top" 或 vertical-align="middle"),並在圖片外層使用明確的 height 與 line-height 設定來控制間距。

Gmail 的安全機制

Gmail 預設會封鎖外部圖片。這是 Gmail 保護使用者隱私與安全的機制、當使用者收到陌生寄件者的 EDM 時,圖片不會自動載入,以防止追蹤像素收集使用者資訊。因此在 Gmail 中,圖片的 ALT 屬性就成為「圖片未載入時」傳遞訊息的唯一媒介。

Gmail 對 CSS 的支援度較高,但並非全部。Gmail 支援內嵌樣式與部分 Media Query,但 background-image、position: fixed 等進階語法則不完全支援。設計時應以「最基本的功能都能正常運作」為前提,而非依賴 Gmail 的特殊支援。

Gmail 會自動過濾可能為垃圾郵件的內容。圖片過多、連結過多、檔案過大的 EDM 可能被 Gmail 標記為垃圾郵件。除了技術層面的優化,寄件者的信譽、發送頻率、收件者的互動歷史都會影響 Gmail 的垃圾郵件判定。

各客戶端支援度對照表

功能項目OutlookGmailApple MailYahoo Mail
背景圖片不支援支援支援部分支援
動畫 GIF支援支援支援支援
響應式設計有限支援支援支援有限支援
Inline CSS支援支援支援支援
外部 CSS不支援不支援不支援不支援
JavaScript不支援不支援不支援不支援
Media Query不支援支援支援部分支援

最安全的 EDM 設計策略是:以「所有客戶端都能正確顯示的基本元素」為核心設計,進階功能(如響應式設計、背景圖片)則視需求添加,並確保在這些功能無法運作時,核心訊息仍能完整傳遞。


EDM 發送前測試流程與檢查清單

正式發送 EDM 前,必須進行完整的測試流程。即使版面在設計軟體中看起來完美,在不同的郵件客戶端中仍可能出現意外的顯示問題。以下提供系統化的測試方法與必檢查項目,協助你避免發送後才發現問題的窘境。

測試發送的必要性與流程

為何正式發送前必須測試?因為郵件客戶端的渲染引擎與瀏覽器不同,相同的 HTML 程式碼在不同客戶端中可能呈現截然不同的結果。一個在 Gmail 中完美的 EDM,可能在 Outlook 中完全崩潰;同樣的版面在桌面顯示正常,但在手機上可能行列錯位。

測試名單的組成建議涵蓋主要客戶端與裝置類型。至少應包含:Gmail(桌面版與手機版)、Outlook(建議測試 Outlook 2016 或 2019)、Apple Mail(macOS 與 iOS 版)、Yahoo Mail(桌面版)。理想的測試名單應有 5-10 個不同客戶端與裝置的組合。

測試發送的次數建議為:初次完成時發送一次、每次重大修改後重新發送、正式發送前最後確認一次。每次測試後應記錄觀察到的問題與對應客戶端,以便逐步優化 EDM 程式碼。

預覽工具與模擬器

Litmus 與 Email on Acid 是業界最廣泛使用的 EDM 預覽工具。這類工具能提供數十種郵件客戶端的模擬畫面,讓你不需要在實體裝置上逐一測試就能掌握相容性。付費方案通常提供 70+ 種客戶端的預覽功能,對專業 EDM 行銷人員而言是必備工具。

然而,瀏覽器預覽有其局限性。這些工具提供的是「模擬」畫面,而非真實客戶端的實際渲染結果。有時候模擬結果會與實際呈現有細微差異,尤其是涉及進階 CSS 效果時。因此瀏覽器預覽適合作為「快速初步檢查」,但不能完全取代真人測試。

真人測試的重要性在於能發現工具無法偵測的問題。觀察測試名單成員收到的 EDM,確認:圖片是否正常顯示、連結是否可點擊、字體是否有異常、排版是否與預期一致。任何在模擬器上看不出來的問題,都可能在真人測試中浮現。

發送前必檢查項目清單

  • 尺寸規格複查:寬度是否在 600-800px 範圍、總高度是否不超過 2000px、圖片尺寸是否符合規範
  • 圖片連結確認:所有圖片是否已成功上傳、圖片連結是否正確、是否有破圖或連結失效的情況
  • 取消訂閱連結:每封 EDM 必須包含取消訂閱連結,這是 CAN-SPAM 法案的強制要求,也是維護寄件者信譽的基本動作
  • 標題與預覽文字:確認主旨沒有錯字、預覽文字(如有)正確呈現寄件者想傳達的第一印象
  • CTA 按鈕測試:所有 CTA 連結是否可點擊、點擊後是否正確導向目標頁面

這些檢查項目看似繁瑣,卻是確保 EDM 品質的最後防線。建立標準化的檢查清單並確實執行,能大幅降低發送後發現問題的機率。


EDM 尺寸規格快速參考總表

以下整理本文提及的所有關鍵數值,供快速查閱參考。

一目了然的規格速查表

項目建議值備註
寬度600-800px最寬不超過 800px
高度不超過 2000px單一畫面建議不超過 600px
圖文比例3:1(文字 75%:圖片 25%)最佳平衡點
手機寬度320-480pxmobile-first 設計
平板寬度480-768px參考 iPad Mini
圖片總大小30-120KB超過 120KB 可能載入緩慢
單張圖片高度不超過 1728px過高可能被截斷
圖片數量10 張以內建議 5-8 張
GIF 動畫3 個以內過多可能觸發垃圾郵件過濾
ALT 文字長度50 字以內描述圖片核心訊息
HTML 大小不超過 10KB影響下載與讀取效能
中文字體最小12px推薦宋體、黑體
英文字體Arial、Helvetica、GeorgiaWeb Safe Font
色彩模式RGB非 CMYK
解析度72dpi螢幕顯示標準

常見錯誤與修正方式

寬度設太寬(超過 800px)是新手最常犯的錯誤,會導致桌面信箱需要水平捲動才能看到完整內容。修正方式很簡單:將外層表格寬度設為 600px,並使用 max-width: 800px 的限制。

圖片載入失敗通常有兩個原因:圖片連結失效或圖片大小過大。檢查方式是確認所有圖片已成功上傳至主機或圖床,並使用圖片優化工具將檔案大小控制在合理範圍內。

連結失效的檢查方法:逐一點擊 EDM 中的每個連結,確認目的地頁面正確且可正常開啟。常見問題包括:連結多餘的空白字元、URL 大小寫不一致、目標頁面已失效。


一般 EDM 尺寸是多少?

EDM 標準寬度建議設定在 600px 到 800px 之間,高度不超過 2000px。這是業界最廣泛採用的規格,能同時相容桌面與手機裝置的顯示需求。最安全的設定值是 600px,可確保在所有主流郵件客戶端中正常顯示而不需要水平捲動。

手機 EDM 寬度要設多少?

手機版 EDM 寬度建議設計在 320px 到 480px 之間。320px 是目前最小手機螢幕的寬度基準,480px 則能覆蓋大多數 Android 中階手機。設計時建議採用響應式設計,讓 EDM 能根據裝置自動調整版面配置。

EDM 圖片大小有限制嗎?

圖片總大小建議控制在 30KB 到 120KB 之間,單張圖片高度不超過 1728px,圖片總數以 10 張以內為原則。超過 15KB 的單張圖片建議分割成多張較小的圖片,以確保在 Gmail 等預設封鎖圖片的客戶端中能快速載入。

可以使用 JavaScript 在 EDM 裡嗎?

絕對不行。JavaScript 在幾乎所有主流郵件客戶端中都被視為安全威脅而遭到封鎖,包括 Gmail、Outlook、Apple Mail 都無法執行 JavaScript。EDM 中的所有互動功能都應使用標準 HTML 連結實現,而非 JavaScript。

Outlook 顯示異常怎麼辦?

Outlook 使用 Microsoft Word 作為 HTML 渲染引擎,對很多 CSS 語法支援度較低。常見問題包括:背景圖片不顯示、版面錯位、字體替換等。解決方式是避免使用 Outlook 不支援的功能(如背景圖片),並確保所有樣式使用內嵌樣式(Inline CSS)。

EDM 字體最小可以到幾px?

中文字體最小不建议小於 12px,低於這個字号在手機小螢幕上會難以閱讀。推薦使用宋體或黑體作為主要中文字體,因為這兩種字體是 Windows 與 macOS 的內建字體,在幾乎所有郵件客戶端中都能正常顯示。特殊字體應避免使用,以免造成顯示不一致的問題。

為何要控制 HTML 檔案大小在 10KB 以內?

HTML 原始碼大小影響郵件的下載與渲染速度。當使用者下載 EDM 時,HTML 程式碼會跟隨郵件一起下載,過大的 HTML 會延長下載時間,尤其是在行動網路環境下造成明顯的延遲感受。此外,過大的 HTML 可能觸發某些郵件服務商的安全機制。建議移除不必要的空白與冗餘標籤,將 HTML 精簡化。

EDM 正式發送前要做什麼測試?

正式發送前應進行完整的跨客戶端測試,至少涵蓋 Gmail、Outlook、Apple Mail、Yahoo Mail 等主要客戶端。建議使用 Litmus、Email on Acid 等預覽工具進行模擬測試,並邀請真人測試名單在實際客戶端中開啟 EDM 確認顯示效果。每次重大修改後都應重新測試,確保所有連結正確、圖片正常顯示、排版符合預期。

圖片 ALT 屬性是什麼?為什麼重要?

ALT 屬性是圖片的替代文字,當圖片無法載入時會顯示這段文字。在 EDM 中這特別重要,因為 Gmail、Apple Mail 等客戶端預設會封鎖外部圖片,使用者必須點擊「顯示圖片」才能看到實際圖片。在圖片未載入的這段時間,ALT 文字就是唯一傳遞訊息的方式。建議將 ALT 文字長度控制在 50 字以內,聚焦於「圖片傳達的核心訊息」。

EDM 支援 GIF 動畫嗎?

大部分主流郵件客戶端都支援 GIF 動畫,包括 Gmail、Outlook、Apple Mail、Yahoo Mail。但數量應控制在 3 個以內,過多 GIF 動畫會延長載入時間,也可能觸發垃圾郵件過濾器的注意。使用 GIF 時建議將動畫檔案大小控制在 30KB 以內,並避免過多影格的高複雜度動畫。

Gmail 會擋圖片怎麼解決?

Gmail 預設會封鎖外部圖片這是安全機制無法繞過,但可以透過完善 ALT 屬性來確保圖片未載入時訊息仍能傳遞。另一個方式是使用 EDM 發送平台的「圖片快取」功能,讓圖片從同一網域載入,降低被封鎖的機率。此外,確保寄件者信譽良好(正確的 SPF、DKIM 設定)也能提升圖片正常顯示的機率。

圖文比例 3:1 是什麼意思?

圖文比例 3:1 表示文字內容應佔整體版面的 75%,圖片則佔 25%。這個比例是經過長期觀察得出的最佳平衡點:圖片太多會讓 EDM 載入變慢、容易被判定為垃圾郵件;圖片太少則視覺吸引力不足。實務上,3:1 的比例意味著:一封長度 1500px 的 EDM,圖片總高度應控制在 375px 以內。