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

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

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

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

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

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

Outlook

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

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

怎麼辦?

  1. 關於圖片不主動顯示的情況,我們已經在這篇文章討論過解決方案,請參考。
  1. 經過測試後發現,每張圖失效的大小並不一樣,因此並沒有一個確定的值。唯一能知道的是,過大的圖片會被 Outlook 直接壓縮成一條線,因此寄送前請務必進行測試。只要在測試時圖片能夠正常的呈現,就不會有問題。

Gmail APP

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

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

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

feather-label

(圖片來源:Chad Sparkes, CC License)

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

feather-2048-1536-gmail-app

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

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

怎麼辦?

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

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

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

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

feather-2048-1536-width-100-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)

發表迴響