对于许多不熟悉 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 蹂躏…。
放在电子报中寄出，并用Gmail app开启后…
“这位可怜的老兄一夜之间长高了好几倍…"
一般情况下会用到宽 1500 图片的情况并不多，这里用的是比较夸张的例子。当然，如果你会使用这么大的图片，那你最好现在去看看自己的电子报在手机上长什么样子…。
怎么办？
将宽设定成 100%，而非固定数值，可以避免图片在被 Gmail app 压缩而变形。该怎么做？如果是直接改 html 原始码，请参考以下范例
如果是使用编辑器的话，则是将影像属性 -> 宽度的值设为 100%。这里使用电子豹的编辑器作为操作范例。
经过调整后，这张 2048*1536 的图片，在 Gmail app 上的呈现结果如下
总结
对于使用单一图片的电子报来说，进行以下的操作可以简易和快速的解决 Outlook 和 Gmail app 上图片显示不正常的问题，并做到两者兼顾：
- 将图片的宽设为 100%
- 确认图片大小不会被 Outlook 压缩为一条线
这么做或许不能解决 100% 的图片显示问题，但是可以让非技术人员在最快的时间内有效提升图片的显示效果。
这些数据皆是透过测试得出。如果你认为有更好的方法，或是数据哪边有出入，也欢迎一起提出讨论。
