Как верстать под ретину. Адаптирование верстки для retina-экранов

После появления устройств с дисплеями высокого разрешения, например, iPhone, iPad, Samsung Galaxy Note II и, конечно же, MacBook Pro с Retina дисплеем, перед веб-разработчиками и просто блогерами встал вопрос о нормальном отображении их сайтов на этих устройствах. Ниже я расскажу, как я добавил поддержку дисплеев высокого разрешения на своих сайтах.

Сначала надо уточнить, что такое дисплеи высокого разрешения (Retina - это маркетинговое название для high-resolution дисплеев, используемых в технике Apple). У обычных дисплеев, например, на ноутбуке с диагональю в 15 дюймов, разрешение экрана составляет 1440×900. Это значит - матрица монитора состоит из пикселей (точек) и по длине эта матрица имеет 1440 точек, а по высоте 900 точек.

Всё просто, но с появлением hi-res дисплеев всё стало чуть сложней. Для того, чтобы человеческий глаз видел не пиксели, а изображения, как на страницах журнала или на настоящей фотографии, появились дисплеи, у которых для тех же 15 дюймов физическое разрешение экрана равно 2880×1800 точек. Ровно в два раза больше, чем у обычного монитора. При отображении векторной графики , например, элементов интерфейса, шрифтов, рамок, сделанных при помощи CSS на веб-страницах, всё выглядит красиво и замечательно, а вот при отображении растровой графики , то есть картинок, не всё так гладко.

На обычных мониторах картинка 300 на 200 точек также и отобразится на мониторе - 300×200, конечно же, если её не масштабировать. На hi-res же матрицах картинку 300 на 200 можно отобразить двумя способами.

• Как картинку с разрешением 600×400 пикселей, тогда она будет занимать на экране ровно столько же места, как и на обычном мониторе.
• Как картинку с разрешением 300×200, но тогда она будет на hi-res мониторе занимать в два раза меньше места, чем на обычном. То есть она будет в два раза меньше по размеру, потому что hi-res дисплеи, имея в два раза большее разрешение, по размеру совпадают с обычными дисплеями.

Вариантом по умолчанию при отображении веб-сайтов является первый - все изображения увеличиваются в два раза. Из-за чего все изображения на сайте: фотографии, а особенно иконки и логотипы - становятся размытыми, пример чего я привёл в начале статьи.

Для того, чтобы ваш сайт отображался идеально на всех устройствах, в том числе и с hi-res дисплеем, достаточно все изображения хранить в два раза большем размере, а в html указывать актуальный размер отображения:

или в CSS:

Image-class { background-image: url(/image-600x400.png); background-size: 300px 200px; }

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

Чтобы пользователям с обычными дисплеями отдавать обычные изображения, а с hi-res - изображения в два раза большего размера, я использую JavaScript retina.js . Исходный скрипт находится по адресу retinajs.com , но там в некоторых местах нужны были правки, которые уже присутствуют в моей версии скрипта.

Этот скрипт во время загрузки страницы проверяет, имеет ли ваше устройство дисплей высокого разрешения, и в случае положительного результата – есть ли на вашем сервере эти же изображения, но с именем, оканчивающимся на @2x (это стандартное обозначение изображения в два раза большего размера, для Retina устройств). То есть для изображения src="http://site.com/images-directory/image.png" скрипт проверит наличие http://site.com/images-directory/[email protected] , и если это изображение найдено, отобразит его на странице, задав необходимые значения ширины и высоты (width и height).

Чтобы использовать скрипт, загрузите его к себе на сервер и укажите как можно ближе к закрывающему тэгу :

Для тех, кто использует CSS препроцессор {less} , может пригодиться миксин , чтобы лишний раз не копипастить.

Если вы нашли ошибку или у вас остались какие-то вопросы, не забудьте написать об этом в комментариях.

Рассказываю, как быстро оптимизировать изображения сайта под качественное отображение на дисплеях Retina, используемых на новых MacBook, iMac, iPhone, iPad и т.д. Как обычно, перед этим немного теории и моих практических советов.

Начнем с определения:

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

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

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

На мой взгляд, адаптация растра - это не совсем разумный подход. Я считаю, что уже давно пришло время избавляться от него в интерфейсе и полностью переводить его элементы в векторную графику. Например, в SVG . Кроме того, с помощью новых стилей CSS3 можно избавиться от растровой мазни в градиентах, тенях на кнопках и других элементах интерфейса. Некогда популярные на рубеже столетий растровые иконки тоже уже давно умерли и используются разве что отсталыми любителями. На смену им пришел все тот же векторный SVG и столь любимые веб-разработчиками библиотеки шрифтовых иконок. Вы удивитесь, но интерфейс практически любого сайта можно без особых хлопот избавить от растра. Тем самым навсегда избавив его от проблем с отображением на дисплеях высокой четкости.

Если вам не удалось избавиться от растра полностью, не расстраивайтесь! Пара-тройка растровых изображений в интерфейсе сайта - это не беда и вовсе не проблема. Я вам расскажу как просто и грамотно с помощью нескольких строк CSS адаптировать ваше растровое изображение для корректного отображения на Retina-дисплее.

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

Нам нужно лишь дописать медиа-запрос, чтобы для дисплеев у которых соотношение физических и CSS-пикселей больше 1.5, загружалась наша новая картинка logo2x.png

Делается это очень просто:

@media all and (-webkit-min-device-pixel-ratio: 1.5) { #logo { background-image: url("images/[email protected]"); background-size: 300px 100px; } }

Не забудьте задать размеры бэкграунда такие же как у исходного изображения. В нашем случае 300х100 px .

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

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

Сейчас, с большой популярностью MacBook-ов, айфонов и других устройств с большим DPI, изображения на сайте нужно оптимизировать, чтобы они не были смазанными. Для этого у нас есть несколько решений. Самые популярные это сделать иконочный шрифт или использовать SVG. Но что если нет возможности или не хочется с этим иметь дело, или вы очень любите PNG. Решение конечно же есть. В виде плагина для Photoshop, js-библиотеки и sass/less/stylus примеси.

Я буду объяснять своими словами. Из-за того что плотность точек на retina экранах больше, изображение оказывается размытым (поскольку растягивается). Чтобы это побороть, нужно использовать изображение в 2 или 3 раза больше оригинального и масштабировать средствами html и css до размеров x1. Тогда на retina экранах изображение будет выглядеть отлично. Но для этого нужно сначала нарезать 2 или 3 размера изображений, а потом использовать js библиотеку и примесь в препроцессоре (для удобства). Обо всем по порядку…

Как написано на официальном сайте: «Лучший плагин к Photoshop для оптимизации графики на сайте для iOS и Retina-дисплеев». Скачать его можно на странице проекта .

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

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

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

Тут все просто, подключаем js библиотеку, и она определит нужно ли загружать изображение для retina экранов. Если нужно, то ссылка на исходный файл заменяется на ***@2x.*** или ***@3x.*** .

После подключения она будет доступна для использования. Написав следующее: .at2x(@path, @width, @height); (вместо @path, @width и @height нужно написать ваш путь к изображению и его размеры).

#logo { .at2x ("/images/my_image.png" , 200px , 100px ) ; }

Эта примесь раскроется как:

#logo { background-image : path : / assets / img / url("/images/my_image.png") ; } @media all and (-webkit-min-device-pixel-ratio : 1.5 ) { #logo { background-image : path : / assets / img / url("/images/[email protected]") ; background-size : 200px 100px ; } }

Подробнее о retina.js и примесях можно прочитать