對於許多不熟悉 Email HTML 的人來說，Email 可以說是噩夢一場。在不同收信系統、不同裝置上不一致的呈現狀況，頭痛程度實在非常的高。
今天要討論的主題是圖片。對於大部分的品牌來說，圖片是電子報中的必要元素。然而，許多行銷人員並不了解各收信平台上圖片的限制，而造成負面的開信體驗，這對於投入大量時間製作的電子報來說十分的可惜。
今天的兩位主角都有令人髮指的怪脾氣，分別是 Gmail app（以下皆是指Android 上的 Gmail app）和 Outlook。以下會花一些時間討論他們有什麼與眾不同的地方，還有簡易的解決方案。如果你沒有耐心看測試和分析結果，可以直接到最後一段看結論。
由於每個品牌的情況略有不同，因此這篇文章會討論最常見的情況：一張大圖在最常發生問題的 Outlook 和 Gmail app 上該如何呈現。
Outlook
Outlook 是最古老，且令最多人困擾的收信軟體，常見的問題分別為：
預設圖片不顯示，需使用者授權才進行下載
會壓縮過大的圖片，在超出限制時會變成一條線
怎麼辦？
關於圖片不主動顯示的情況，我們已經在這篇文章討論過解決方案，請參考。
經過測試後發現，每張圖失效的大小並不一樣，因此並沒有一個確定的值。唯一能知道的是，過大的圖片會被 Outlook 直接壓縮成一條線，因此寄送前請務必進行測試。只要在測試時圖片能夠正常的呈現，就不會有問題。
Gmail APP
相較於 Outlook 的情況，個人認為 Gmail app 的問題更常被行銷人員忽略，個人強烈建議如果沒有在 Gmail app 上檢視過自家電子報的話，可以從今天開始做。
與桌機和 iPhone 上的郵件 app (包含內建郵件 app 和 Gmail app) 不同，Gmail app 會主動將寬超過 330px 的圖片進行水平的壓縮，下圖可以很明顯的看出，我的這位朋友是如何被 Gmail app 蹂躪…。
“這位可憐的老兄一夜之間長高了好幾倍…"
一般情況下會用到寬 1500 圖片的情況並不多，這裡用的是比較誇張的例子。當然，如果你會使用這麼大的圖片，那你最好現在去看看自己的電子報在手機上長什麼樣子…。
怎麼辦？
將寬設定成 100%，而非固定數值，可以避免圖片在被 Gmail app 壓縮而變形。該怎麼做？如果是直接改 html 原始碼，請參考以下範例
<img src=" feather-2048-1536.jpg" style="width: 100%;" />
如果是使用編輯器的話，則是將影像屬性 -> 寬度的值設為 100%。這裡使用電子豹的編輯器作為操作範例。
經過調整後，這張 2048*1536 的圖片，在 Gmail app 上的呈現結果如下
總結
對於使用單一圖片的電子報來說，進行以下的操作可以簡易和快速的解決 Outlook 和 Gmail app 上圖片顯示不正常的問題，並做到兩者兼顧：
將圖片的寬設為 100%
確認圖片大小不會被 Outlook 壓縮為一條線
這麼做或許不能解決 100% 的圖片顯示問題，但是可以讓非技術人員在最快的時間內有效提升圖片的顯示效果。
這些數據皆是透過測試得出。如果你認為有更好的方法，或是數據哪邊有出入，也歡迎一起提出討論。
|
|
