Адаптация изображений под Retina-дисплеи

Джейсон Родригез, менеджер по продуктам Litmus, рассказал, почему важно адаптировать емейлы под Retina дисплеи. Наш руководитель отдела разработки, Антон Чирков, изучил текст и поделился своими комментариями.

Емейл-маркетологи всё чаще сталкиваются с проблемой, которую вызвала популярность мобильных устройств. Дело не только в разнообразных размерах экранов мобильных, но и в Retina дисплеях с высоким разрешением.

«Retina дисплей» не вполне корректное название. Это маркетинговый термин компании Apple и формально относится только к её продуктам. Однако сейчас его используют для всех экранов с повышенной плотностью пикселей.

Такие дисплеи способны преобразить любое изображение.

Давайте разберёмся как именно работает Retina и чем она полезна дизайнерам и емейл-маркетологам.

Из истории

Вернёмся в 2010 год. Компания Apple выпустила iPhone 4 с Retina дисплеем с высоким разрешением (DPI). DPI — это количество пикселей, которое производитель помещает на дюйм экрана. Чем выше DPI, тем более чёткое и детальное изображение или текст.

После появления Retina дисплеев на устройствах компании Apple, другие производители внедрили эту новинку себе на планшетах, ноутбуках и даже настольных компьютерах.

Какое отношение Retina дисплеи имеют к емейл-маркетингу?

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

Неадаптированные изображения под Retina выглядят расплывчато и нечётко. Это приводит к потере интереса подписчиков.

Как адаптировать изображения под Retina экраны?

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

В качестве примера рассмотрим письмо компании Litmus. В хедере емейла находится логотип, размером 130×48 px. Изображение выглядит размыто для подписчиков с Retina дисплеями.

Сохраните картинку в большем размере для повышения чёткости изображения. Здесь размер 260×96 px. В HTML-коде прописываем размеры отображения логотипа в два раза меньше, чем реальные. В итоге получаем 130×48 px.

<img alt="Litmus" src="logo@2x.png" width="130" height="48" style="font-family: sans-serif; color: #ffffff; font-size: 20px; display: block; border: 0px;" border="0">

В результате на дисплеях с повышенной плотностью пикселей выводится красивое и чёткое изображение.

Очевидные недостатки

Основной недостаток — увеличение веса картинок и времени загрузки емейла.

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

Для retina-изображений указывайте размеры в пикселах, а не в процентах. Иначе могут появиться проблемы отображения в почтовых клиентах outlook 2007/2010/2013/2016.

После сохранения изображений вы можете использовать специальные программы для дальнейшего сжатия: ImageOptim, JPEGmini, TinyPNG, Compressor.io и Kraken.

Вместо заключения

Учитывая современные тенденции, все емейл-сообщений должны быть адаптированы под Retina-дисплеи. Заботьтесь о своих подписчиках, чтобы им не пришлось вглядываться в размытое содержание письма.

Поделиться статьёй
Подписаться на рассылку