對於許多不熟悉 Email HTML 的人來說，Email 可以說是噩夢一場。在不同收信系統、不同裝置上不一致的呈現狀況，頭痛程度實在非常的高。

今天要討論的主題是圖片。對於大部分的品牌來說，圖片是電子報中的必要元素。然而，許多行銷人員並不了解各收信平台上圖片的限制，而造成負面的開信體驗，這對於投入大量時間製作的電子報來說十分的可惜。

今天的兩位主角都有令人髮指的怪脾氣，分別是 Gmail app（以下皆是指Android 上的 Gmail app）和 Outlook。以下會花一些時間討論他們有什麼與眾不同的地方，還有簡易的解決方案。如果你沒有耐心看測試和分析結果，可以直接到最後一段看結論。

由於每個品牌的情況略有不同，因此這篇文章會討論最常見的情況：一張大圖在最常發生問題的 Outlook 和 Gmail app 上該如何呈現。

Outlook

Outlook 是最古老，且令最多人困擾的收信軟體，常見的問題分別為：

1. 預設圖片不顯示，需使用者授權才進行下載
2. 會壓縮過大的圖片，在超出限制時會變成一條線，或是會被垂直 / 橫向壓縮。

怎麼辦？

1. 關於圖片不主動顯示的情況，我們已經在這篇文章討論過解決方案，請參考。

2. 經過測試後發現，每張圖失效的大小並不一樣，因此並沒有一個確定的值。唯一能知道的是，過大的圖片會被 Outlook 直接壓縮成一條線，因此寄送前請務必進行測試。只要在測試時圖片能夠正常的呈現，就不會有問題。

Gmail APP

—–此狀況在最新版本已被 Gmail 修正—–

相較於 Outlook 的情況，個人認為 Gmail app 的問題更常被行銷人員忽略，個人強烈建議如果沒有在 Gmail app 上檢視過自家電子報的話，可以從今天開始做。

與桌機和 iPhone 上的郵件 app (包含內建郵件 app 和 Gmail app) 不同，Gmail app 會主動將寬超過 330px 的圖片進行水平的壓縮，下圖可以很明顯的看出，我的這位朋友是如何被 Gmail app 蹂躪…。

（圖片來源：Chad Sparkes, CC License）

放在電子報中寄出，並用 Gmail app 開啟後…

“這位可憐的老兄一夜之間長高了好幾倍…”

一般情況下會用到寬 1500 圖片的情況並不多，這裡用的是比較誇張的例子。當然，如果你會使用這麼大的圖片，那你最好現在去看看自己的電子報在手機上長什麼樣子…。

怎麼辦？

將寬設定成 100%，而非固定數值，可以避免圖片在被 Gmail app 壓縮而變形。該怎麼做？如果是直接改 html 原始碼，請參考以下範例

<img src=” feather-2048-1536.jpg” style=”width: 100%;” />

如果是使用編輯器的話，則是將影像屬性 -> 寬度的值設為 100%。這裡使用電子豹的編輯器作為操作範例

經過調整後，這張 2048*1536 的圖片，在 Gmail app 上的呈現結果如下

總結

對於使用單一圖片的電子報來說，進行以下的操作可以簡易和快速的解決 Outlook 和 Gmail app 上圖片顯示不正常的問題，並做到兩者兼顧：

1. 將圖片的寬設為 100%
2. 確認圖片大小不會被 Outlook 壓縮為一條線，或是有垂直 / 橫向的變形。

這麼做或許不能解決 100% 的圖片顯示問題，但是可以讓非技術人員在最快的時間內有效提升圖片的顯示效果。

這些數據皆是透過測試得出。如果你認為有更好的方法，或是數據哪邊有出入，也歡迎一起提出討論。

2015/08/26 更新：在操作時發現 outlook 也會出現壓縮，而非直接變成一條線的狀況。發生這個狀況時即代表 outlook 不接受此圖片的長 / 寬，需要手動縮小原圖。

2016/11/3 更新：目前測試後，Gmail app出現變形壓縮的狀況已經不會再出現，因此圖片設定只需要針對 Outlook 即可。

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

——————————————————————

(Photo Via Robert McGoldrick, CC License)

歡迎加入Facebook 粉絲團，更多優質內容搶先看：