HTML-письма и Retina экраны

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

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

Размытость изображения и как это устранить

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

Чтобы решить эту проблему, нужно использовать изображения в два раза большего размера, чем они есть в оригинале, а потом уже сжимать его в два раза программными методами.

Например наше изображение должно быть 50 на 50 пикселей. Мы делаем его 100 на 100 и затем прописываем ему в коде 50 на 50. Только, конечно же, не сработает, если вы просто растянете оригинал в два раза, а потом сожмете. Сам оригинал изначально должен быть 100 на 100 и в хорошем качестве.

Вот как это выглядит в коде:

<div id="foo"><img style="width: 100%; max-width: 220px; font-family: sans-serif; color: #ffffff; font-size: 20px; display: block; border: 0px;" src="logo.png" alt="Хорошие письма" width="220" border="0" /></div>

Обратите внимание на свойство max-width. Дело в том, что некоторые Outlook’и не умеют воспринимать таким образом размер и они покажут изображение в оригинальном размере, в два раза больше, чем нам надо. Для этого стоит ограничить изображение при помощи max-width — это сработает.

Важные моменты

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

Увеличивается вес письма

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

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

Понадобится вмешательство специалиста

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

В любой момент может что-то пойти не так

Ну это уже, скорее, как и всегда в верстке писем. Что-то может “поползти”. Лучший способ спасти себя от этого — тестируйте ваши письма. Желательно всегда, так вы обезопасите себя от косяков.

А стоит ли вообще адаптировать под Retina

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