Картинки позволят быстро передать суть сообщения, привлекают внимание и вызывают эмоции. Но с ними нужно работать аккуратно: если email-письмо будет перегружено изображениями, не адаптированными под экран смартфона, эффективность рассылки снизится.
В статье разберём, как выбирать картинки, как вставлять их в рассылку и какие требования соблюдать, чтобы письмо выглядело корректно на любом устройстве.
Почему важно добавлять картинки в рассылку
Исследования показывают, что люди:
- могут распознать изображение за 13 миллисекунд;
- с большей вероятностью запоминают визуальную информацию, чем текстовую;
- больше верят в правдоподобность текста, если он подтверждается визуалом.
То есть подписчики могут решить, насколько внимательно читать письмо, руководствуясь только визуалом, даже не вчитываясь в текст. Кроме того, если человек бегло взглянул на баннер, он с высокой вероятностью запомнит его содержание.
Поэтому бренды активно используют картинки для оформления писем. Так, правильно подобранный визуал может увеличить кликабельность, конверсию и узнаваемость бренда, повысить шанс на то, что подписчик запомнит содержание письма. И наоборот — если визуал неподходящий, он может отвлечь внимание от главного или неверно передать суть сообщения.
Какие задачи рассылки можно решить с помощью изображений:
- привлекать и удерживать внимание;
- демонстрировать товары и услуги;
- быстрее передавать суть сообщения;
- повышать узнаваемость бренда через фирменный стиль;
- создавать нужный эмоциональный фон.
Как подбирать картинки для писем
Разберём, по каким принципам выбирать картинки, и где их искать.
Какие изображения подходят для email-писем
Картинки должны работать на основную задачу письма. Например, продуктовые подходят, когда нужно показать товар, его детали и контекст использования, а иллюстрации и иконки хорошо работают в образовательных письмах и инструкциях, так как помогают систематизировать информацию.
Вот несколько критериев, которые показывают, что картинка подходит для письма:
- с первого взгляда понятно, о чём идёт речь;
- образы на ней простые и хорошо читаются;
- соответствует брендбуку;
- помогает передать нужные эмоции;
- иллюстрирует идею письма.
Можно вообще отказаться от картинок, если они не добавляют смысла. Например, декоративные изображения в транзакционных сообщениях могут отвлекать внимание и замедлить отображение важной информации.
Как подобрать картинки под разные форматы рассылки
Выбор должен отталкиваться от цели письма. Один и тот же визуал может работать по-разному в продающей, контентной или транзакционной рассылке. Ниже — рекомендации, которые помогут подобрать картинки для разных рассылок.
- Промописьма и акции. Визуал должен показать ценность оффера, уместны крупные изображения с фокусом на продукте, скидке или ключевом преимуществе. Можно вставить картинки с иконками в текст письма, чтобы его структурировать.
- Сервисные письма. Их задача — подтвердить действие или статус пользователя. Поэтому достаточно логотипа и визуального акцента на действии или важной информации.
- Приветственные письма и онбординг. Визуал помогает сформировать первое впечатление, показать продукт, задать тон коммуникации и направить пользователя к следующему действию. Можно вставить в письмо продуктовые изображения, иллюстрации сценариев использования, скриншоты.
- Контентные и образовательные рассылки. Здесь картинки должны структурировать текст и помогать читателю лучше понять тему. Для этого подойдут иллюстрации, схемы, инфографики, иконки.
.png)
Не обязательно строго следовать этим рекомендациям, потому что потребители разные: одним нравится яркие баннеры, другим — минималистичные картинки. Поэтому тестируйте разные варианты оформления рассылки, чтобы понять вашу аудиторию.
Для этого используйте A/B-тесты — сделайте две версии письма с разным оформлением и отправьте небольшой части аудитории. Затем проверьте, на какое письмо лучше отреагировали клиенты, и отправьте эту версию оставшимся. Провести тестирование можно, например, с помощью омниканальной маркетинговой CDP Sendsay.
По каким принципам оформлять изображения в рассылке
Несколько советов по работе с визуалом в целом:
- Использовать фирменные цвета, шрифты, иллюстрации и баннеры, чтобы повысить узнаваемость бренда.
- Не использовать слишком много иллюстраций и не оформлять письмо только картинками. Так будет меньше риск, что письмо попадёт в спам, будет медленно загружаться или картинки будут выглядеть некорректно.
- Структурировать письмо визуалом. Крупные картинки для главной идеи, более компактные — для поддерживающих блоков. Кнопки и призывы к действию визуально отделять от остального контента контрастными элементами.
- Добавлять alt-текст, который будет виден, если визуал не загрузится. Подписчик поймёт смысл, даже если у него отключены картинки.
Какие инструменты использовать для обработки изображений
- Стоки и бесплатные библиотеки позволяют найти красивые картинки, иллюстрации и иконки для письма. Примеры: Unsplash, Pexels, Pixabay.
- Онлайн-редакторы помогают подогнать картинку под нужные размеры, обрезать, наложить текст или фильтры, чтобы визуал соответствовал формату письма. Примеры: Figma или Photoshop.
- Инструменты для сжатия уменьшают вес картинок без потери качества. Например: TinyPNG, ImageOptim, Squoosh.
- Платформы рассылок — у них есть блочные конструкторы и готовые шаблоны, которые упрощают сборку письма: изображения масштабируются под размер блока, картинки сжимаются. Пример: CDP Sendsay.
Технические требования к картинкам для письма
Если вставить слишком тяжёлую или неподготовленную картинку, электронное письмо будет медленно загружаться. Поэтому есть несколько требований к оформлению картинок в письме.
Использовать допустимые форматы изображений для рассылки
Форматы, которые работают в большинстве почтовых клиентах:
- jpg — подходит для картинок с более чем 256 цветами, но теряет качество при сжатии или масштабировании;
- png — подходит для текста, лого и небольших изображений, поддерживает прозрачный фон, сжимается без потери качества, но много весит и не подходит для больших изображений;
- gif — в дополнение к возможностям png ещё и анимируется, но не поддерживает больше 256 цветов.
Подбирать подходящий размер изображения
В теле письма лучше использовать изображения весом не более 5 Мб. Чем легче картинка, тем быстрее прогрузится письмо, поэтому оптимальный вес — 100–150 Кб.
Лучше использовать исходники нужного размера. То есть не менять длину и ширину картинки с помощью HTML-кода и стилей CSS, а задать размеры заранее. У такого решения несколько плюсов:
- картинка отобразится корректно у всех пользователей;
- если изображение не загрузится, на его месте будет прямоугольник такого же размера, и общая вёрстка не изменится;
- не придётся прописывать размеры в коде через «src»;
- картинка не потеряет в качестве при сжатии и не замедлит загрузку рассылки.
Отдельное внимание стоит уделять качеству изображений. Картинки низкого качества выглядят размытыми на экранах с высокой плотностью пикселей (техника Apple, флагманские модели Samsung и так далее). Чтобы этого избежать, стоит использовать картинки с хорошим разрешением до 1200 пикселей в ширину. При этом важно следить, чтобы они не весили много — лучше меньшая чёткость картинок в электронном письме, чем медленная загрузка.
Адаптировать картинки под мобильные устройства
Так как многие читают письма со смартфона, маркетологи используют принцип Mobile First (сначала мобильная версия). Он означает, что первым делом думают о том, чтобы письмо хорошо адаптировалось под размер смартфона, а потом для десктопа. Чтобы следовать этому принципу, нужно использовать адаптивную вёрстку.
Если не разбираетесь в вёрстке через HTML-код, используйте конструкторы писем. Например, в CDP Sendsay есть такой блочный редактор — в нём письмо можно собрать из готовых элементов: текста, кнопок, изображений. Все эти элементы свёрстаны с адаптацией под смартфоны: изображения сохраняют пропорции, текст увеличивается, блоки смещаются, чтобы лучше выглядеть на маленьком экране.
Перетаскивая блоки и меняя их размер, можно собрать письмо для любой цели: приветствия нового подписчика, подтверждения заказа, подборки товаров, промоакции и так далее. Также можно настроить скрытие некоторых блоков на мобильных устройствах, задавать правила масштабирования блоков, вставить картинку в подпись письма, тело или шапку.
Узнать больше про конструктор писем от Sendsay →
Чтобы письмо хорошо выглядело на экране смартфона, стоит придерживаться следующих правил:
- делать письма не более 600 пикселей в ширину;
- важную информацию и призыв к действию размещать в верхней части, так как в мобильной версии письмо становится длиннее;
- создавать изображения так, чтобы они хорошо считывались и на маленьком экране;
- скрывать декоративные и второстепенные картинки, чтобы ускорить загрузку и снизить визуальный шум.
Добавлять alt-текст к картинкам в теле письма
Он отображается на месте изображения, если оно не прогрузилось. Alt-текст можно оформить как фразу, которая поможет понять, что было на изображении. Например: набор керамических кружек — скидка 20% до 10 февраля.
Типичные ошибки при работе с картинками в email-рассылке
Основная ошибка — воспринимать визуал как украшение письма. Его главная задача — помочь быстро донести главную мысль и структурировать информацию. А передать нужные эмоции и настроение, сформировать узнаваемость и сделать письмо более красивым — это второстепенные задачи, к которым нужно переходить после того, как решены первые две.
Вот ещё несколько ошибок в оформлении письма картинками:
- Использовать слишком тяжёлые изображения. Они замедляют загрузку, и подписчик вряд ли будет ждать, пока появится контент. Поэтому важно сразу оптимизировать вес и качество картинок — они должны быть чёткими, но лёгкими.
- Не использовать адаптивную вёрстку. В этом случае на мобильном устройстве блоки могут съехать в сторону, картинки станут слишком маленькими и нечитаемыми.
- Перегружать дизайн. Если картинок много и они хаотично расположены, будет сложно понять, что важно, а что второстепенно.
- Не проверять рассылку перед отправкой. Вес изображений, читаемость текста на картинках, адаптивность и правильная визуальная иерархия — всё это нужно проверить перед запуском рассылки. Для этого нужно отправить себе тестовое письмо на разные ящики.
Главное: как работать с картинками для писем
Основное правило — визуал поддерживает цель письма. Каждое изображение должно усиливать текст, демонстрировать продукт или упрощать понимание информации. Красивые картинки без смысла не помогут сделать письма более эффективными.
Техническая оптимизация обязательна. Небольшой вес изображения, подходящий формат, адаптивная вёрстка — благодаря этому письмо будет быстрее загружаться и корректно отобразится на разных устройствах даже при отключённых картинках.
Частые вопросы о картинках для рассылки
