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

評論
評論

本文作者: 張國基 ,電子豹 CEO 與創辦人, 電子豹是台灣最大的電子報發報平台 ,超過 3500 家企業愛用,並定期觀察與分析全台收件者行為與喜好,隨時監控最新電子報行銷趨勢。領先業界提供個人化優化建議服務,讓每一封信在對的時間用對的方式寄給對的人,電子豹不只是最佳發送平台,更是企業的電子報行銷專屬顧問, 本文原載於此

 

對於許多不熟悉 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 蹂躪…。

feather-label
(圖片來源:Chad Sparkes, CC License)
feather-2048-1536-gmail-app-e1439535483493
放在電子報中寄出,並用 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-e1439536095133

總結

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

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

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

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

歡迎加入「Inside」Line 官方帳號,關注最新創業、科技、網路、工作訊息

好友人數

相關文章

評論