Что делать, если у пользователя картинки в почте не открываются

Обновили материал 30.05.2019

Иногда бывает так, что у пользователя картинки в почте не открываются. Это связано с тем, что большинство десктопных почтовых клиентов (Mozilla Thunderbird, Outlook 2007-2016) по умолчанию блокируют загрузку изображений. Так же поступают и веб-интерфейсы Yahoo, Outlook.com и Gmail, если сочтут отправителя ненадёжным или контент письма сомнительным. Чтобы показать изображения, и те и другие требуют подтвердить их загрузку.

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

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

Что делали раньше, если картинки в почте не открываются

Примерно 4 года назад Gmail не загружал картинки по умолчанию. Тогда маркетологи, чтобы мотивировать его пользователей прогрузить их, использовали «мозаичную вёрстку»: прописывали в html-коде таблицу, ячейки которой заливали цветами изображения. Она отображалась вместо заблокированной картинки и представляла собой её пиксельную версию. Это помогало показать задумку письма и стимулировало прогрузить полноценные картинки, чтобы посмотреть их в хорошем качестве.

картинки в почте не открываются
картинки в почте не открываются

Такой приём значительно увеличивал код письма и затруднял мобильную адаптацию. Поэтому в современной емейл-вёрстке его не используют.

Что делать теперь

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

Прописывайте alt-тексты изображений

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

Учтите, что весь текст письма нужно прописывать в html-коде именно текстом, а не вставлять изображением. Иначе пользователь увидит письмо, состоящее только из незагруженных картинок.

Атрибут alt в вёрстке обязателен. То есть он должен присутствовать в html-коде, даже если вы не собираетесь прописывать его значение. Тогда он будет выглядеть так:

alt=””

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

картинки в почте не открываются

Прописывайте стилизацию alt-текстов

Если картинки в почте не открываются, их alt-текст должен гармонировать с остальным текстом и элементами письма. Поэтому пропишите для «альта» такие же или сочетающиеся стилевые свойства: цвет, гарнитуру и размер.

Разберём на нашем письме. Основной его текст набран 16-м шрифтом семейства Arial, чёрным цветом. Тогда alt-текст логотипа следует сделать такого же размера и набрать тем же шрифтом. Но цвет выберем серо-синий — такой же, как цвет самого логотипа. Так мы сохраним общий дизайн письма.

картинки в почте не открываются

Письмо с загруженными картинками
картинки в почте не открываются

Письмо с отключенными картинками

Html-код тогда будет выглядеть следующим образом:

<a href="#" target="_blank" style="color: #4577aa; font-family: Arial, Helvetica, sans-serif; font-size: 16px;"  >
<img src="img/logo.jpg" width="200" height="250" alt="EMAILMATRIX" border="0" style="display: block;" /></a>

Прописывайте размеры и фон, если картинки в почте не открываются

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

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

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

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

В письме ниже компания прописала альтернативный серый цвет для фона кнопки «Ещё», голубой цвет для общего фона и серый цвет для подложки блока текста. Теперь, даже если картинки в почте не откроются, пользователь всё равно увидит акцент на кнопке и цветовую концепцию письма:

картинки в почте не открываются
картинки в почте не открываются

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

  • прописывайте alt-тексты изображений;
  • следите, чтобы они помещались в ширину изображения;
  • прописывайте стилизацию alt;
  • прописывайте ширину и высоту изображений;
  • прописывайте альтернативные цвета для фоновых изображений и элементов, акцентированных цветом.

Всегда думайте, как подписчик будет взаимодействовать с вашим письмом. Сделайте так, чтобы ему было удобно, и тогда вы выделитесь среди конкурентов. Не позволяйте отключенным картинкам всё испортить, как это было у Booking. А чтобы сделать емейл ещё привлекательнее — прочитайте семь наших советов.

Хотите грамотные письма?
Обращайтесь! Поможем
Поделиться статьёй
Подписаться на рассылку