Чётко и резко

Вадим Макеев, Opera Software

Чётко и резко

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

8×5px

Разрешение

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

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

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

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

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

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

16×10px

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

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

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

Ретина

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

Ретина

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

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

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

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

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

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

			@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;
			    }
		

Графика

			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

Фотографии

Фотографии

ORLY?

1024 × 640, 99 КБ

2048 × 1280, 75 КБ

Canvas

Canvas

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

Чётко и резко

Вадим Макеев, Opera Software

Презентация: pepelsbey.net/pres/clear-and-sharp