Как почтовики блокируют изображения

Поделиться →

Email клиенты блокируют изображения, это распространенная практика и многие маркетологи сталкивались с этой проблемой. У некоторых крупных компаний, например таких как Compaign Monitor уже есть отличные списки по клиентам и их работе с изображениями. Вот, например, такой в котором показывается в каких клиентах блокируются изображения, альтернативный текст и его возможная стилизация:

В этой статье мы расскажем о том, как ведут себя почтовики, когда они не показывают изображения в письме по дефолту. Будет представлено не сколько тестов сфокусированных на изображениях, которые показываются с использованием тэга <img>.

 

Удаление атрибута src

Во первых существуют почтовые клиенты которые полностью удаляют src атрибут из элемента <img>. Например, так делают Yahoo, Gmail и новый Outlook вместе с тем который в Office 365. Также так делают и другие почтовики, но только на мобильных версиях писем. Среди всего прочего, некоторые из них будут добавлять ещё один атрибут включающий в себя значение исходного атрибута src. К примеру, некоторые мобильные версии и клиенты любят вот таким образом играться с кодом:

 

<img src="http://site.com/img.jpg" alt="" />

Будет трансформирован в:

<img data-src=" http://site.com/img.jpg" alt="" />

Также некоторые почтовики используют странные атрибуты, такие как «dfsrc». AOL к примеру использует потрясающий атрибут под названием «removedimage_7909i04_4r53gng94-4053tjoj0-oflnkjnkjnk-fd5564vb_g_src» В этом атрибуте для каждого изображения используется индивидуальный код.

Outlook, Gmail и Yahoo же удаляют атрибут src без какой-либо замены.

 

Замена изображения

Но с другой стороны существуют почтовики, которые оставляют src атрибут, но изменяют его значение, оставляя путь для определения самого изображения. Так делал старый Outlook к примеру и некоторые десктопные версии почтовых непопулярных клиентов. Таким образом, предыдущий пример был бы преобразован в такой код:

<img src="https://a.gfx.ms/i_safe.gif" onclick="onClickUnsafeLink(event);" alt="" />

Outlook использует изображение 14х16 пикселей с серым фоном. Некоторые почтовики ставят просто 1х1 пикселей с прозрачным фоном. Такой подход вызывает большие сомнения, потому что в тот момент, когда изображение не показывается – альтернативный текст так же никогда не будет показан в этом случае. А что ещё хуже, использование непрозрачного изображения в старом Outlook означает то, что фоновые цвета, добавленные под это изображение не будут видны.

 

Яндекс же вообще полностью удаляет тэг <img>.

 

Все эти различия очень важно учитывать при создании письма, потому что какое либо письмо из вашей рассылки, да попадёт под рендеринг почтовика, а их поведение в этом случае – как мы уже написали выше, практически всегда отличается в этих случаях с изображениями.

Поделиться →

Принципы психологии, которые должен знать каждый в UX/UI дизайне

8 советов по копирайтингу для мобильных пользователей

Чат-боты и социальные медиа. Новые исследования

Как улучшить транзакционные письма и стать лучше для клиента

Получай лучшие статьи по
интернет-маркетингу на
свою почту