Сейчас, с большой популярностью 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 и примесях можно прочитать
- Перевод
После недавнего выпуска 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-масштабирования:
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-масштабирование: плюсы- Простота реализации
- Кроссбраузерность
- Устройства с обычными экранами будут скачивать лишние мегабайты
- На обычных экранах четкость изображений может пострадать из-за алгоритмов сжатия
- Параметр 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 для элементов дизайна. Не подходит для изображений внутри контента.
Плюсы- Кроссбраузерность
- Утомительно внедрять, особенно на крупных сайтах
- Использование изображения контента в качестве фона семантически некорректно
$(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, и формально относился только к ее технике. Однако сейчас он применяется для всех экранов с повышенной плотностью пикселей.
Сегодня мы расставим все точки над 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.
С каждым новым гаджетом от компании 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
, чтобы вернуть первоначальные параметры.