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

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

Я проведу вас через:

• Что такое блокировка изображений электронной почты
• Почему не отображаются изображения
• Где они выключены по умолчанию
• Кто будет блокировать изображения по электронной почте
• Как оптимизировать под изображения выкл.

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

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

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

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

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

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

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

Где блокируются изображения электронной почты?

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

Клиенты электронной почты

* Текст ALT по-прежнему подчеркивается.

Настольные клиенты

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

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

* Это было в последний раз, когда мы проверяли, но мы не смогли проверить, так ли это до сих пор.

Так является ли электронное письмо только с изображениями смертным приговором для вашего электронного письма? По данным «Доля рынка почтовых клиентов», хотя Outlook является 4-м по популярности почтовым клиентом, на его долю приходится только 6% открытий электронной почты. Но поскольку Outlook блокирует изображения - и, следовательно, открытый пиксель отслеживания - по умолчанию, мы не знаем, насколько это точно.

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

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

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

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

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

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

Как можно оптимизировать электронную почту для выключенных изображений?

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

Максимально используйте живой HTML

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

Живой текст

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

Magic Spoon отлично справляется с тем, чтобы их изображения содержали правильный текст ALT, но было бы очень просто разместить их в виде живого текста в теге <p> для гораздо более впечатляющей версии без изображений, такой как то, что сделала Ace Hardware:

Электронное письмо Magic Spoon с отключенными изображениями	Электронная почта Ace Hardware с отключенными изображениями

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

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

Пуленепробиваемые кнопки

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

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

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

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

Изображения на	Изображения отключены

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

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

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

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

Текст ALT не обязательно должен быть сухим.

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

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

Помните о контексте ваших изображений.

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

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

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

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

Не говорите людям загружать изображения.

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

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

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

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