Retina-изображения в email
Половина подписчиков открывает письма на устройствах с дисплеем Retina — iPhone, iPad, MacBook, современные Android-флагманы. На таких экранах обычные изображения выглядят размыто, а текст остаётся чётким. Это заметно и портит впечатление от письма.
Разберём, почему так происходит и как это исправить.
Что такое Retina-дисплей
Retina — маркетинговое название Apple для экранов с высокой плотностью пикселей. Суть в том, что на один логический пиксель приходится два физических (или больше). Коэффициент масштабирования называется device pixel ratio (DPR).
У обычного экрана DPR = 1. У Retina — DPR = 2 или 3. Это значит, что изображение размером 300×200 пикселей на Retina-экране занимает 600×400 физических пикселей. Если картинка содержит только 300×200 пикселей информации, браузер или почтовый клиент растягивает её — отсюда размытость.
Как это выглядит в письме
Текст в письме всегда остаётся чётким, он рендерится как векторный объект. Изображения — нет. Логотип, баннер, иконки, фотографии товаров — всё это растровая графика, которая теряет качество на Retina-экранах, если не подготовить её правильно.
Особенно заметно на логотипах и иконках с тонкими линиями — они выглядят замыленными даже на хорошем контенте.
Как подготовить изображения для Retina
Основной принцип — создавать изображение в два раза большего размера, чем оно будет отображаться в письме, а затем ограничивать его размер через атрибуты HTML.
Если баннер в письме занимает 600 пикселей в ширину, исходное изображение должно быть 1200 пикселей. В HTML прописывается:
<img src=»banner.jpg» width=»600″ height=»300″ alt=»Баннер»>
Браузер отображает картинку в 600 пикселей, но на Retina-экране использует все 1200 — и изображение остаётся чётким.
Для экранов с DPR = 3 (iPhone Pro, некоторые Android) потребуется изображение в три раза больше отображаемого размера. Но на практике двукратного увеличения достаточно для большинства устройств.
Вес изображений и компромисс
Изображение в два раза большего размера весит значительно больше. Это замедляет загрузку письма, особенно на мобильном интернете.
Решение: сжимайте изображения перед отправкой. Форматы JPEG и WebP при правильных настройках сжатия дают хорошее качество при небольшом весе. Инструменты для сжатия: TinyPNG, Squoosh, ImageOptim.
Ориентир по весу: один баннер — до 150 КБ, GIF — до 2,5 МБ, весь HTML-код письма — до 100 КБ. Gmail скрывает письма тяжелее 102 КБ — это жёсткое ограничение.
SVG вместо растра
Для логотипов, иконок и простой графики лучше использовать SVG — векторный формат, который одинаково чётко выглядит на любом экране при любом масштабировании. Вес SVG-файла обычно меньше PNG.
Ограничение: SVG поддерживают не все почтовые клиенты. Gmail на Android и некоторые версии Outlook его не отображают. Поэтому для критически важных элементов лучше держать PNG-запасной вариант.
Как проверить результат
Самый простой способ — отправить тестовое письмо на iPhone или MacBook и посмотреть на изображения. Если они выглядят чётко, всё сделано правильно.
В Letteros можно проверить отображение письма в разных почтовых клиентах прямо в интерфейсе — включая мобильные устройства с Retina-экранами —без отправки тестового письма.
Чек‑лист перед отправкой
Изображения в письме подготовлены в двукратном размере от отображаемого.
В HTML прописаны атрибуты width и height с реальными размерами отображения.
Изображения сжаты — баннер до 150 КБ, общий вес письма до 100 КБ.
Для логотипов и иконок рассмотрен SVG с PNG-запасным вариантом.
Письмо проверено на реальном Retina-устройстве или в превью редактора.
Итог
Retina-изображения — это не сложная техническая задача, а один шаг: готовить картинки вдвое большего размера и ограничивать их через HTML. Это занимает несколько минут, а разница в качестве на современных устройствах заметна сразу.
Читайте также: