Картинки в email-рассылке: размеры, вес, тёмная тема

Тема письма зарабатывает открытие. Фото товара зарабатывает клик — если оно вообще отрисуется. Почта — самая враждебная среда в маркетинге: десятки клиентов, у каждого свой движок отрисовки, свои настройки блокировки картинок и всё более твёрдое мнение о тёмной теме.

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

Разбираем, как сделать картинки в рассылке правильно: стандарт ширины, дисциплина по весу файлов, alt-текст, который отрабатывает своё, и рабочее решение для ловушки тёмной темы.

Какой ширины делать картинки товаров в письме?

Стандартная ширина контентной области в маркетинговых письмах — 600 пикселей, некоторые современные шаблоны растягиваются до 640. Цифра держится из-за панелей предпросмотра и старых десктопных клиентов, до которых новость про адаптивность так и не дошла. Верстайте под неё.

• Фото товара во всю ширину — экспортируйте в 1200px, показывайте в 600. Двукратный экспорт держит края чёткими на плотных экранах и не меняет вёрстку.
• Сетки в несколько колонок — поделите область в 600px, а затем экспортируйте каждую картинку с двукратной шириной от отображаемой.
• Прописывайте атрибут width явно — часть десктопных клиентов игнорирует размеры из CSS и рисует картинку в её собственных размерах; именно так один забытый экспорт на 2400px взрывает всю вёрстку.

Шире здесь не значит лучше. Картинка в 600px, которая отображается везде, выигрывает у шедевра на 1400px, который не отображается нигде.

Держите вес файлов небольшим

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

• Целитесь в 200 КБ на картинку и меньше, а для всего, что видно без прокрутки, будьте ещё скупее. Аккуратно вырезанные товары на однотонном фоне сжимаются прекрасно.
• JPEG для фотографий, PNG для плоских заливок и вырезок. WebP сжимает лучше обоих — remover.bg умеет его экспортировать, — но поддержка в почтовых клиентах всё ещё неровная, поэтому для кампаний держите мастер-файлы в JPEG и PNG.
• Помните про обрезку в Gmail. Gmail обрезает письма, HTML которых превышает примерно 102 КБ. Картинки на хостинге в этот лимит не входят, но обрезанное письмо прячет всё, что ниже среза, — так что код тоже держите лёгким.

Пишите alt-текст для заблокированных картинок

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

• Опишите товар и суть — «керамический пуровер Terra цвета шалфея» выигрывает у «image1.png» примерно на дистанцию между покупкой и удалением письма.
• Оформите его — многие клиенты выводят alt-текст как живой текст, которому можно задать инлайновые стили: шрифт, размер и цвет, чтобы заблокированная картинка превращалась во что-то осмысленное.
• Не запирайте важное в пикселях — цена, дедлайн и призыв к действию должны быть настоящим текстом. Если картинка заблокирована, предложение обязано работать дальше.

Ловушка тёмной темы: прозрачные PNG в тёмных почтовых клиентах

Вот сама ловушка. Вы экспортируете аккуратную вырезку товара в PNG с прозрачным фоном — для почти любого другого канала это верное решение, как объясняет наше руководство по прозрачным PNG, — и кладёте её в письмо, свёрстанное на белом. А клиент переворачивает этот фон в почти чёрный для пользователей тёмной темы. Ваши графитовые наушники превращаются в еле заметный контур. Чёрный текст логотипа исчезает. А сглаженные края, рассчитанные на белую подложку, светятся бледным ореолом.

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

• Впечатайте подходящий сплошной фон — вместо прозрачности сведите вырезку на осознанно выбранный фирменный цвет. Поставьте её на сплошной цвет в редакторе remover.bg — и клиенту нечего будет инвертировать. Подобрать тон, который держится в обеих темах, поможет наше руководство по цветам фона для фото товаров.
• Добавьте обводку и отступы — тонкий контур или мягкая тень вокруг товаров с тёмными краями оставят их читаемыми, даже если холст перекрасят. Щедрые отступы не дают плотному кадрированию столкнуться с тем, что клиент нарисует вокруг.
• Тестируйте в реальных клиентах — перед каждой кампанией отправляйте настоящие тестовые письма в Apple Mail, Gmail и Outlook с включённой тёмной темой. То, что один клиент уважает, другой жизнерадостно перекрашивает.

Держите вырезки товаров одинаковыми внутри кампании

Кампания редко состоит из одного письма. Анонс, подборка, напоминание «последний шанс» — один и тот же товар появляется четыре-пять раз, и если оформление плывёт от отправки к отправке (тут белый фон, там серый, где-то тень есть, где-то нет), вся серия выглядит собранной из чужих запчастей.

Зафиксируйте одно оформление и применяйте его везде: один цвет фона, одно правило масштаба — какую часть кадра занимает товар, один стиль тени; редактор remover.bg добавляет реалистичные тени, чтобы вырезка стояла в кадре, а не парила. Для больших каталогов HTTP API применяет одинаковую обработку ко всем снимкам автоматически — та же логика автоматизации, которая незаметно перекраивает ИИ в электронной коммерции.

Вывод

Судьба картинок в письме решается четырьмя решениями, принятыми до нажатия «Отправить»:

1. Ширина — верстайте под 600px, экспортируйте в двойном размере.
2. Вес — до 200 КБ на картинку, JPEG или PNG ради максимальной поддержки.
3. Alt-текст — описательный, оформленный, никогда не прячущий предложение.
4. Тёмная тема — впечатайте фон, обведите тёмные края, тестируйте в реальных клиентах.

Сделайте это правильно — и ваши товары будут выглядеть продуманно в любом ящике: в светлой теме, в тёмной, с картинками и без. О большинстве кампаний такого не скажешь.