Адаптация изображений под Retina-дисплеи
Обновили материал 14.08.2018
Джейсон Родригез, менеджер по продуктам 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-изображений указывайте размеры в пикселях, а не в процентах. Иначе могут появиться проблемы отображения в почтовых клиентах Оutlook 2007/2010/2013/2016.
После сохранения изображений вы можете использовать специальные программы для дальнейшего сжатия: ImageOptim, JPEGmini, TinyPNG, Compressor.io и Kraken.
Учитывая современные тенденции, все емейл-сообщения должны быть адаптированы под Retina-дисплеи. Заботьтесь о своих подписчиках, чтобы им не пришлось вглядываться в размытые изображения письма.
