Вёрстка писем под Retina-дисплеи: как адаптировать и что при этом учитывать

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

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

Что такое Retina-дисплеи и в чём их особенность

Термин «Retina» был представлен корпорацией Apple в 2010 году и поначалу относился только к дисплеям её собственных устройств. Но со временем он вышел за рамки продуктов компании и неформально стал обозначать все экраны с высоким значением DPR (Device Pixel Ratio).

DPR показывает, сколько физических пикселей экрана используется для отображения одного CSS-пикселя:

• на экране с DPR=1 один CSS-пиксель соответствует одному физическому;
  
  
• на устройствах с DPR=2 одному CSS-пикселю соответствуют два физических по горизонтали и два по вертикали, то есть всего четыре пикселя;
  
  
• на дисплеях с DPR=3 — уже девять физических пикселей на один CSS-пиксель.

Предположим, что растровое изображение с разрешением 450×300 px в макете письма отображается как 450×300 CSS-пикселей. На экране с DPR=2 такое изображение займёт 900×600 физических пикселей и из-за этого может визуально «размываться».

Со шрифтами подобных проблем обычно не возникает. Глифы шрифтов описываются векторными контурами и при выводе переводятся в пиксели с учётом плотности экрана. Поэтому визуально текст остаётся качественным в том числе на дисплеях с высокой плотностью пикселей.

Почему это важно для email-рассылок

В email-кампаниях читатели, как правило, первым делом обращают внимание на визуальную составляющую. Поэтому графика в письме играет не менее важную роль, чем адаптивность вёрстки и корректное отображение в разных почтовых клиентах.

Так, фирменные элементы бренда часто содержат тонкие линии, мелкую типографику или сложные графические детали. При отображении на экране с DPR=2 и выше дефекты масштабирования особенно заметны именно в подобных элементах.

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

Для сравнения, ниже — адаптированное изображение, сохраняющее качество детализации при масштабировании:

Это относится не только к брендингу, но и ко всем остальным графическим компонентам письма. Если они выглядят размытыми или присутствует заметная пикселизация, то рассылка воспринимается как небрежная и плохо подготовленная.

Как адаптировать изображения под высокий DPR

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

Например, если отображаемый размер логотипа составляет 150×62 px, графический файл готовят в масштабе 300×124 px. При этом в коде обязательно фиксируют отображаемый размер через атрибуты width и height, чтобы почтовый клиент отрисовал изображение в нужных пределах:

1
<img src="logo2x.png" width="150" height="62" alt="Company logo" style="display:block; border:0;">

Такой логотип будет занимать всё те же 150×62 CSS-пикселя, но за счёт подготовки файла в увеличенном размере изображение сохранит визуальное качество на экранах с DPR=2.

Обычно бывает достаточно увеличения элемента в 2 раза относительно фактического размера: коэффициент закрывает большинство типовых сценариев для современных смартфонов, ноутбуков и планшетов. Теоретически возможно и увеличение в 3 раза, но в email-рассылках оно используется реже, так как при этом растёт и вес файлов.

Что учитывать при адаптации изображений для писем

Подбор нужного формата

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

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

Помимо этого в веб-разработке широко используется формат SVG. За счёт того, что он является векторным, формат не имеет проблем с чёткостью отображения при масштабировании. Однако в email-рассылках SVG практически не используется. Причина — низкий уровень поддержки: ни один популярный почтовый клиент (включая Gmail и Mail.ru) не отображает SVG-иллюстрации.

Компромисс по размеру рассылки

Увеличение размеров изображений неизбежно влияет на вес письма. Чем больше графических элементов используется в рассылке, тем выше их суммарный объём, что сказывается на времени загрузки письма.

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

Текст внутри изображений

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

Проблемы возникают, когда в изображениях размещается основной текст письма:

• Если графический файл подготовлен без учёта Retina-адаптации, текст внутри него может выглядеть размытым.
  
  
• Подобный текст не перестраивается так же гибко, как обычный текст в письме. Масштабирование изображения часто приводит к невозможности его прочитать.
  
  
• Возможны проблемы с тёмной темой: текст в изображении остаётся исходного цвета, в то время как фон и прочие элементы могут быть инвертированы. Таким образом можно получить нечитаемый тёмный текст на тёмном фоне.

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

Заключение

Дисплеи с высоким DPR уже стали обычным явлением, и дизайн рассылок должен это учитывать. Аккуратная подготовка графики делает письма визуально цельными и поддерживает высокое качество отображения на различных типах дисплеев.

Корректно адаптировать шаблоны писем вам поможет наш плагин для Figma. Он позволяет не просто выгрузить готовую вёрстку письма, но и автоматически адаптирует все изображения под Retina-экраны.

А если вы хотите прокачать навыки в email-маркетинге, загляните в наш Telegram-канал: там мы делимся полезными материалами, лайфхаками и идеями для работы.