Адаптируем изображения в email рассылке под Retina

Подружите изображения в ваших email-рассылках с Retina-дисплеями. Сделать это проще, чем кажется.

Только мы привыкли к обилию размеров экранов устройств, как Apple сделали еще один вызов дизайнерам — Retina-дисплей.

Rétina (от лат.retina — сетчатка) — общее маркетинговое название ЖК-дисплеев, используемых в устройствах Apple и отличающихся настолько высокой плотностью пикселей, что человеческий глаз не способен заметить, что изображение состоит из них.

Если вам кажется, что к email-рассылкам это имеет самое последнее отношение — вам кажется. Вот смотрите, это изображение в письме на Retina-дисплее. Слева картинка не оптимизирована, справа — оптимизирована:

Источник: litmus.com

Источник: litmus.com

Размытые и нечеткие картинки в рассылки точно не вызовут доверия и желания что-то у вас купить. Поэтому в работе я использую описанный в этой статье метод.

Изображение превращается… превращается… в Retina

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

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

Рассмотрим такой пример.

В HTML шаблоне мы указали размер изображения 260 на 173 пикселей. Если создать и сохранить картинку именно в таком размере — на Retina-дисплее оно будет выглядеть смазано:

Неоптимизированное изображение

Неоптимизированное изображение

Чтобы это исправить, мы просто делаем изображение в 2 раза больше, т. е. 520 на 346 пикселей. При этом в HTML шаблоне размер остается тот же:

<img styledisplay:block; border:none;» src=»Ссылка на картинку» width260» height173«>

Изображение явно четче, правда? :)

Оптимизированное изображение

Оптимизированное изображение

Но есть одна проблема

Вместе с увеличением размера, растет и «вес» изображения. И это нехорошо. Решить эту проблему можно двумя способами.

Способ 1.

Уменьшить «вес» картинки помогут специальные программы — ImageOptim, JPEGmini, TinyPNGCompressor.io, Kraken или Pied Piper.

Способ 2.

Но я обычно использую более простой способ. В любом графическом редакторе вы можете изменить «вес» картинки при сохранении:

Например, в онлайн-фотошопе

Например, в онлайн-фотошопе

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

А вы заботитесь о своих подписчиках, любителях Apple? Адаптируете картинки под Retina дисплеи?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Дополните выражение: