Оптимизация изображений для email: полное руководство

Почему оптимизация изображений важна в email

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

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

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

Совместимость почтовых клиентов: что поддерживает каждый из них

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

Целевые размеры файлов и максимальная ширина 600 пикселей

Общепринятая максимальная ширина для email-шаблонов, 600 пикселей. Эта ширина корректно отображается в десктопных клиентах и аккуратно масштабируется на мобильных устройствах без появления горизонтальной прокрутки. Любое изображение шире 600 пикселей рискует нарушить вёрстку в Outlook, который не применяет max-width: 100% автоматически.

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

JPEG или PNG для email

JPEG. правильный выбор для фотографического контента: главные баннеры, фотографии товаров, lifestyle-изображения и любые изображения с градиентами или сложными цветовыми переходами. При качестве 75–80 в большинстве кодировщиков JPEG создаёт файлы, достаточно небольшие для достижения цели в 100 КБ, при этом сохраняя отличную визуальную точность при ширине 600 пикселей.

PNG следует оставлять для изображений, требующих прозрачного фона (логотипы, текстовые наложения, иконки с мягкими краями), или изображений с преимущественно однородными цветами и чёткими краями (скриншоты, макеты интерфейсов, графики). PNG является форматом без потерь, что означает предсказуемо большие размеры файлов. фотография товара 300 × 300 пикселей в PNG может легко превысить 150 КБ.

Распространённая ошибка. использовать PNG для фотографий «из-за более высокого качества». При размерах, типичных для email, JPEG с качеством 80 визуально неотличим от PNG для фотографий, тогда как разница в размере файла может составлять от 5 до 10 раз.

Не используйте WebP в качестве основного формата изображений для email. Хотя Apple Mail и Gmail поддерживают его, Outlook и Yahoo. нет, и нет надёжного способа показывать WebP как запасной вариант вместо JPEG для конкретного почтового клиента так, как это возможно с элементом HTML <picture> в браузере.

Анимированные GIF и правило запасного первого кадра

Анимированные GIF остаются единственным широко поддерживаемым форматом анимации в email. CSS-анимации и видео (включая MP4) не поддерживаются стабильно во всех клиентах. Однако Outlook 2007–2021 на Windows не воспроизводит GIF. он отображает только первый кадр.

Это называется правилом запасного первого кадра, и оно имеет прямое значение для дизайна: ваш первый кадр должен быть самодостаточным. Если ваш анимированный GIF раскрывает промокод на третьем кадре, пользователи Outlook его никогда не увидят. Разместите всю ключевую информацию в первом кадре. заголовок, предложение, призыв к действию. и воспринимайте последующие кадры как улучшение для клиентов, поддерживающих анимацию.

Чтобы анимированный GIF оставался меньше 200 КБ: ограничьте количество кадров до 3–5, уменьшите палитру цветов до 64 или 128 (из максимальных 256), ограничьте размеры до 600 × 200 пикселей или меньше, используйте дизеринг не более 50%. Такие инструменты, как ezgif.com и оптимизатор imgpact, автоматически удаляют метаданные и оптимизируют цветовые палитры кадров.

Обходной путь Outlook VML для фоновых изображений

Outlook (настольные версии для Windows) полностью игнорирует CSS-свойства background-image. Если дизайн вашего шаблона опирается на фоновое изображение за текстом. распространённый паттерн для главных секций. пользователи Outlook увидят только запасной цвет фона, лишая дизайн его визуального воздействия.

Стандартное решение. язык разметки векторов Microsoft (VML), устаревший XML-синтаксис, который движок рендеринга Outlook (использующий движок вёрстки Word, а не браузерный движок) понимает. Паттерн оборачивает элемент VML v:rect с атрибутом fill вокруг контента внутри условных комментариев Outlook:

<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"
  style="width:600px;height:200px;">
  <v:fill type="frame" src="https://example.com/hero.jpg" color="#1a1a2e"/>
  <v:textbox inset="0,0,0,0">
<![endif]-->
  <!-- Ваш контент, видимый всем остальным клиентам -->
<!--[if gte mso 9]></v:textbox></v:rect><![endif]-->

Атрибут color у v:fill работает как запасной цвет, если изображение не загрузится. Всегда устанавливайте его таким образом, чтобы текст оставался читаемым.

Alt-текст и чек-лист перед отправкой

Alt-текст не является необязательным в email. Корпоративные среды часто блокируют изображения по умолчанию, а это означает, что значительная часть вашей B2B-аудитории может читать письмо, видя только метки alt-текста. Пишите описательный, ориентированный на действие alt-текст для каждого изображения, особенно для CTA: alt="Летняя распродажа. скидка 40%" намного полезнее, чем alt="image1.jpg".

Используйте этот чек-лист перед каждой отправкой:

• Все изображения размещены на надёжной CDN (не во вложениях письма)
• Ни одно изображение не шире 600 пикселей
• Главные изображения ≤ 100 КБ, общий вес изображений в письме ≤ 600 КБ
• JPEG используется для фотографий, PNG только для логотипов/иконок с прозрачностью
• Нет изображений WebP (используйте JPEG/PNG для максимальной совместимости)
• Первый кадр анимированного GIF содержит весь критически важный контент
• Alt-текст заполнен для каждого тега <img>
• Запасной вариант Outlook VML установлен для всех фоновых изображений
• Протестировано в Apple Mail, Gmail (веб), Outlook 2019 и приложении Gmail на Android
• Общий размер HTML-исходника меньше 100 КБ (чтобы избежать обрезки Gmail)