1. 部落格
  2. 教學與資源

電子報中放圖片,這兩件事你做對了嗎?

對於許多不熟悉 Email HTML 的人來說,Email 可以說是噩夢一場。在不同收信系統、不同裝置上不一致的呈現狀況,頭痛程度實在非常的高。
今天要討論的主題是圖片。對於大部分的品牌來說,圖片是電子報中的必要元素。然而,許多行銷人員並不了解各收信平台上圖片的限制,而造成負面的開信體驗,這對於投入大量時間製作的電子報來說十分的可惜。

圖片大小過大、導致載入過久或是載不出來

通常會有這樣的問題,是因為不了解網頁顯示的圖片與印刷需要的不一樣,在一般的 Email 情境下,你只需要輸出寬度 1000px 以下的 jpg, png, gif,(如果不是動態的 gif)檔案大小最好在 200KB 以下,才是最好的 email 瀏覽體驗。

推薦:圖片壓縮工具

圖片在 Outlook 上呈現的問題

Outlook 是最古老,且令最多人困擾的收信軟體,且因為各種不同 windows 的版本而呈現不同,常見的問題分別為:

  1. 預設圖片不顯示,需使用者授權才進行下載
  2. 會壓縮過大的圖片,在超出限制時會變成一條線,或是會被垂直 / 橫向壓縮。
  3. 寬度過大的圖片需要特別在 html 上面寫上 width=”700″,限制其寬度,避免整封 email 爆出去。

Gmail  的圖片呈現

2019.06.14 update: Gmail 經過迭代,不論是桌機網頁版、手機版 app 已經能夠完好呈現圖片。

如何解決?

針對圖片標籤都需要寫上寬度與 style,例如:

<img width="640" style="max-width: 100%; display: block;" src="" alt="" />

或是你可以使用電子豹的拖放式模板,它將 outlook 圖片呈現問題經由 html, css 調整做最佳的優化,你只需要確保你的圖片大小、內容為最佳的瀏覽體驗。


延伸閱讀:如何透過分析使用者行為,做出更精準的名單分眾?
延伸閱讀:別再怪開信率低了,你的電子報mobile first了嗎?