Плюсы и минусы использования retina js. Адаптирование верстки для retina-экранов. Как создавать изображения retina
Рассказываю, как быстро оптимизировать изображения сайта под качественное отображение на дисплеях Retina, используемых на новых MacBook, iMac, iPhone, iPad и т.д. Как обычно, перед этим немного теории и моих практических советов.
Начнем с определения:
Rétina (от лат. retina - сетчатка) - общее маркетинговое название ЖК-дисплеев, используемых в устройствах Apple и отличающихся настолько высокой плотностью пикселей, что человеческий глаз не способен заметить, что изображение состоит из них.
Пожалуй, на этом теоретическую часть закончим. Кому интересно устройство Ретина-дисплеев, могут без особого труда найти более глубокие сведения на специализированных ресурсах.
Итак, вы наверняка замечали, что на Ретине часть графики большинства сайтов расплывается. Правильнее сказать, выглядит не очень четко по-сравнению с другими элементами интерфейса. Что бывает заметно даже невооруженным взглядом. Не сложно понять - плывет растровая графика. С вектором все в порядке, он отлично масштабируется на любом разрешении и с любой плотностью пикселей. Существуют ряд способов борьбы с этой проблемой, разработаны целые библиотеки, с помощью которых вы можете полностью адаптировать свой сайт под Ретину. Но сегодня речь пойдет немного о другом.
На мой взгляд, адаптация растра - это не совсем разумный подход. Я считаю, что уже давно пришло время избавляться от него в интерфейсе и полностью переводить его элементы в векторную графику. Например, в SVG . Кроме того, с помощью новых стилей CSS3 можно избавиться от растровой мазни в градиентах, тенях на кнопках и других элементах интерфейса. Некогда популярные на рубеже столетий растровые иконки тоже уже давно умерли и используются разве что отсталыми любителями. На смену им пришел все тот же векторный SVG и столь любимые веб-разработчиками библиотеки шрифтовых иконок. Вы удивитесь, но интерфейс практически любого сайта можно без особых хлопот избавить от растра. Тем самым навсегда избавив его от проблем с отображением на дисплеях высокой четкости.
Если вам не удалось избавиться от растра полностью, не расстраивайтесь! Пара-тройка растровых изображений в интерфейсе сайта - это не беда и вовсе не проблема. Я вам расскажу как просто и грамотно с помощью нескольких строк CSS адаптировать ваше растровое изображение для корректного отображения на Retina-дисплее.
Не вдаваясь в подробности ситуации, возьмем простой пример. У вашего сайта графически-сложный логотип, который невозможно или затруднительно конвертировать в векторный формат. Давайте опустим логичные вопросы: как так получилось, что нет векторного логотипа и что это за такой логотип, который невозможно отобразить в векторе. Наша задача сделать отображение логотипа на Ретине четким, избавившись от мыла.
- Вам понадобится изображение логотипа в два раза большее оригинала. Например, у вас имеется логотип logo.png размером 300х100 px. Следовательно, вам нужно создать аналогичное изображение, но размером в два раза больше, т.е 600х200 px. Разумеется, не простым масштабированием в Фотошопе старого маленького логотипа. Создаем новую качественную четкую картинку, желательно из вектора, называем ее, например, [email protected] и сохраняем рядом с основным логотипом.
- Затем открываем в редакторе файл стилей вашего сайта и находим место, где задан стиль отображения вашего логотипа. Обычно это что-типа такого:
Нам нужно лишь дописать медиа-запрос, чтобы для дисплеев у которых соотношение физических и 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"));
});
}
});
Где использовать: на любых сайтах, подходит для иконок, логотипов и простых векторных иллюстраций.
Плюсы
- Единый набор изображений для всех устройств
- Простота реализации
- Бесконечное масштабирование
Минусы
- Нет точного сглаживания «до пикселя»
- Не подходит для сложной графики из-за больших размеров файла
- Нет встроенной поддержки в IE 7, 8 и в ранних версиях Android
Иконочные шрифты
Популярный благодаря
Сейчас появляется все больше устройств, оснащенных экранами с повышенной плотностью пикселей, поэтому при верстке современных сайтов (особенно промо-сайтов, лендингов и т.д.) это следует учитывать.
Я не буду углубляться в теорию, а расскажу лишь про практическое применение некоторых приемов.
Основная причина размытости изображений на 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, и формально относился только к ее технике. Однако сейчас он применяется для всех экранов с повышенной плотностью пикселей.
Сейчас, с большой популярностью MacBook-ов, айфонов и других устройств с большим DPI, изображения на сайте нужно оптимизировать, чтобы они не были смазанными. Для этого у нас есть несколько решений. Самые популярные это сделать иконочный шрифт или использовать SVG. Но что если нет возможности или не хочется с этим иметь дело, или вы очень любите PNG. Решение конечно же есть. В виде плагина для Photoshop, js-библиотеки и sass/less/stylus примеси.
Теория подготовки сайта к Retina дисплеям
Я буду объяснять своими словами. Из-за того что плотность точек на retina экранах больше, изображение оказывается размытым (поскольку растягивается). Чтобы это побороть, нужно использовать изображение в 2 или 3 раза больше оригинального и масштабировать средствами html и css до размеров x1. Тогда на retina экранах изображение будет выглядеть отлично. Но для этого нужно сначала нарезать 2 или 3 размера изображений, а потом использовать js библиотеку и примесь в препроцессоре (для удобства). Обо всем по порядку…
Photoshop плагин Retinize It
Как написано на официальном сайте: «Лучший плагин к Photoshop для оптимизации графики на сайте для iOS и Retina-дисплеев». Скачать его можно на странице проекта .
Плагин представляет собой записанные действия, которые можно будет воспроизводить через горячие клавиши или пункты меню. Плагин выделяет слои, создает новый файл с ними, делает трим (обрезку краев) и сохраняет изображение в 1-м, 2-х или 3-х размерах.
Работать с ним просто:
- Выберите слои или или группу слоев
- Запустите Retinize It (можно добавить сочетание клавиш)
- Назовите ваши файлы
- Получите ваши нарезанные изображения
Используем retina.js для тегов img
Тут все просто, подключаем js библиотеку, и она определит нужно ли загружать изображение для retina экранов. Если нужно, то ссылка на исходный файл заменяется на ***@2x.*** или ***@3x.*** .
Примесь для LESS
После подключения она будет доступна для использования. Написав следующее: .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 и примесях можно прочитать