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

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

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

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

Outlook

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

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

怎麼辦？

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

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

Gmail APP

相較於 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 原始碼，請參考以下範例

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

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

總結

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

1. 將圖片的寬設為 100%
2. 確認圖片大小不會被 Outlook 壓縮為一條線

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

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

延伸閱讀：善用圖文元素，讓社群網站更給力

原文出處：電子豹（授權轉載）

親愛的讀者們，歡迎加入SmartM電子商務網LINE@，關注最新的電子商務與網路行銷情報，學習不間斷，精采文章不漏接。請用手機點擊「加入好友」連結，或是掃描QR Code加入。

嚴禁抄襲，若欲轉載，敬請註明出處「SmartM」並附上原文連結。

歡迎各大媒體交換文章連結。

圖片來源：主圖、縮圖:lynnalynn0(C.C. Licensed)

加入SmartM粉絲團，更多電商訊息等你關注 https://www.facebook.com/smartm.tw