Чётко и резко

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

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 с ретиной
239 ppi — Chromebook Pixel
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);
			}

И что делать?

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

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

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

			<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