Всем сестрам по серьгам. Адаптивные изображения

Цель — лучший пользовательский опыт на любых устройствах.

Визуальная эстетика, удобство использования, время загрузки, оптимальная скорость работы.

Принцип — единый интерфейс пользователя с автонастройкой на контрольных точках.

Количество колонок, позиции блоков, размеры контента, поведение интерактивных элементов.

«В каких случаях это может быть нужно для картинок в <img>? Как правило, элемент <img> служит для картинок в контенте, где обычно не нужно ничего адаптировать.»

				<picture alt="angry pirate">
					<source src="hires.png" media="min-width:800px">
					<source src="midres.png" media="network-speed:3g">
					<source src="lores.png">
					<!-- fallback for browsers without support -->
					<img src="midres.png" alt="angry pirate">
				</picture>
			

				<picture alt="angry pirate">
					<source src="hires.png" media="min-width:800px">
					<source src="midres.png" media="network-speed:3g">
					<source src="lores.png">
					<!-- fallback for browsers without support -->
					<img src="midres.png" alt="angry pirate">
				</picture>
			

				<picture alt="angry pirate">
					<source src="hires.png" media="min-width:800px">
					<source src="midres.png" media="network-speed:3g">
					<source src="lores.png">
					<!-- fallback for browsers without support -->
					<img src="midres.png" alt="angry pirate">
				</picture>
			

				<picture alt="angry pirate">
					<source src="hires.png" media="min-width:800px">
					<source src="midres.png" media="network-speed:3g">
					<source src="lores.png">
					<!-- fallback for browsers without support -->
					<img src="midres.png" alt="angry pirate">
				</picture>
			

• типовой для HTML5 принцип работы с ресурсами;
• типовой для CSS принцип работы с условиями окружения;
• широкий спектр определяемых условий — разрешение экрана, ориентация устройства, dpi, глубина цвета, соотношение сторон;

• неограниченное количество условий;
• ручной контроль;
• детальная настройка;
• обратная совместимость.

• избыточность кода для описания одного изображения;
• отсутствие какой-либо автоматизации;
• невозможность проверки качества канала связи;
• перенос в структурную разметку стилевых правил.

				<img alt="image description"
src="/path/to/fallbackimage.png"
srcset="/path/to/image.png 800w,
/path/to/otherimage.png 600w">
			

				<img alt="image description"
src="/path/to/fallbackimage.png"
srcset="/path/to/image.png 800w,
/path/to/otherimage.png 600w">
			

				<img alt="image description"
src="/path/to/fallbackimage.png"
srcset="/path/to/image.png 800w,
/path/to/otherimage.png 600w">
			

				<img alt="image description"
src="/path/to/fallbackimage.png"
srcset="/path/to/image.png 800w,
/path/to/otherimage.png 600w">
			

• нет необходимости внелрения нового элемента HTML;
• компактность кода для описания одного изображения.

• неочевидный синтаксис;
• нет всей широты селекторов CSS Media Queries;
• перенос в структурную разметку стилевых правил.

				<picture>
					<source media="(orientation:landscape)"
	srcset="long.jpg 1x, long2.jpg 2x">
					<source media="(orientation:portrait)"
	srcset="tall.jpg 1x, tall2.jpg 2x">
					<img src="fallback.jpg">
				</picture>
			

				<picture>
					<source media="(orientation:landscape)"
	srcset="long.jpg 1x, long2.jpg 2x">
					<source media="(orientation:portrait)"
	srcset="tall.jpg 1x, tall2.jpg 2x">
					<img src="fallback.jpg">
				</picture>
			

				<picture>
					<source media="(orientation:landscape)"
	srcset="long.jpg 1x, long2.jpg 2x">
					<source media="(orientation:portrait)"
	srcset="tall.jpg 1x, tall2.jpg 2x">
					<img src="fallback.jpg">
				</picture>
			

				<picture>
					<source media="(orientation:landscape)"
	srcset="long.jpg 1x, long2.jpg 2x">
					<source media="(orientation:portrait)"
	srcset="tall.jpg 1x, tall2.jpg 2x">
					<img src="fallback.jpg">
				</picture>
			

				<picture>
					<source media="(orientation:landscape)"
	srcset="long.jpg 1x, long2.jpg 2x">
					<source media="(orientation:portrait)"
	srcset="tall.jpg 1x, tall2.jpg 2x">
					<img src="fallback.jpg">
				</picture>
			

