Немного о Retina-дисплее и PPI

В марте 2012 года Apple представила iPad 3. Одной из главных фишек нового устройства стал дисплей Retina, который вызвал немалый ажиотаж и интерес.

Retina — название нового поколения дисплеев в устройствах компании Apple с высоким разрешением ppi. Изначально позиционировались Apple, как идеальные экраны, на которых человеческий глаз не в состоянии различить отдельные пикселы. Но мы-то с вами знаем.

Что такое PPI?

Pixels Per Inch (пикселей на дюйм поверхности) — обозначение, применяющееся для указания разрешающей способности устройства вывода или ввода графики.

Разрешения Apple-устройств с retina-дисплеями

Для счастливых владельцев нового устройства наличие в нём Retina-дисплея значило, что они могут смотреть на нём фильмы в HD-качестве, действительно ощущая разницу. Изображение на новом планшете и в самом деле было роскошным. Но была и оборотная сторона медали.

Большинство веб-сайтов на новых устройствах выглядели не слишком привлекательно.

Примерно такие размытые изображения мы будем видеть на экране с высоким ppi. Все изображения, которые выглядели так четко — что с вами стало?

Казалось бы, сколько там тех владельцев iPad3? Во-первых, никакому нормальному веб-дизайнеру не придется по душе мысль, что у кого-то его сайт выглядит ужасно, ведь этим кем-то вполне может оказаться ваш собственный клиент. Во-вторых, в последнее время появляются устройства других производителей с экранами, обладающими схожими характеристиками. Например, попытка компании Nokia вернуть себе былую славу — модель Lumia 920 с разрешением экрана 332 ppi (и 1280x768 px). Да и владельцев Android-устройств перемены не минуют. Собственно, можно смело говорить о том, что о привычном уже для многих пользователей и дизайнеров разрешении 72 ppi вскоре придется позабыть.

С выходом MacBook Pro и the new iPad стало ясно, что экраны с увеличенной плотностью пикселов начинают свой победоносный марш по планете. И одним из первых изменениям будет подвержен веб.

Давайте попробуем разобраться, как можно решить эту проблему.

Пути решения проблемы

Одним из главных применений планшетов iPad, если не главным, является именно интернет-сёрфинг. И ведь нельзя было презентовать новый планшет, не продемонстрировав, как на нём будут выглядеть сайты. Чтобы эту проблему решить, хитрая компания Apple сделала HD-версию своего сайта.

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

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

У второй же задачи есть несколько решений и тонкостей, о которых мы и поговорим.

Оптимизация графического интерфейса с помощью свойства media-query

Наиболее простым способом заставить сайт выглядеть хорошо на Retina-дисплее является использование свойства media-query, которое позволяет определить минимальное разрешение экрана и размер пикселей. Для этого нам понадобятся специальные параметры CSS — min-device-pixel-ratio и min-resolution.

Допустим, что у нас есть спрайт с несколькими иконками, и мы хотим, чтобы на Retina-дисплее отображались спрайты в высоком качестве, а на устройствах с разрешением 72 ppi — в низком.

Нам понадобится сделать 2 версии этого спрайта, не забыв сохранить пропорции:

Теперь, чтобы устройство пользователя получило необходимое изображение, зададим в нашем css-файле следующие параметры:


span.weather {
    background: url(sprite.png) no-repeat 0 0;
}

span.settings {
    background: url(sprite.png) no-repeat -100px 0;
}

span.contacts {
    background: url(sprite.png) no-repeat -100px -100px;
}

a.favorites {
    background: url(sprite.png) no-repeat 0 -100px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
    span.weather,
    span.settings,
    span.contacts,
    a.favorites {
        background-image: url(sprite@2x.png);
        background-size: 200px 200px;
    }
}

Вуаля, проще простого! С помощью этой проверки, мы сделали так, что для retina-дисплеев теперь будут использоваться индивидуальные стили.

Но, как всегда, есть «но». В примере используется коэффициент соотношения пикселов для устройств Apple. А устройства от других производителей имеют другие коэффициенты. Некоторые Android-устройства — даже весьма необычные. Стоит быть готовым к этому.

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

SVG и иконочные шрифты

Но, естественно, создавать сайт сразу в двух графических разрешениях — трудоёмкая и непростая задача.

Может, есть возможность срезать углы? Ведь каким бы способом мы ни пользовались, растровые изображения остаются ограниченными и не универсальными. Отличным решением проблемы было бы использование векторной графики, а именно — изображений в формате SVG.

SVG (Scalable Vector Graphics standard, стандарт масштабируемой векторной графики) — основанный на XML формат, который призван обеспечить поддержку векторных изображений в веб-технологиях.

Очевидным преимуществом использования изображений в SVG является возможность бесконечного масштабирования без потери качества, что гарантирует, даже при появлении дисплеев Super-Retina-4 с 16-ти-кратной плотностью пикселов, что ваши иконки останутся четкими и плавными.

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

Самые известные генераторы — Icomoon и Fontello.

Вот так выглядит последний этап создания иконочного шрифта на Fontello — по желанию мы редактируем коды для выбранных иконок. На выходе получаем веб-шрифт в трех форматах и готовый к применению css

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

Двигатель прогресса

Очевидно, что появление дисплеев с большой плотностью пикселей — это положительное явление. Вот только беда в том, что сегодня разные производители HD-дисплеев добиваются разной плотности пикселей при той же диагонали экрана. А это подстегивает как разработчиков браузеров внедрять поддержку новых технологий, так и веб-разработчиков использовать новые инструменты. Так что осуществление предсказания Анатолия Попеля о повсеместном использовании векторных изображений в вебе не за горами!