Блокировка изображений в email: что, почему, где, кто и как с этим работать

Если вы занимаетесь email-маркетингом, вероятно, слышали, что не стоит отправлять письма, состоящие только из изображений. На это есть множество причин: письмо может попасть в спам, получатели не увидят его содержимое, это плохо для доступности. Все эти доводы были актуальны. Однако с развитием email-технологий ситуация изменилась. Давайте разберёмся, как эволюция email повлияла на использование изображений и обновим лучшие практики работы с блокировкой изображений в 2021 году и далее.

Я расскажу о:

— Что такое блокировка изображений в email

— Почему изображения не отображаются

— Где они отключены по умолчанию

— Кто блокирует изображения в письмах

— Как оптимизировать письма для случаев, когда изображения отключены

## Что это такое?

Блокировка изображений в email — это практика, при которой изображения в письмах не отображаются из-за настроек почтовых клиентов или корпоративных серверов. В результате изображения не загружаются, как в этом примере с почти отсутствующим ALT-текстом:

Или в этом примере с более качественным ALT-текстом (хотя выглядит это всё равно не идеально, верно?):

## Почему это происходит?

Есть несколько причин, по которым почтовые клиенты блокируют изображения или отключают их по умолчанию. Основная причина — безопасность. Microsoft утверждает, что блокирует изображения, чтобы защитить пользователей от потенциально оскорбительного контента и вредоносного кода. Также они отмечают, что отключение изображений по умолчанию позволяет пользователям с низкой скоростью интернета самим решать, стоит ли тратить трафик на загрузку изображений.

В почтовых клиентах, где изображения включены по умолчанию, многие используют прокси-серверы для хостинга изображений вместо прямой загрузки с внешних источников. Это позволяет проверять изображения на вирусы и вредоносное ПО до их попадания в почтовые ящики, снижая необходимость блокировки изображений как меры безопасности.

Аргумент с экономией трафика всё ещё актуален, но все протестированные нами мобильные почтовые клиенты по умолчанию разрешают загрузку изображений. Пользователям приходится специально настраивать отключение изображений на мобильных устройствах. Это делает ещё более важной оптимизацию изображений для email-маркетологов.

## Где блокируются изображения в email?

Раньше многие почтовые клиенты блокировали изображения по умолчанию. Сегодня основные «виновники» — это десктопные версии Outlook. Большинство других клиентов, за исключением AOL, отображают изображения по умолчанию.

**Веб-клиенты**

*ALT-текст всё ещё подчёркнут.

**Десктопные клиенты**

*В Outlook 2016 изображения были отключены по умолчанию, но мы не проверяли, сохранилась ли эта настройка.

**Это отображается после предупреждающего сообщения и только если изображения отключены. Если изображение повреждено, ALT-текст не отображается.**

**Мобильные клиенты**

*Последний раз проверялось, что изображения включены по умолчанию, но мы не тестировали повторно.

Означает ли это, что письмо только с изображениями — приговор для вашей рассылки? Согласно статистике Email Client Market Share, Outlook занимает 4-е место по популярности среди почтовых клиентов, но на него приходится всего 6% открытий писем. Однако, поскольку Outlook блокирует изображения (и пиксель отслеживания открытий) по умолчанию, мы не знаем, насколько точны эти данные.

Возможно, всё будет в порядке. Но, как и во всём, что касается email, это зависит от вашей аудитории. Если у вас больше среднего подписчиков на Outlook (например, если вы работаете в B2B), могут возникнуть проблемы.

## Кто блокирует загрузку изображений в письмах?

Нет точного способа узнать, какая часть вашей аудитории сталкивается с блокировкой изображений, так как открытия отслеживаются по загрузке пикселя. Если изображение не загружается, открытие не фиксируется.

Согласно нашим предыдущим исследованиям, когда Gmail в 2013 году начал по умолчанию показывать изображения, 43% пользователей Gmail просматривали письма с отключёнными изображениями. Можно ли это считать показателем для пользователей Outlook? Возможно, но мы не знаем наверняка.

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

## Как оптимизировать письма для случаев, когда изображения отключены?

Существует несколько способов кодирования писем, чтобы обеспечить отличный опыт даже в клиентах с блокировкой изображений. Рассмотрим их подробнее.

### Используйте «живой» HTML по максимуму

Лучший способ кодирования писем для максимальной доступности — использовать «живой» HTML. Это означает, что не стоит размещать текст (особенно ключевую информацию) в изображениях. Кнопки и текст должны быть закодированы с помощью HTML, а не создаваться как графика. Используйте изображения только для изображений.

#### Живой текст

