Как правильно использовать картинки и фотографии в рассылках

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

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

1. Не украшать, а сообщать

Я не рекомендую вставлять фотографии и другие картинки в рассылки только ради красоты. В некоторых ситуациях это только ухудшает показатели. Например, в маркетинговом агентстве Impact провели тест — отправили по базе одно и то же письмо с картинками и без. Оказалось, что в письмах без картинок показатель кликов к открытиям был в 2,4 раза больше.

Понять, нужны ли вам фотографии и картинки, поможет A/B-тестирование. Отправьте 2 письма (одно с картинками, другое — без) и посмотрите, на какое из них лучше реагирует ваша аудитория.

Разберём несколько примеров, как с помощью фотографий улучшить рассылку: обогатить сообщение и помочь получателю быстрее уловить его смысл.

Создать визуальную иерархию 

В письме всегда есть информация, на которую хочется обратить внимание читателя в первую очередь. Фотографии помогают выделить главное — создать визуальную иерархию. Вот некоторые инструменты, которые для этого используют:

Размер. Чем больше объект, тем важнее он кажется. Поэтому для главного используйте большие фотографии, а для второстепенной информации — поменьше. И чем существеннее окажется разница в размерах, тем будет нагляднее.

Цвет. Яркие цвета притягивают внимание и помогают сделать акцент на главном. Эффект тем сильнее, чем более спокойные тона использованы в рассылке.

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

Воздействовать на чувства

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

Чтобы вызвать ощущения, на которые вы рассчитываете, фотографии должны быть:

• Профессиональными. Необязательно тратиться на фотографа или дорогой фотоаппарат. В большинстве случаев хватит и смартфона, но и на телефон нужно уметь фотографировать. Изучите приёмы, которые помогут сделать фотографии качественными, яркими и запоминающимися.
• Реальными. Стоковые фотографии с наклеенными улыбками или надуманными ситуациями давно вызывают лишь раздражение. Лучше самим взяться за фотоаппарат или же найти что-то менее постановочное в стоках.

Слева явно стоковая фотография грузчика с улыбкой в 32 зуба. Рядом рассылка от «Таких дел». На фотографии — реальные люди, о которых пойдёт речь в статье. Почувствуйте разницу в силе воздействия каждого из этих писем

Персонализировать сообщение

Все email-маркетологи твердят про персонализацию писем. И если обращениями в тексте и индивидуальными подборками товаров уже никого не удивишь, то картинки с именем мне ещё не попадались.

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

2. Сделать удобно получателю

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

Адаптировать под клиенты с отключенными картинками

Согласно исследованиям, 43% пользователей Gmail читают почту с отключенными изображениями. Кто-то блокирует картинки сам, за других это делают почтовые клиенты (например, Outlook). Также картинки не отображаются, если письмо просматривают в папке «Спам».

Письмо от магазина «Акушерство» с картинками и без. Если картинки заблокированы, подписчик ничего не узнает про акции и скидки

Чтобы не допустить потери важной информации и донести суть сообщения даже без фотографий, соблюдайте простые правила:

• Пропишите alt-теги. Это текст, который увидит получатель вместо фотографии, если картинки заблокированы. Полезнее, когда это не просто название или описание фото, а сообщение, которое побуждает к действиям. Например, не «красный свитер», а «скидка 50% на свитера».
• Верхние 5 строк используйте только для текста. Если письмо начинается с большой заблокированной картинки, получатель вряд ли будет искать полезную информацию ниже. Он просто удалит письмо. Поэтому перед картинкой лучше размещать текст с главным сообщением.
• Не переборщите с фотографиями. Яркий пример, к чему это приведёт при отключенных картинках, показан выше (письмо от магазина «Акушерство»). Письма с преобладанием фотографий большинство читателей воспринимает как рекламу, а почтовые службы чаще других отправляют в спам.

Добавить ссылку на веб-версию

Большинство сервисов рассылок позволяют отправлять тестовые письма на любые ящики. Заведите почту хотя бы на самых популярных почтовых сервисах (Mail.ru, Яндекс.Почта, Gmail), чтобы проверять корректность отображения фотографий в каждом из них. Также не забудьте про популярные почтовые клиенты: Outlook, Thunderbird, eM Client, The bat!, Opera Mail.

Какими бы ни оказались результаты проверки, хорошим тоном будет добавить в письмо ссылку на его внешнюю html-версию («Посмотреть в браузере»). Так у читателя всегда будет возможность увидеть письмо таким, каким вы его задумали.

Адаптировать для людей с ограниченными возможностями

Есть интересное расширение для Chrome — Funkify. Оно показывает, как ваши фотографии в письме видят люди с проблемами восприятия. Трудности возникают из-за плохого зрения, дальтонизма и даже яркого солнца (особенно если получатель экономит зарядку). Для каждого из этих случаев сервис моделирует отдельную картинку с помощью различных фильтров.

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

Жаль только тестовый период у расширения всего несколько дней, а у бесплатной версии слишком урезанный функционал.

Адаптировать под телефоны

По данным Litmus, 42% подписчиков проверяет почту на смартфоне. Поэтому убедитесь, что фотографии в рассылке:

• Не содержат мелких деталей, которые потеряются на маленьком экране. Лучше, если на фото есть только один центральный объект. Тогда не придётся долго его разглядывать или увеличивать, чтобы уловить смысл сообщения.
• Кликабельны и ведут на нужную страницу. По картинке попасть гораздо легче, чем по ссылке. Особенно на смартфоне.
• Имеют  минимальный размер для быстрой загрузки. Об этом мы поговорим в следующем разделе.

3. Найти баланс между качеством и скоростью загрузки

Давно миновали времена, когда фотографии размером в 0,5 Мб загружались по 30 минут. И всё же мобильный интернет не всегда работает быстро. А значит, размер всё ещё имеет значение.

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

Формат 

Для фотографий в письме подходят 4 формата: JPEG, PNG, GIF и APNG.  Их поддерживает большинство почтовых клиентов:

• JPEG — специально разработан для фотографий. Подходит для фото без мелких деталей и текста. Удаётся получить минимальный размер файла.
• PNG — оптимален для фото с текстом или прозрачностью. Размер файла больше, чем JPEG.
• GIF — чаще всего используют для сохранения анимации.
• APNG — новый формат для анимации. Поддерживается всеми браузерами и даёт более четкую картинку.

Разрешение

Максимальная ширина фотографии для рассылки ограничена шириной письма. Обычно это около 600 px. Однако фото лучше сохранять в двойном размере, а уже в коде указывать нужный атрибут width (он отвечает за ширину). Если этого не сделать, то на айфонах, макбуках и других устройствах с экранами типа Retina (повышенной плотностью пикселей) фотографии будут смотреться размыто.

Объём

Когда картинка сохранена в нужном формате и разрешении, попробуем сжать её ещё больше с помощью сервисов: Tinypng, Optimizilla, GIF Compressor (для гифок).  Например, используем Tinypng:

Визуально разница между фотографиями воробья не заметна. При этом фото справа весит на 30% меньше благодаря сжатию в сервисе Tinypng

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

Вывод

Фотографии помогают достигать поставленных целей в рассылке, если их правильно используют:

1. Создают визуальную иерархию за счёт размера, цвета или направления взгляда.
2. Воздействуют на чувства благодаря реальным ситуациям в кадре.
3. Персонализируют сообщения, чтобы сделать рассылку более интересной.
4. Адаптируют под различные устройства и для людей с ограниченными возожностями.
5. Думаю о размере и качестве, чтобы фотографии быстро загружались и хорошо выглядели.