Работа с изображениями в почтовых клиентах

Многие клиенты по умолчанию блокируют изображения, пока пользователь не нажмёт «показать изображения». Outlook, Gmail (для неизвестных отправителей) и большинство мобильных клиентов при лимитном подключении вместо них показывают заполнитель. Проектируйте письмо с расчётом на то, что изображения могут не отображаться.

Никогда не встраивайте важный текст (заголовки, подписи CTA, цены) в изображения. Используйте текст HTML со стилями CSS, заданными встроенным способом, чтобы сообщение дошло даже при заблокированных изображениях, программы чтения с экрана могли его прочитать, а инверсия цветов в тёмном режиме корректно применялась.

Каждый <img> должен иметь описательный атрибут alt. Когда изображения заблокированы, альтернативный текст появляется в поле заполнителя — хорошо написанный текст заполняет визуальное пространство сообщением, которое должно было передаваться изображением.

Без явно заданных размеров заполнитель сворачивается, а при загрузке изображения макет смещается. Задайте оба атрибута (и соответствующий встроенный стиль), чтобы ячейка резервировала место независимо от того, будет ли изображение загружено.

Outlook добавляет небольшой промежуток под встроенными изображениями. Применяйте style="display:block" к каждому <img>, чтобы устранить этот промежуток и обеспечить одинаковый вертикальный ритм во всех клиентах.

Старые клиенты добавляют синюю рамку вокруг <a><img></a>. Задайте для изображения атрибут border="0" и встроенный стиль style="border:0", чтобы изображения, обёрнутые в ссылки, аккуратно отображались внутри призывов к действию.

Почтовые клиенты не понимают, что такое «эта страница». Значение src каждого изображения должно быть абсолютным URL https://, указывающим на общедоступный CDN. Локальные и относительные пути, а также URL http:// (смешанное содержимое) без уведомления не загружаются.

Используйте быстрый хостинг изображений, распределённый по географическим регионам. Некоторые клиенты получают изображения через прокси (Gmail), которые добавляют собственный уровень кэширования; собственные CDN предотвращают медленную загрузку с исходного сервера и обеспечивают стабильную загрузку изображений в разных регионах.

Для фоновых изображений главного блока сочетайте CSS-свойство background-image с bgcolor, соответствующим преобладающему оттенку. Если изображение заблокировано, ячейка всё равно показывает подходящий цвет, а текст поверх bgcolor остаётся читаемым — это предотвращает ситуацию с белым текстом на белом фоне.

Создавайте изображения в масштабе 2x и уменьшайте их через атрибут width, чтобы они выглядели чёткими на дисплеях с высокой DPI: исходное изображение 600x600, отображаемое с width="300" height="300", будет чётким на Retina. Недостаток — расход трафика, поэтому уменьшайте размер файлов с помощью сжатия, эквивалентного WebP.

Анимированные GIF работают в большинстве клиентов, кроме Outlook (он показывает только первый кадр). Проектируйте первый кадр так, чтобы он имел смысл как статичное изображение: заголовок, CTA или ключевая ценность должны быть читаемыми даже без остальной анимации.

Почему важный текст (заголовки, подписи CTA, цены) в HTML-письме никогда не следует встраивать в изображения?

Рассматривайте изображения как улучшение, а не как само сообщение. Используйте абсолютные URL https, задавайте width/height/display:block/border:0, пишите содержательный альтернативный текст, размещайте изображения на быстром CDN, сочетайте фоновые изображения с резервными вариантами bgcolor, создавайте изображения в масштабе 2x для Retina и помните, что Outlook останавливает GIF на первом кадре.