Плюсы и минусы использования retina js. Адаптирование верстки для retina-экранов

Сейчас появляется все больше устройств, оснащенных экранами с повышенной плотностью пикселей, поэтому при верстке современных сайтов (особенно промо-сайтов, лендингов и т.д.) это следует учитывать.

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

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

Решение 1 средствами html

используйте изображение в 2 раза больше, жестко указав параметры width и height

изображение example2x.png должен иметь размер 200x400

Решение 1 средствами JavaScript

Способ аналогичен первому, но немного автоматизирован

$(window).load(function() { var images = $("img"); images.each(function(i) { $(this).width($(this).width() / 2); }); });

Решение 1 средствами CSS

Если необходимо прописать размеры для фона, а не изображения, то это можно сделать следующим образом:

Image { background-image: url(example2x.png); background-size: 100px 200px; /* Alternatively background-size: contain; */ width: 100px; height: 200px; }

Но параметр background-size не поддерживается в IE 7 и 8.

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

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

Решение 2 средствами CSS

Это относится, в первую очередь, к фоновым изображениям

Icon { background-image: url(example.png); width: 100px; height: 200px; } @media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-resolution: 1.5dppx){ .icon { background-image: url(example2x.png); } }

где изображение example.png имеет размеры 100х200, а изображение example2x.png - 200х400

Решение 2 средствами JavaSctipt

Подменяем картинки на большие, если это нужно:

$(document).ready(function(){ if (window.devicePixelRatio > 1) { var lowresImages = $("img"); images.each(function(i) { var lowres = $(this).attr("src"); var highres = lowres.replace(".", "@2x."); $(this).attr("src", highres); }); } });

Да, и в качестве заключения хочется добавить, что retina-дисплей не вполне корректное название, т.к. это маркетинговый термин компании Apple, и формально относился только к ее технике. Однако сейчас он применяется для всех экранов с повышенной плотностью пикселей.

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

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} , может пригодиться миксин , чтобы лишний раз не копипастить.

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

С каждым новым гаджетом от компании Apple, все больше появляется экранов с технологией Retina Display. Сегодня экраны Retina установлены на iPhone, iPod, iPad и различных моделях MacBook, а их общее число пользователей впечатляет. Давайте узнаем, как создавать специальные изображения retina для вашего сайта, чтобы он смотрелся более навороченным, ярким и четким на мощных экранах такого типа.

Зачем нужна поддержка экранов retina?

Вначале я не ожидал, что число пользователей девайсов с экранами retina будет таким внушительным, ведь эту технологию стали использовать относительно недавно. Но потом, через свой аккаунт на Analytics, я просмотрел статистику по мобильным гаджетам и пришел к выводу, что продукты компании Apple лидировали по всем показателям, и в первую очередь среди них iPhone, iPod и iPad- а все они работают на технологии retina. Что касается 13″ или 15″ MacBook Pro с экраном Retina, то самые популярные пользовательские браузеры- это Chrome, Firefox, Safari и Internet Explorer. Поэтому, если вы работаете в Opera, то, скорее всего, число потенциальных посетителей вашего сайта меньше, чем число пользователей девайсов с Retina в целом (если смотреть по статистике моего собственного сайта, по крайней мере).

Как создавать изображения retina

Вы можете предположить, что изображения Retina сохраняются с более высоким разрешением PPI, но суть не в этом. Все, что нужно сделать - это сохранить несколько копий ваших изображений Retina в увеличенном вдвое размере, чтобы, к примеру, картинка с разрешением 200x200px стала 400x400px. Эти увеличенные изображения затем отображаются в первоначальном размере, что позволяет добиться этой четкой, чистой графики на экранах с высокой плотностью пикселей.

Звучит просто, но как вы собираетесь получить эти увеличенные изображения?

Создавайте логотипы и иконки в Illustrator

