Понимание Retina-изображений в HTML-письмах

Помимо наплыва различных размеров экранов, мобильная революция принесла с собой еще один интересный вызов для дизайнеров email-рассылок: дисплеи с высоким разрешением (High-DPI). Их часто называют Retina-дисплеями (термин, придуманный Apple), и они могут как улучшить любую email-кампанию, так и испортить впечатление подписчиков от письма.

В этом посте мы подробно разберем, как именно работают дисплеи с высоким разрешением и что это значит для email-дизайнеров и маркетологов.

## Когда появились Retina-дисплеи?

Еще в 2010 году Apple выпустила iPhone 4. Среди прочих улучшений аппаратной части iPhone 4 получил то, что Apple назвала Retina-дисплеем. Retina-дисплей от Apple стал одним из первых дисплеев с высоким разрешением (High-DPI, или высоким количеством точек на дюйм), массово производимых для потребителей.

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

Несмотря на то, что Apple первой представила Retina-дисплей широкой аудитории, другие производители устройств недолго заставили себя ждать. В то время как большинство компаний начали с небольших устройств, таких как телефоны, сейчас Retina-экраны можно встретить на планшетах, ноутбуках и даже настольных компьютерах, таких как массивный 27-дюймовый Retina 5k iMac от Apple.

## Зачем в email нужны Retina-изображения?

Темы писем, текст и частота рассылок играют важную роль в том, как подписчики воспринимают ваш бренд, но именно визуальный контент в первую очередь привлекает людей к email-кампании. Открыв письмо, наши глаза сначала обращаются на дизайн и изображения, и только потом мы начинаем читать текст или нажимать на кнопки призыва к действию (CTA).

Если вы не учитываете дисплеи с высоким разрешением, вы рискуете показаться подписчикам небрежными. Из-за особенностей работы High-DPI-дисплеев неоптимизированные изображения на Retina-экранах выглядят размытыми и пиксельными. Вот пример:

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

## Как использовать Retina-изображения в email

Как именно можно оптимизировать изображения для Retina-экранов? К счастью, это довольно просто.

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

Вот пример.

В наших письмах мы размещаем логотип Litmus в самом верху. С помощью HTML он настроен так, чтобы отображаться в размере 130 на 48 пикселей. Если бы мы создали и сохранили логотип именно в таком размере, подписчики увидели бы на Retina-экранах размытое пятно:

Чтобы логотип оставался четким, мы просто создаем изображение большего размера. В данном случае файл изображения имеет размер 276 на 102 пикселя, но подойдет любой вариант, который как минимум вдвое превышает предполагаемый размер отображения. Затем в нашем HTML мы используем исходный, предполагаемый размер отображения в атрибутах ширины и высоты (width и height), чтобы уменьшить большее изображение:

``

На дисплеях с высоким разрешением мы получаем красивые, четкие Retina-изображения.

### Использование Retina-изображений в Outlook

Некоторые версии Microsoft Outlook по-прежнему отображают Retina-изображения в их полном размере, несмотря на явные размеры, заданные атрибутами width и height. Чтобы обойти эту проблему, вы можете добавить правило max-width в атрибут style изображения.

В приведенном ниже примере мы используем атрибут width (без атрибута height) и max-width, чтобы Retina-изображения корректно работали во всех почтовых клиентах.

``

Вы заметите, что мы добавили стиль width со значением 100%. Это удобный трюк для того, чтобы сделать изображения адаптивными для разных размеров экранов. На больших экранах сработает правило max-width, ограничивающее размер изображения, а на маленьких экранах они заполнят 100% ширины экрана или контейнера.

### Могут ли фоновые изображения быть Retina-изображениями?

Вы можете использовать Retina-изображения в качестве фоновых. Реализация немного сложнее, но принципы остаются теми же.

Однако обратите внимание, что этот подход сработает не везде. Для Retina-фоновых изображений следует использовать CSS-свойство background вместо HTML-атрибута background, например, для ячейки таблицы.

`

`

Фон задается как с помощью сокращенного свойства, так и с помощью отдельных CSS-свойств фона, чтобы учесть некоторые особенности почтовых клиентов Gmail и Android. В обсуждениях на форуме Community представлен отличный обзор методов, доступных дизайнерам, которые хотят создавать великолепные фоновые изображения для High-DPI-дисплеев.

## Что нужно учесть перед использованием Retina-изображений

Удвоение размера изображений помогает гарантировать, что они будут красиво отображаться на Retina-экранах, но у этой техники есть свои недостатки.

При увеличении размеров изображения увеличивается и размер файла. Это может привести к медленной загрузке письма.

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

**Если вам все же необходимо использовать Retina-изображения, есть две техники, которые помогут избежать раздувания размера файлов.**

Первая — и более сложная — заключается в использовании так называемых компрессионных изображений (comressive images). Это изображения, которые сохраняются в огромном разрешении, но с очень низкими настройками качества.

Большинство программ для редактирования изображений позволяют задавать качество при сохранении. Например, в Photoshop вы можете настроить качество JPEG с помощью простого ползунка:

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

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

Некоторые из наших фаворитов включают ImageOptim, JPEGmini, TinyPNG, Compressor.io и Kraken. В большинстве случаев вам нужно просто перетащить или загрузить изображения в программу, и она их сожмет. Затем вы можете загрузить эти оптимизированные изображения в свой ESP (провайдер email-услуг) или на сервер для использования в ваших Retina-готовых кампаниях.