• типовой для HTML5 принцип работы с ресурсами;
• типовой для CSS принцип работы с условиями окружения;
• широкий спектр определяемых условий — разрешение экрана, ориентация устройства, dpi, глубина цвета, соотношение сторон;

• неограниченное количество условий;
• ручной контроль;
• автоматический контроль;
• детальная настройка;
• обратная совместимость.

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

				<head>
					<meta name="case" data="breakpoint1"
	media="min-width:350px" />
					<meta name="case" data="breakpoint2"
	media="min-width:1000px" />
				</head>
				<body>
					<img src="/content/images/{case}/photo.jpg" alt='' />
				</body>

			

				<head>
					<meta name="case" data="breakpoint1"
	media="min-width:350px" />
					<meta name="case" data="breakpoint2"
	media="min-width:1000px" />
				</head>
				<body>
					<img src="/content/images/{case}/photo.jpg" alt='' />
				</body>

			

				<head>
					<meta name="case" data="breakpoint1"
	media="min-width:350px" />
					<meta name="case" data="breakpoint2"
	media="min-width:1000px" />
				</head>
				<body>
					<img src="/content/images/{case}/photo.jpg" alt='' />
				</body>

			

• централизованное управление адаптацией изображений;
• в структурную разметку не переносятся стилевые правила;
• возможность обратной совместимости;
• загрузка условий в <head> до загрузки изображений в <body>;
• <meta> переменные в принципе загружаются до любого внешнего ресурса.

• нет возможности управления отдельными изображениями;
• необходима значительная переработка принципов работы браузеров с URI с учетом возможного наличия переменных;
• ограничения возможностей хранения изображений (заранее настроенные пути).

• редактор сохраняет изображение с множественной разверткой;
• браузер загружает начальный фрагмент каждого изображения (10-20 Кб) используя значение HTTP-заголовка Range;
• фрагмент содержит размеры изображения и опционально данные о контрольных точках множественной развертки (аналогично метадате в видеоформате MP4);

• если изображение не является Progressive JPEG, браузер загрузит остальную байтовых диапазонов;
• если информация и контрольных точках не найдена, изображение будет загружено полностью;
• если в изображении найден байтовый диапазон в комментарии, браузер загрузит только требуемый, после вычисления оптимального варианта.

• автоматизация.

• отсутствие мало мальского контроля;
• усложнение процесса создания изображения;
• неприемлемое время разработки и внедрения новых форматов изображений.

• браузер запрашивает адрес spdy://website.com;
• сервер возвращает контент и отправляет запрос проверки скорости соединения и разрешения экрана;
• полученный ответ браузер добавляет для всех последующих запросов на домен (возможно с привязкой к типу файла);

• сервер может принудительно отправить любой измененный контент через SPDY без дополнительного запроса;
• сервер определяет, какое изображение подходит конкретному запросу.

• не требуется дополнительная работа редактора;
• генерация масштабированных изображений на лету;
• обратная совместимость.

• отсутствие ручного контроля;
• потенциальные проблемы с прокси;
• потенциальные проблемы с CDN.

«Доставка небольших изображений для небольших устройств.»

• Apache 2.х
• PHP 5.x
• GD lib

• adaptive-images.js → Session Cookie (resolution)
• Browser → <img> → Apache
• Apache → .htaccess (jpeg, gif, png) → adaptive-images.php
• adaptive-images.php → ? (resolution) ! → GD lib → Cache → Browser

• настройка через CSS Media Queries;
• генерация набора изображений;
• настройка степени сжатия изображения;
• кэширование сгенерированных изображений.

• определение устройства по User Agent при недоступности куки:
  • большое, для стационарного компьютера;
  • маленькое, для мобильного устройства;
• особый HTTP-заголовк для изображения для сетевых системам кэширования;
• временны́е метки для проверки актуальности закэшированных изображений.

• C# .NET
• ColdFusion
• Drupal Module
• Wordpress Plugin

• http://www.whatwg.org/mailing-list
• http://www.w3.org/community/respimg