Идеальное решение для создания изображений retina- это векторная графика. Если ваш логотип или иконка сделаны в формате EPS или Ai file, то его параметры можно изменять перед тем, как переносить или копировать его в Photoshop. Отметьте элемент как Smart Object, и он сохранит свою векторную форму, так что его можно будет увеличить вдвое и сохранить отдельно как специальное изображение retina.

Используйте функции для векторной графики в Photoshop

В основе приложения Photoshop, прежде всего, лежит пиксельная графика, но это не значит, что в нем нет функций для векторных изображений. Любой инструмент изменения формы может создавать векторной слой вместо пикселей, а масштабы всех ваших эффектов для разметки Layer Style по-прежнему можно будет изменять. Когда вы увеличите масштабы элементов в два раза, все эффекты нужно будет масштабировать для создания почти точной, увеличенной вдвое, копии.

Схитрите, чтобы масштабировать свои изображения

Один из самых твердых принципов настоящих Дизайнеров - это не увеличивать в размере изображение, но если вы уже создали сайт и хотите вернуться на шаг назад и добавить поддержку retina, то вам ничего не остается, кроме как переделать каждое изображение вручную. Обычно в результате масштабирования изображения мы получаем размытую картинку с множеством дополнительных линий, но есть одна лазейка в меню Photoshop Image Size под названием Nearest Neighbor. Эта функция поможет избежать размытия ваших изображений и оставит границы четкими, что позволяет применять ее для маленьких иконок и однотонных объектов. Это не приведет к таким же результатам, как полное переделывание элемента, но это хорошая альтернатива на какое-то время.

Как насчет дизайна в масштабе 200%, а потом уменьшения в обратную сторону?

Вы можете подумать «А почему бы мне просто не создать полностью свою собственную разметку в двойном масштабе, а потом я могу уменьшить объекты до стандартных размеров?». В теории печатного дизайна это бы сработало, но что касается веб-дизайна, мы работаем на уровне пикселей, и создаем идеальные формы и линии. Даже сжатие картинок в Photoshop приведет к размытому изображению, в особенности если речь идет об иконках маленького размера.

Как кодировать графику Retina

После того, как вы создали и перенесли копии всех ваших стандартных изображений в двойном размере, вы можете начать добавлять их на ваш сайт различными способами. Пару слов о названии файла: сохраняйте ваши изображения retina прямо в вашу папку с изображениями с тем же именем файла, но добавляя of@2x в конце. К примеру, snarf.jpg изменится на [email protected].

Простое решение при помощи Javascript

Самый простой способ сделать так, чтобы ваши картинки retina работали- это использовать скрипт retina.js. Retina.js выберет все изображения @2x в вашем списке изображений и автоматически изменит их.

Ручной способ, используя CSS@

header h1 a {
background-image: url(images/[email protected]);
background-size: 164px 148px;
}

Еще один вариант - вы можете добавить ваши изображения retina вручную, чтобы сохранить все стилистическое оформление вашей странички в формате CSS. Промежуточный запрос содержит min-device-pixel-ratio: 2, для объектов с двойной плотностью пикселей. Таким образом, вы замените каждое изображение на его увеличенную вдвое @2x копию, но не забывайте вернуть исходный размер изображения, используя параметр background-size.

HTML для встроенных изображений

Метод CSS отлично подходит для фоновых изображений, но для встроенных в HTML-страничку изображений вам придется изменять теги . Просто добавьте изображение @2x к исходным атрибутам, потом используйте width и height , чтобы вернуть первоначальные параметры.

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

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

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

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

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

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

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

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

Вам понадобится изображение логотипа в два раза большее оригинала. Например, у вас имеется логотип logo.png размером 300х100 px. Следовательно, вам нужно создать аналогичное изображение, но размером в два раза больше, т.е 600х200 px. Разумеется, не простым масштабированием в Фотошопе старого маленького логотипа. Создаем новую качественную четкую картинку, желательно из вектора, называем ее, например, [email protected] и сохраняем рядом с основным логотипом.

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

#logo { background-image: url("images/logo.svg?1"); background-repeat: no-repeat; display: block; width: 300px; height: 100px; }