Размещайте текст в тегах абзацев и заголовков. Фирменный стиль важен, но не важнее опыта подписчика. Используйте веб-безопасные шрифты, чтобы письма были читабельными.

Magic Spoon отлично справляется с добавлением ALT-текста к изображениям, но было бы ещё лучше, если бы этот текст был оформлен как «живой» в теге

, как это сделала Ace Hardware для более эффективной версии без изображений:

Надеюсь, у них хотя бы есть ALT-текст. Не могу представить, что на улучшение доступности ушло бы больше 1–2 часов. И вы знаете мою позицию… Если вы используете встроенный текст только ради брендинга, вам важнее шрифт, чем подписчики с ограничениями.

— Энн Томлин (@pompeii79) 3 августа 2021 г.

#### Надёжные кнопки

Использование «живого» текста в призывах к действию (CTA) крайне важно. Поскольку CTA — основной драйвер вашего письма, вы должны быть уверены, что они отображаются независимо от того, какой опыт использует подписчик. Используйте надёжные кнопки, чтобы ваши CTA всегда были видны:

#### Фоновые изображения

Не размещайте текст внутри изображений. Но это не значит, что вы не можете создать красивый дизайн. Чтобы получить лучшее из обоих миров, используйте фоновое изображение с «живым» текстом поверх него. Это гарантирует, что ваше сообщение будет понятно даже при отключённых изображениях.

Также добавляйте фоновые цвета к изображениям, чтобы письмо оставалось привлекательным и соответствовало бренду (не стоит оставлять большие белые пространства, если это не ваша задумка). Просто убедитесь, что стилизованный ALT-текст виден на фоне запасного цвета и не теряется. Вот пример:

Кодирование писем с «живым» текстом может быть сложнее, чем просто «вставить изображение», но когда письмо закодировано, изменять текст гораздо проще и быстрее, чем редактировать изображение и загружать его заново. С современными инструментами дизайна писем (например, визуальным редактором Litmus) создавать письма без использования только изображений проще, чем когда-либо.

### Используйте ALT-текст или стилизованный ALT-текст

ALT-текст — это текст, который отображается, когда изображения не загружаются, или зачитывается вслух при использовании скринридера. Как видно из таблицы поддержки выше, ALT-текст поддерживается почти везде. В некоторых клиентах можно даже стилизовать ALT-текст, чтобы он выглядел похожим на текст в изображениях.

Использование ALT-текста помогает пользователям с отключёнными изображениями (и тем, кто использует скринридеры) понять, что изображено. Я часто затрудняюсь с формулировкой ALT-текста для изображений, поэтому вот четыре полезных совета.

**ALT-текст не должен быть сухим.**

Добавьте эмоции в описания ALT-текста, чтобы оживить изображения. Например, посмотрите на это фото:

Вместо «Фото Тейлор Дэвис» используйте «Тейлор Дэвис, запечатлённая в момент неожиданного смеха».

**Учитывайте контекст изображений.**

Да, описание должно быть подробным, но контекст важен. Возьмём это изображение:

«Человек смотрит на телефон, затем крупный план экрана с уведомлением о письме» — неплохой ALT-текст. Но если статья посвящена советам по теме писем, то «всплывающее уведомление с привлекательной темой письма» будет более релевантным и полезным ALT-текстом.

**Оставляйте ALT-текст пустым для декоративных изображений.**

Маркеры на основе изображений или горизонтальные разделители не нуждаются в ALT-тексте. Если изображение чисто декоративное и не несёт функциональной нагрузки, добавление ALT-текста только отвлечёт читателей от основного сообщения.

**Не просите загружать изображения.**

Раньше я думал, что это гениально, ведь загрузка изображений означала получение данных об открытиях:

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

#### Как кодировать ALT-текст

Добавление ALT-текста к изображениям так же просто, как добавление атрибута ALT к тегу изображения:

Стилизованный ALT-текст полезен для изображений, где текст необходим, например, для логотипов:

Чтобы стилизовать ALT-текст, добавьте стили в атрибут style изображения:

Вы можете добавлять размеры шрифтов, семейства шрифтов, цвета и даже фоновые цвета к ALT-тексту, как в этом примере:

### Мозаичное пиксельное искусство

Раньше email-маркетологи использовали стилизованный ALT-текст и вложенные таблицы для создания интересных мозаик или ASCII-арта для версии письма без изображений.

Хотя это выглядит круто, цель ALT-текста не в том, чтобы выглядеть круто. Он должен помогать подписчикам, которые не видят изображения в письмах — либо из-за блокировки, либо из-за использования скринридера.

## Дальнейшие шаги: лучший опыт для всех

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

*Оригинал статьи опубликован 3 октября 2017 года Лорен Смит. Последнее обновление: 17 августа 2021 года.*