Проблема с автоматическим выбором избранных изображений в Gmail Grid View
Новое представление Gmail Grid отображает выбранные изображения в сообщениях электронной почты в виде сетки. Я обнаружил случай, когда процедура автоматического выбора изображений в Gmail может перейти в состояние, при котором изображение не будет отображаться в виде сетки, даже если в электронном письме достаточно кандидатов на изображения.
Я считаю, что это вызвано конфликтом между процедурой, которая выбирает изображение, и процедурой, которая обрабатывает изображение.
- При использовании разметки схемы предложений (в обход процесса автоматического выбора) Gmail позволяет использовать изображения размером до 233x161 - это показывает, что минимальный процессор изображения составляет 233x161.
- Для электронных писем без схемы предложения Gmail выбирает изображение в электронном письме размером 100x100, сканируя атрибуты ширины и высоты изображения HTML.
- Если выбрано изображение размером от 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 или более