Email 行銷圖片：尺寸、檔案大小與深色模式陷阱
行銷郵件裡的商品圖：為什麼 600px 仍是寬度標準、什麼樣的檔案大小才載得動、圖片被擋時的替代文字，以及如何避免深色模式讓透明 PNG 整個消失。
- email marketing
- product images
- dark mode email
- image optimization
- transparent png
- ecommerce
主旨負責讓人打開信。商品圖負責讓人點下去——前提是它真的顯示得出來。Email 是行銷裡最不友善的設計環境：幾十種收信軟體，每一種都有自己的渲染引擎、自己的圖片封鎖預設值，而且對深色模式的意見愈來愈強烈。
在設計工具裡看起來完美無瑕的商品照，寄出後常常變得面目全非：撐破版面、在訊號不穩時載不動、被一個空白灰框取代，或者——最新的經典款——一張透明 PNG 悄悄溶進深色模式的背景裡。
以下說明如何把 Email 行銷圖片做對：寬度標準、檔案大小的紀律、真正派得上用場的替代文字，以及深色模式陷阱的實際解法。
Email 商品圖該做多寬？
行銷郵件的標準內容寬度是 600 像素，部分現代範本會拉到 640。這個數字之所以活到今天，是因為預覽窗格，以及那些從來沒收到「響應式」這則備忘錄的老舊桌面收信軟體。就照這個寬度設計。
- 滿版商品照——輸出 1200px，顯示 600px。2 倍輸出能讓邊緣在高密度螢幕上保持銳利，又不會改變版面。
- 多欄格線——把 600px 的內容區分割開來，然後把每張圖以顯示寬度的兩倍輸出。
- 明確寫上寬度屬性——有些桌面收信軟體會忽略 CSS 的尺寸設定，直接用圖片原始尺寸渲染，一張忘了縮的 2400px 輸出檔就是這樣把整個版面炸掉的。
在這裡，寬不等於好。一張到處都顯示得出來的 600px 圖片，勝過一張哪裡都顯示不出來的 1400px 傑作。
讓圖片檔案保持輕巧
每一 KB 都是訂閱者在行動網路上要繳的稅，而載得慢的主視覺，往往還沒出現就被滑過去了。
- 每張圖控制在 200 KB 以下，第一屏可見的部分要更省。放在單色背景上的乾淨商品去背圖，壓縮效果非常好。
- 照片用 JPEG，單色與去背圖用 PNG。 WebP 的壓縮比兩者都好——remover.bg 也能輸出——但收信軟體的支援度仍然不一致，所以行銷活動還是要保留 JPEG 與 PNG 的母檔。
- 記住 Gmail 的截斷機制。 Gmail 會把 HTML 超過約 102 KB 的郵件截斷。外部託管的圖片不計入這個上限，但被截斷的郵件會把切點以下的所有內容藏起來——所以程式碼也要精簡。
為被封鎖的圖片寫好替代文字
企業內部的 Outlook 和注重隱私的訂閱者，至今仍預設封鎖圖片。這種時候，替代文字就是你全部的視覺層。
- 描述商品，也描述重點——「Terra 鼠尾草綠陶瓷手沖組」和「image1.png」之間的差距，大概就是成交和刪信之間的距離。
- 幫它加上樣式——許多收信軟體會把替代文字當成可以用行內樣式排版的實體文字：設定字體、大小和顏色，讓被封鎖的圖片降級成一個看起來像是刻意設計的東西。
- 絕對別把關鍵資訊鎖在像素裡——價格、截止日期和行動呼籲都該放在真正的文字裡。就算圖片被擋掉，這個優惠也要還能運作。
深色模式陷阱：透明 PNG 在深色收信軟體裡
陷阱是這樣的。你把乾淨的商品去背圖輸出成透明 PNG——在幾乎其他每一個通路上這都是正確做法，正如我們的透明 PNG 指南所說——然後把它放進一封以白底設計的郵件裡。接著收信軟體為深色模式使用者把背景翻成接近黑色。你的碳灰色耳機變成一個模糊的輪廓。你的黑色 Logo 文字消失了。而那些以白底為前提做過抗鋸齒的邊緣，則泛起一圈淡淡的光暈。
更糟的是，各家收信軟體對「深色模式」的定義根本不一致：有的完全不動你的顏色，有的只反轉背景，有的幾乎整封重新上色。你無法控制訂閱者用哪一種收信軟體，所以要做出在全部情況下都活得下來的去背圖。
- 直接把搭配好的單色背景合進去——別直接送出透明圖，而是把去背圖平面化到一個刻意選定的品牌色上。在 remover.bg 編輯器裡把它放到單一顏色上，收信軟體就沒有東西可以反轉了。我們的商品照背景顏色指南能幫你挑一個在兩種模式下都撐得住的色調。
- 加上描邊與留白——在深色邊緣的商品周圍加一道淡淡的描邊或柔和陰影，就算畫布被重新上色也還看得清楚。留白給得大方一點，緊貼邊緣的裁切才不會和收信軟體在四周做的任何處理撞在一起。
- 在真實收信軟體裡測試——每次發送活動前，都實際寄測試信到開了深色模式的 Apple Mail、Gmail 和 Outlook。同一個東西，這家收信軟體會照你的意思顯示，那家就開開心心地重新上色。
讓整檔活動的商品去背圖保持一致
一檔行銷活動很少只有一封信。上市通知、單品聚焦、最後倒數提醒——同一件商品會出現四、五次，而如果每次寄送的處理方式都在飄（這封白背景、那封灰背景、這封有陰影、那封沒有），整個序列就會像是用現成零件東拼西湊出來的。
鎖定一套處理方式，然後到處套用：一個背景顏色、一條決定商品佔畫面多少比例的縮放規則、一種陰影風格——remover.bg 的編輯器會加上逼真陰影，讓去背圖穩穩落在畫面裡，而不是浮著。商品數量龐大時，HTTP API 會自動把完全相同的處理套用到每一張照片上，而這正是悄悄改寫電商中的 AI 的同一套自動化邏輯。
重點整理
Email 圖片的生死，取決於你按下寄送前的四個決定：
- 寬度——照 600px 設計，以 2 倍輸出。
- 檔案大小——每張圖 200 KB 以下，用 JPEG 或 PNG 取得最大相容性。
- 替代文字——有描述性、有樣式，絕不把優惠藏起來。
- 深色模式——把背景合進去、為深色邊緣描邊、在真實收信軟體裡測試。
把這四件事做對，你的商品在每一個收件匣裡看起來都會像是經過深思熟慮的——淺色模式、深色模式、圖片被擋或沒被擋都一樣。多數行銷活動可做不到這一點。
