Оптимизация верстки под Retina-дисплеи

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

Теория подготовки сайта к Retina дисплеям

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

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

Если делать дизайн сайта в Photoshop, то разрешение файла должно быть 144 dpi (для двухкратного увеличения). При подготовке изображений для сборки сайта есть несколько решений.

Скрипт Retina

Можно использовать скрипт Retina.js для тегов img.

Как только пользователь открывает страницу сайта, скрипт автоматически проверяет какое разрешение у экрана и какова матрица пикселей. Если у пользователя устройство с Retina дисплеем, он ищет на сервере необходимые файлы изображений и заменяет их на более качественные. Условие таково: изображения для Retina-устройств должны иметь в названиях модификатор @2x, @3х, @4х.

Например, если у вас есть изображение на вашей странице, которое выглядит так:

<img src="/images/filename.png" />

Скрипт проверит ваш сервер, чтобы увидеть, существует ли альтернативное изображение по этому пути:

"/images/filename@2x.png"

Минимальный набор файлов для одного изображения: filename.png, filename@2x.png

При этом изображения могут быть в разных форматах: JPEG, PNG, GIF.

О том как работает данный скрипт написано на странице проекта.

Плагин Retinize It для Фотошопа

Плагин Retinize It оптимизирует графику, что она на сайте выглядело хорошо на iOS с Retina-дисплями.

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

Работать с ним просто:

• Выберите слои или группу слоев
• Запустите Retinize It (можно добавить сочетание клавиш)
• Назовите файлы
• Получите нарезанные изображения для верстки

Специальный -Webkit

Существует специальный -Webkit-image-set от Apple, который позволяет использовать несколько вариантов одного изображения в CSS:
.image {
background-image: -Webkit-image-set(url(example.png) 1x, url(example@2x.png) 2x);
}

Но этот способ не распространяется на изображения внутри тега img.

Скрпипт Picturefill и специальная HTML-разметка

Элементы изображения, атрибуты srcset и размеры и связанные с ними функции позволяют веб-разработчикам предоставлять каждому пользователю подходящее изображение в зависимости от множества условий, таких как размер экрана, размер области просмотра, разрешение экрана и многое другое. Picturefill обеспечивает поддержку элемента изображения и связанных с ним функций в браузерах, которые еще не поддерживают их, поэтому вы можете начать использовать их уже сегодня!

Использование cookie и mod_rewrite

На стороне клиента в первой строке кода делается проверка на определение ретины с установкой cookie:

<script>if(window.devicePixelRatio>=2)document.cookie='retina=1'</script>

Этот скрипт выполнится первым и все дальнейшие запросы на сервер будут содержать строку «retina=1», если мы имеем дело с Ретиной. Все изображения, для которых у нас есть две копии — обычная и ретиновая (в два раза большая) называем одинаково, но с постфиксом «@2x» для большей, при этом в коде указываем данные разрешения для меньшего изображения:

<img src="/images/filename@2x.jpg" width="200" height="300">

Код для Apache:

RewriteEngine On

RewriteCond %{HTTP_COOKIE} !retina=1
RewriteRule (.*)@2x\.(gif|jpe?g|png|webp) $1.$2 [L,NC]

Этот код означает, что если не установлено cookie «retina=1», то нужно убрать постфикс «@2x» из имени картинки.

В итоге, если у нас Ретина, cookie ставится в самом начале, все дальнейшие запросы к серверу идут с ней и картинки грузятся как указано в коде — например, если указано «filename@2x.jpg», то эта картинка и грузится.

Если у нас обычный экран («retina=0»), запросы к серверу идут без cookie и из картинок вырезается постфикс «@2x», т. е. вместо «filename@2x.jpg» загрузится «filename.jpg».

Использование элемента picture

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

Вместо заключения: текст для вставки в ТЗ

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

При этом у них должны быть одинаковые названия, только у изображений для Retina-устройств в названии добавляется модификатор @2x.

Например, набор файлов для одного изображения будет таким: filename.png, filename@2x.png.

Возможные инструменты для реализации:

• Cкрипт Retina.js
• Плагин Retinize It для Photoshop
• -Webkit-image-set от Apple
• Использование элемента picture
• Использование cookie и mod_rewrite