Чётко и резко

Новая графика
для экранов
с высоким
разрешением

8×5px

Разрешение

Разрешение (resolution) — количество физических пикселей на экране устройства, обычно приводится нерешённым, что дополнительно говорит о соотношении сторон.

320 × 480 — первый iPhone
1024 × 768 — канонический десктоп
2880 × 1800 — MacBook с ретиной

Плотность пикселей

Плотность пикселей (pixel density) — количество пикселей, которое помещается в один линейный дюйм.

Измеряется в ppi (pixels per inch), относится к дисплеям, матрицам, сканерам. Тогда как dpi (dots per inch) имеет отношение к печати и прямо не соотносится с ppi.

Плотность пикселей

100-110 ppi — десктоп
110–135 ppi — ноутбук
160 ppi — средний смартфон
216 ppi — планшет Nexus 7
220 ppi — MacBook с ретиной
254 ppi — смартфон Nexus One
326 ppi — iPhone 5 с ретиной

Пиксели, пиксели и пиксели

Физический пиксель (physical pixel) — это ячейка на матрице, единица разрешения дисплея устройства.
Виртуальный пиксель (device independent pixel, dip) — это независимый от устройства пиксель, может быть больше, меньше или равен физическому.
Изменённый пиксель — появляется тогда, когда браузер или пользователь масштабируют изображение на экране.

16×10px

Пиксельное соотношение

Пиксельное соотношение (pixel ratio) — отношение физического пикселя к виртуальному. Может меняться в зависимости от браузера.

Nexus One: разрешение 480 физических пикселей и 320 виртуальных, в итоге соотношение 1,5
MacBook с ретиной: разрешение 2880 физических пикселей и 1440 виртуальных, в итоге соотношение 2,0

Что такое ретина?

Ретина

Маркетинговый термин Apple, описывающий устройства с высоким разрешением и пиксельным соотношением больше, чем 1. То есть виртуальный пиксель увеличивается по отношению к физическому.

Все устройства Apple имеют соотношение 1 или 2
Другие планшеты и смартфоны имеют соотношение от 1,5 до 2,25

Ретина

В терминологии Android, такие устройства называются

LDPI 0,75 — старые смартфоны
MDPI 1,0 — большинство смартфонов
HDPI 1,5 — Nexus One
XHDPI 2,0 — Galaxy Nexus, Galaxy Note

Приведение к физическим пикселям

			<meta name="viewport" content="
			      width=device-width,
			      target-densityDpi=device-dpi">

Пока только работает на Android и в Opera Mobile

Определение ретины

Решаем, с какого соотношения начинать
- 1,5 для более широкого диапазона устройств
- 2,0 для самых ретинистых
Ищем значение пиксельного соотношения устройства

Определение ретины

			@media (-webkit-min-device-pixel-ratio:1.5),
			       (min-resolution:144dpi) { … }

			@media (-webkit-min-device-pixel-ratio:2),
			       (min-resolution:192dpi) { … }

Откуда цифры: 96dpi = 1dppx

Определение ретины

			@media (-webkit-min-device-pixel-ratio:1.5),
			       (min--moz-device-pixel-ratio:1.5),
			       (-o-min-device-pixel-ratio:3/2),
			       (min-resolution:1.5dppx) {
			       E { something }
			       }

Определение ретины

			function isRetina(){
			    return (('devicePixelRatio' in window &&
			    devicePixelRatio > 1) || ('matchMedia' in window &&
			    !matchMedia('(-moz-device-pixel-ratio:1.0)').matches));
			}

И что делать?

Текст
в порядке

Прокачивать графику

Картинки в содержимом

			<picture>
			    <source srcset="small.jpg 1x, large.jpg 2x">
			    <source media="(min-width:18em)"
			            srcset="medium.jpg 1x, large.jpg 2x">
			    <img src="small.jpg">
			</picture>

Картинки в стилях

			E {
			    background-image:url(picture.png);
			    background-image:image-set(
			        url(small.jpg) 1x,
			        url(medium.jpg) 2x);
			    }

Графика

			E {
			    background:url(100px.png) no-repeat;
			    background-size:50px 50px;
			    }

Кроссбраузерность bg-size хромает, хотя 80% по миру
Не все файлы удачно масштабируются

Графика

			E {
			    background:url(50px.png) no-repeat;
			    }
			@media (retina) {
			    E { background:url(100px.png) no-repeat; }
			    }

SVG

Фолбек для IE6-8

			E {
			    background:url(image.png) no-repeat;
			    background:
			        rgba(0, 0, 0, 0)
			        url(image.svg) no-repeat;
			    }

Фолбек для Firefox 3.6 и Android 2.x

			E {
			    background:url(image.png) no-repeat;
			    }
			.inlinesvg E {
			    background:url(image.svg) no-repeat;
			    }

favicon.ico

Фотографии

Подготовить фотографию в 1,5–2 раза больше требуемого
Сохранить со сжатием гораздо более смелым, до 20-30%
Уменьшить её размеры до нужных при вставке
Файл получится либо слегка больше, либо даже меньше
Внешнее качество и детализация фотографии повысятся

ORLY?

1024 × 640, 99 КБ

2048 × 1280, 75 КБ

Canvas

На OS X с ретиной Canvas рисуется правильно, не просто с удвоением
На iOS атрибуты width и height нужно умножить на пиксельное соотношение, но установить оригинальные CSS-размеры
Чтобы не учетверить количество пикселов на OS X с ретиной, не забыть проверить ctx.webkitBackingStoreRatio < 2

Тестирование

Девайсы с ретиной, понятное дело
Opera Mobile Emulator
Android Emulator из Android SDK
iOS-симуляторы из Xcode
Quartz Debug из Graphics Tools для Xcode