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

Соотношение между физическими и CSS-пикселями можно устанавливать так:

Или так:

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

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

Растровые пиксели (bitmap pixels) — самые маленькие части, составляющие растровое изображение (PNG, JPF, GIF и т.д.) Каждый пиксель содержит информацию, о цвете и расположении в системе координат изображения. В некоторых форматах пиксель может содержать дополнительную информацию, например, прозрачность. Кроме растрового разрешения, изображения в интернете имеют абстрактные размеры в CSS-пикселях. Браузер сжимает или растягивает изображении в соответствии с его CSS-шириной и -длиной. При отображении на обычном экране один растровый пиксель соответствует одному CSS-пикселю. На Retina-экранах каждый растровый пиксель умножается в 4 раза:

Оптимизация

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

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

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

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

HTML

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

<img src="example@2x.png" width="200" height="300" />

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

Javascript

Такого же результата можно добиться, используя Javascript для того, чтобы делить пополам размеры изображений для Retina-экранов. С использованием библиотеки jQuery это выглядит так:

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

CSS (SCSS)

Также можно использовать изображение в качестве фона с необходимыми размерами (background-size) определенного div'а. Параметр background-size не поддерживается в IE 7 и 8.

Можно использовать псевдоэлементы :before или :after

Техника работает и при использовании спрайтов:

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

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

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

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

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

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

Возможно это самый популярный способ оптимизации графики для Retina-дисплеев. Используется CSS или Javascript.

CSS

В этом способе используется device-pixel-ratio, чтобы установить нужное соотношение между физическими и CSS-пикселями:

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

То же самое получится с применением CSS:

Для поддержки IE 7 или 8 и Android 2.x потребуется использование заменяющих PNG-изображений. Это можно легко сделать с помощью Modernizr:

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

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

С использованием jQuery и Modernizr:

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

Плюсы

• Единый набор изображений для всех устройств
• Простота реализации
• Бесконечное масштабирование

Минусы

• Нет точного сглаживания «до пикселя»
• Не подходит для сложной графики из-за больших размеров файла
• Нет встроенной поддержки в IE 7, 8 и в ранних версиях Android

Как и многие другие большие изменения в веб-дизайне, поиск универсального решения для изображений на Retina-устройствах будет долгим. Можно сидеть и ждать его, а можно уже сейчас делать сайты, которые приятно посещать с любых устройств.

Источник: habrahabr.ru