После появления устройств с дисплеями высокого разрешения, например, 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 можно отобразить двумя способами.
Вариантом по умолчанию при отображении веб-сайтов является первый - все изображения увеличиваются в два раза. Из-за чего все изображения на сайте: фотографии, а особенно иконки и логотипы - становятся размытыми, пример чего я привёл в начале статьи.
Для того, чтобы ваш сайт отображался идеально на всех устройствах, в том числе и с 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} , может пригодиться миксин , чтобы лишний раз не копипастить.
Если вы нашли ошибку или у вас остались какие-то вопросы, не забудьте написать об этом в комментариях.
Сегодня мы расставим все точки над i в отношении Retina дисплеев. Самое простое объяснение: Retina — это дисплей высокого разрешения. Однако, не только продукты Apple обладают такими дисплеями. «Retina дисплей» это только термин придуманный Apple, телефоны, планшеты и мониторы тоже используют технологию высокой четкости. Сегодня, такие дисплеи становятся все более распространенными, поэтому важно создавать сайты и приложения способные качественно их поддерживать.
С учетом вышесказанного, позвольте мне объяснить что же такое Retina ready изображения, и почему они идут рука об руку с адаптивным дизайном, а также как создать такие изображения для этого самого адаптивного дизайна.
Что означает Retina дисплей?Retina дисплей
это бре н д Apple, означающий жидкокристаллические дисплеи с высокой плотностью пикселей. Изображение ниже упрощенно иллюстрирует как различается расположение пикселей на дисплее с обычным разрешением и дисплее Retina. В Retina дисплеях Вы получите вдвое больше пикселей на пространстве того же размера, по сравнению с обычным дисплеем. Вот почему иконки или текст на iPad 2 выглядят хуже, чем на iPad 3.
iPad 3/4 имеет разрешающую способность в 264 пиксела на дюйм, а iPhone 4/5 326, в то время как обычный монитор порядка 100 пикселей на дюйм, что дает разницу в 2,6 и 3,2 раза соответственно. 2 раза было сказано для упрощения.
Дизайнеры и разработчики теперь имеют несколько типов дисплеев для отображения. Это означает следующие 2 вещи: пользователи с Retina дисплеями придется довольствоваться плохо отображаемыми изображениями на сайтах не поддерживающих Ratina, с другой стороны, на сайтах обладающих такой поддержкой все будет выглядеть очень качественно, четко, именно так как мы любим и ожидаем этого.
Почему Retina важна для адаптивного дизайна?Ответ на этот вопрос очень прост: большинство современных мобильных устройств обладает Retina дисплеями, поэтому создавай адаптивный сайт для них, Вы так же должны позаботиться о поддержке Ratina, чтобы Ваш сайт выглядел идеально. Если сайт выглядит хорошо, то и пользователь получит больше удовлетворения.
Как же создать Retina ready изображения для адаптивного дизайна?Здесь есть несколько способов и инструментов для этого. Мы рассмотрим только основные, поскольку они лучшим образом решают поставленную задачу.
SVGЯ уверен, что Вы уже знакомы с форматом SVG. Стыдно если нет. Но в любом случае повторимся. SVG это формат изображения в векторной графике, который за счет использования векторов можно увеличивать без потери качества до любых размеров. Поскольку векторы образуют определенную фигуру а не набор пикселей, то ими можно всячески манипулировать и они по прежнему будут выглядеть нетронутыми и четкими. К сожалению, растровые форматы, такие как JPG, PNG, или GIF этим похвастаться не могут.
За счет своей уникальной возможности безупречно изменять размер, SVG является отличным форматом для адаптивного дизайна. Не важно какого размера дисплей, изображения будет выглядеть безупречно как на телефоне или планшете, так и на мониторе. Это работает и для Retina дисплеев, SVG изображения после изменения под плотность пикселей будут выглядеть так же. Поэтому следует использовать SVG во всех возможных случаях.
Фотографии и растровые изображенияКонечно, не все изображения могет быть в формате SVG, особенно если это фотография или уже готовое растровое изображение. Для этого случая тоже есть решение, и оно заключается в показе изображения с размерами сторон в 50%. Что я имею в виду? Допустим Вам нужно разместить фото размером 150×150, а вы для этого используете изображение размером 300×300 но отображаете его как 150×150. В таком случае, на Retina дисплее изображение будет выглядеть резко и качественно.
Есть несколько способов использовать двукратные изображения на Вашем сайте: через HTML, CSS или JS. Не будем особо углубляться в детали, а просто рассмотрим базовые методы.
Первый способ. У Вас есть изображение размером 300×300 и Вы вставляете его в HTML и указываете ширину и высоту в 150 пикселей.
Второй способ. Изменить высоту и ширину изображения можно через CSS, либо указать 50% если Вы уверены что Вам нужно вдвое уменьшенное изображение.
Img{ width: 50%; height: 50%; } .box img{ width: 150px; height: 150px; }
Третий способ. Если Вам нужно использовать такое изображение в качестве фонового, то потребуется следующий стиль:
Box{ background-image: url(myIMG.png); background-size: 150px 150px; }
Но у этого метода есть и свои минусы. Во-первых Вы не можете взять из воздуха увеличенное в 2 раза изображение. Очевидно, что взять и просто увеличить изображение а потом использовать его не пойдет! Кроме того, если на Вашем сайте много изображений, или некоторые изображение просто очень большие, то с этим методом время загрузки сайта может сильно увеличиться. Особенно если учитывать что большинство мобильных устройств имею весьма посредственное соединение с Интернетом с небольшой пропускной способностью.
Но есть способы избежать и этого.
Media QueriesПри написании CSS media query позволяют Вам использовать не только высоту и ширину экрана устройства. Следующий код позволяет уверенно определять имеет ли устройство дисплей типа Retina. Этот способ лучше всего подходит для случаев, когда Вы используете фоновые изображения для div’ов, media query может просто заменить его большим изображением. В таком случае, большие изображения будут загружаться только для устройств с Retina дисплеями.
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { /* CSS для Retina устройств */ }
Retina.jsЕсли Вас по какой-либо причине не устраивает media query решение, то рассмотрите JS вариант. Здесь мы рассмотрим JavaScript плагин для решения нашей задачи. «Retina.js is это open source скрипт, позволяющий легко обслуживать изображения с высоким разрешением, для Retina дисплеев». Этот плагин работает следующим образом: если у Вас есть 2 изображения, одно обычного размера, а второе в два раза увеличенное, retina.js определяет использование Retina дисплея и использует соответствующее изображение. Это работает очень просто, так что обязательно попробуйте. Все что нужно сделать для работы плагина, это правильно назвать изображения.
Иконки
Благодаря @font-face и шрифтам использующим иконки вместо букв, Вы можете легко использовать их вместо изображений. Мне очень нравится этот метод по следующим причинам: Во-первых, шрифты отлично масштабируются, как и SVG, поэтому они подходят не только для различных размеров экрана, но и для разных разрешений, как в случае с Retina.
Сейчас, с большой популярностью 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-х размерах.
Работать с ним просто:
Используем 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 и примесях можно прочитать
Рассказываю, как быстро оптимизировать изображения сайта под качественное отображение на дисплеях 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 .
Понятно, что данный способ целесообразно использовать для небольшого количества конкретных изображений. Если вы хотите иметь поддержку Ретины в том числе и в контенте - используйте другие способы. О них мы поговорим в другой раз.
Подпишитесь на мой телеграм и первыми получайте новые материалы, в т.ч. которых нет на сайте.
После недавнего выпуска 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
Кроме растрового разрешения, изображения в интернете имеют абстрактные размеры в CSS-пикселях. Браузер сжимает или растягивает изображении в соответствии с его CSS-шириной и -длиной. При отображении на обычном экране один растровый пиксель соответствует одному CSS-пикселю. На Retina-экранах каждый растровый пиксель умножается в 4 раза:
А таким на Retina:
Есть несколько способов реализации HTML и CSS-масштабирования:
HTML Самый простой способ - просто задать параметры width и height тегу img: 
Где использовать: на одностраничных сайтах с несколькими изображениями.
Javascript Такого же результата можно добиться, используя Javascript для того, чтобы делить пополам размеры изображений для Retina-экранов. С использованием библиотеки jQuery это выглядит так:Где использовать: на сайтах с несколькими изображениями в контенте.
CSS (SCSS) Также можно использовать изображение в качестве фона с необходимыми размерами (background-size) определенного div"а. Параметр background-size не поддерживается в IE 7 и 8.Можно использовать псевдоэлементы: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-масштабирование: плюсы
Где использовать: на сайтах или в приложениях, в которых применяется background-image для элементов дизайна. Не подходит для изображений внутри контента.
ПлюсыСуществует специальный Javascript плагин Retina.js , который умеет делать все вышеописанное, но с дополнительными возможностями, такими как пропуск внешних изображений и пропуск внутренних, но не имеющих retina-копий.
Где использовать: на любых сайтах с изображениями в контенте.
ПлюсыВ этом примере простое 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"));
});
}
});
Где использовать: на любых сайтах, подходит для иконок, логотипов и простых векторных иллюстраций.
Плюсы