Нам нужно лишь дописать медиа-запрос, чтобы для дисплеев у которых соотношение физических и 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 .

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

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

Разработка мобильных приложений

Перевод

После недавнего выпуска Retina MacBook Pro и The new IPad, экраны с увеличенной плотностью пикселей начали активно входить в нашу жизнь. Что это значит для веб-разработчиков?

Для начала разберемся в терминологии.

Физические пиксели

Физические пиксели (device pixel или physical pixel) - привычные нам пиксели: самые маленькие элементы любого дисплея, каждый из которых имеет свой цвет и яркость.

Плотность экрана (Screen density) - это количество физических пикселей дисплея. Обычно измеряется в пикселях-на-дюйм (PPI: pixels per inch). Apple, разработав Retina-экраны с двойной плотностью пикселей, утверждает, что человеческий глаз не способен различить бо′льшую плотность.

CSS-пиксели

CSS-пиксели (CSS pixels) - абстрактная величина, используемая браузерами для точного отображения контента на страницах, вне зависимости от экрана (DIPs: device-independent pixels). Пример:

Такой блок на обычных экранах будет занимать область 200x300 пикселей, а на Retina-экранах тот же блок получит 400x600 пикселей.Таким образом, на Retina-экранах плотность пикселей в 4 раза больше, чем на обычных:

Соотношение между физическими и CSS-пикселями можно устанавливать так:
device-pixel-ratio, -o-device-pixel-ratio, -moz-device-pixel-ratio, -Webkit-device-pixel-ratio { … }

Или так:
device-pixel-ratio, -o-min-device-pixel-ratio, min--moz-device-pixel-ratio, -Webkit-min-device-pixel-ratio { … }

В Javascript добиться этого можно, используя
window.devicePixelRatio

Растровые пиксели

Растровые пиксели (bitmap pixels) - самые маленькие части, составляющие растровое изображение (PNG, JPF, GIF и т.д.) Каждый пиксель содержит информацию, о цвете и расположении в системе координат изображения. В некоторых форматах пиксель может содержать дополнительную информацию, например, прозрачность.

Кроме растрового разрешения, изображения в интернете имеют абстрактные размеры в CSS-пикселях. Браузер сжимает или растягивает изображении в соответствии с его CSS-шириной и -длиной. При отображении на обычном экране один растровый пиксель соответствует одному CSS-пикселю. На Retina-экранах каждый растровый пиксель умножается в 4 раза:

Оптимизация Существует несколько способов оптимизации графики для отображения на Retina-экранах. Каждый имеет и плюсы, и минусы, необходимо в каждом конкретном случае выбирать, что имеет больший приоритет: производительность, простота реализации, поддержка браузерами или какие-то другие параметры.HTML и CSS-масштабирование Самый простой способ подготовить графику к Retina-дисплею - это просто разделить пополам физические размеры изображения. Например, чтобы показать фотографию 200x300 пикселей на экране с увеличенной плотностью пикселов, необходимо загрузить фото размером 400x600 пикселей и уменьшить его, используя CSS-аттрибуты или HTML-параметры. Таким будет отображение на обычном экране:

А таким на Retina:

Есть несколько способов реализации HTML и CSS-масштабирования:

HTML Самый простой способ - просто задать параметры width и height тегу img:

Где использовать: на одностраничных сайтах с несколькими изображениями.

Javascript Такого же результата можно добиться, используя Javascript для того, чтобы делить пополам размеры изображений для Retina-экранов. С использованием библиотеки jQuery это выглядит так:
$(window).load(function() { var images = $("img"); images.each(function(i) { $(this).width($(this).width() / 2); }); });

Где использовать: на сайтах с несколькими изображениями в контенте.

CSS (SCSS) Также можно использовать изображение в качестве фона с необходимыми размерами (background-size) определенного div"а. Параметр background-size не поддерживается в IE 7 и 8.
.image { background-image: url([email protected]); background-size: 200px 300px; /* Alternatively background-size: contain; */ height: 300px; width: 200px; }

