新的 Gmail 网格视图在类似页面的网格中显示电子邮件中的选定图像。我发现Gmail的图像自动选择例程可能会进入导致网格视图中没有图像显示的状态,即使电子邮件中有足够的候选图像。
我相信这是由选择图像的例程和处理图像的例程之间的冲突引起的。
- 使用 Offer 架构标记(绕过自动选择过程)时,Gmail 允许我使用小至 233x161 的图像 - 这表明图像处理器的最小值为 233x161。
- 对于没有 Offer 架构的电子邮件,Gmail 通过扫描 HTML 图像的宽度和高度属性来选择电子邮件中小至 100x100 的图像。
- 如果选择了介于 100x100 和 233x161 之间的图像,则永远不会呈现该图像,从而导致电子邮件中可能包含其他较大图像的电子邮件在网格视图中显示而没有特色图像。
这就是我如何得出这个结论的。
这是我所指的代码:
<html><body>
<table border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tr>
<td align="center" valign="top" bgcolor="#ffffff">
<table width="560" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img style="display:block;" src="http://f.e.ae.com/i/35/2075863384/AE_Email_140326_3_header_01_01.gif" alt="American Eagle Outfitters" width="154" height="74" border="0"></td>
</tr>
</table>
<table width="560" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr>
<td><a href="http://e.ae.com/a/hBTOriFB7uylYB85J-eNut-HqBq/aeo12?AAP_FLAG=N&CUSTOMER_NBR=1317324495393" target="_blank"><img style="display:block;" src="http://f.e.ae.com/i/35/2075863384/AE_Email_140326_3_header_02_01.gif" alt="Men" width="58" height="43" border="0"></a></td>
<td><a href="http://e.ae.com/a/hBTOriFB7uylYB85J-eNut-HqBq/aeo13?AAP_FLAG=N&CUSTOMER_NBR=1317324495393" target="_blank"><img style="display:block;" src="http://f.e.ae.com/i/35/2075863384/AE_Email_140326_3_header_02_02.gif" alt="Women" width="91" height="43" border="0"></a></td>
<td><a href="http://e.ae.com/a/hBTOriFB7uylYB85J-eNut-HqBq/aeo7a?AAP_FLAG=N&CUSTOMER_NBR=1317324495393" target="_blank"><img style="display:block;" src="http://f.e.ae.com/i/35/2075863384/AE_Email_140326_3_header_02_03.gif" alt="Aerie" width="78" height="43" border="0"></a></td>
<td><a href="http://e.ae.com/a/hBTOriFB7uylYB85J-eNut-HqBq/aeo11?AAP_FLAG=N&CUSTOMER_NBR=1317324495393" target="_blank"><img style="display:block;" src="http://f.e.ae.com/i/35/2075863384/AE_Email_140326_3_header_02_04.gif" alt="Shoes" width="83" height="43" border="0"></a></td>
<td><a href="http://e.ae.com/a/hBTOriFB7uylYB85J-eNut-HqBq/aeo10?AAP_FLAG=N&CUSTOMER_NBR=1317324495393" target="_blank"><img style="display:block;" src="http://f.e.ae.com/i/35/2075863384/AE_Email_140326_3_header_02_05.gif" width="120" height="43" alt="Clearance" border="0"></a></td>
<td><a href="http://e.ae.com/a/hBTOriFB7uylYB85J-eNut-HqBq/aeo8a?AAP_FLAG=N&CUSTOMER_NBR=1317324495393" target="_blank"><img style="display:block;" src="http://f.e.ae.com/i/35/2075863384/AE_Email_140326_3_header_02_06.gif" width="130" height="43" alt="AEO Factory" border="0"></a></td>
</tr>
</table>
<table width="560" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr>
<td><a href="http://e.ae.com/a/hBTOriFB7uylYB85J-eNut-HqBq/aeo9b?AAP_FLAG=N&CUSTOMER_NBR=1317324495393" target="_blank"><img style="display:block;" src="http://placehold.it/560x117" alt="Just Because It's April 1st Doesn't Mean It's April Fools..." width="560" height="117" border="0"></a></td>
</tr>
</table>
BANNER 1 560x117 (above)<BR><BR>
<table width="560" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr>
<td><a href="http://e.ae.com/a/hBTOriFB7uylYB85J-eNut-HqBq/aeo9c?AAP_FLAG=N&CUSTOMER_NBR=1317324495393" target="_blank"><img style="display:block;" src="http://f.e.ae.com/i/35/2075863384/AE_Email_140326_3_body_01.gif" alt="Est. 2014 | American Beagle Outfitters" width="560" height="209" border="0"></a></td>
</tr>
</table>
<BR>BANNER 2 560x209 (above)<BR><BR>
</td>
</tr>
</table>
</body></html>
此电子邮件包含两个“主要图像”:
- 560x117
- 560x209
如果您将此电子邮件发送给自己,则不会有特色图片。
但是,如果您将 560x117 中引用的图像替换为高于 161 像素的图像,即。560x162 然后 560x162 图像将出现在网格视图中。
这使我相信正在发生以下情况:
- 图像选择例程选择了 560x117 图像,因为它“超过”了其最小尺寸 (100x100)。
- 然后它将它发送到图像处理器。
- 在第一种情况下,处理器检索到图像并发现其小于其最小尺寸(233x161)并拒绝它,并且在网格视图中没有显示图像。
- 在第二种情况下,当检索图像时,虽然 HTML 的宽度和高度属性显示其为 560x117,但图像处理器检索图像并将实际图像尺寸检测为 560x162。由于这高于其最小值,图像被处理并显示在网格视图中。
我添加了第二张图片以表明,如果您仅删除第一张图片(在单独的测试中),则将显示 560x209 的图片 - 这让我相信第一张图片会导致问题,因为最初根本没有图片。
可能的解决方案:
- 将图像自动选择例程更改为仅选择 233x161 或更大的图像