Можно использовать псевдоэлементы:before или:after
.image-container:before { background-image: url([email protected]); background-size: 200px 300px; content:""; display: block; height: 300px; width: 200px; }

Техника работает и при использовании спрайтов:
.icon { background-image: url([email protected]); background-size: 200px 300px; height: 25px; width: 25px; &.trash { background-position: 25px 0; } &.edit { background-position: 25px 25px; } }

Где использовать: на сайтах с ограниченным количеством фоновых изображений (например одним в качестве спрайта).

HTML и CSS-масштабирование: плюсы

Простота реализации
Кроссбраузерность

HTML и CSS-масштабирование: минусы

Устройства с обычными экранами будут скачивать лишние мегабайты
На обычных экранах четкость изображений может пострадать из-за алгоритмов сжатия
Параметр background-size не поддерживается в IE 7 и 8.

Определение плотности пикселей экрана

Возможно это самый популярный способ оптимизации графики для Retina-дисплеев. Используется CSS или Javascript.CSS В этом способе используется device-pixel-ratio, чтобы установить нужное соотношение между физическими и CSS-пикселями:
.icon { background-image: url(example.png); background-size: 200px 300px; height: 300px; width: 200px; } @media only screen and (-Webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) { .icon { background-image: url([email protected]); } }

Где использовать: на сайтах или в приложениях, в которых применяется background-image для элементов дизайна. Не подходит для изображений внутри контента.

Плюсы

Кроссбраузерность

Минусы

Утомительно внедрять, особенно на крупных сайтах
Использование изображения контента в качестве фона семантически некорректно

Javascript Того же результата можно добиться, используя window.devicePixelRatio:
$(document).ready(function(){ if (window.devicePixelRatio > 1) { var lowresImages = $("img"); images.each(function(i) { var lowres = $(this).attr("src"); var highres = lowres.replace(".", "@2x."); $(this).attr("src", highres); }); } });

Существует специальный Javascript плагин Retina.js , который умеет делать все вышеописанное, но с дополнительными возможностями, такими как пропуск внешних изображений и пропуск внутренних, но не имеющих retina-копий.

Где использовать: на любых сайтах с изображениями в контенте.

Плюсы

Простота внедрения
Устройства не скачивают лишние изображения
Контроль плотности пикселей на сайте

Минусы

Retina-устройства скачивают оба варианта каждого изображения
Подмена изображений заметна на retina-устройствах
Не работает в некоторых популярных браузерах (IE и Firefox)

Масштабируемая векторная графика
Вне зависимости от используемого метода растровые изображения по своей природе остаются ограниченными в масштабировании. Тут нам может помощь векторная графика. SVG (Scalable Vector Graphics) формат на основе XML поддерживается большинством браузеров. Самый простой способ использования SVG-изображений - в теге img или CSS-параметрами background-image и content:url().

В этом примере простое SVG-изображение может быть как угодно масштабировано:

То же самое получится с применением CSS:
/* Использование фонового изображения */ .image { background-image: url(example.svg); background-size: 200px 300px; height: 200px; width: 300px; } /* Использование content:url() */ .image-container:before { content: url(example.svg); /* width and height do not work with content:url() */ }

Для поддержки IE 7 или 8 и Android 2.x потребуется использование заменяющих PNG-изображений. Это можно легко сделать с помощью Modernizr :
.image { background-image: url(example.png); background-size: 200px 300px; } .svg { .image { background-image: url(example.svg); } }

Для лучшей кроссбраузерности, чтобы избежать проблем растеризации в Firefox и Opera, следует сделать каждое SVG- изображение соответствующим его родительскому HTML-элементу.

В HTML можно реализовать аналогичное с помощью нужного data в теге a:

С использованием jQuery и Modernizr:
$(document).ready(function(){ if(!Modernizr.svg) { var images = $("img"); images.each(function(i) { $(this).attr("src", $(this).data("png-fallback")); }); } });

Где использовать: на любых сайтах, подходит для иконок, логотипов и простых векторных иллюстраций.

Плюсы