HTML5 Адаптивные изображения

Адаптивные изображения одна из проблем Responsive Web Design. Возможно вы начали использовать high-res изображения для дисплеев с высоким разрешением и уменьшать их размер для устройств с меньшим разрешением дисплея, что попросту съедает трафик без какой либо пользы для владельцев устройств с дисплеями с небольшим разрешением. Или все так же используете изображения невысокого разрешения, которые ужасно смотрятся на больших экранах и дисплеях с высоким разрешением. Для решения этой проблемы было создано множество хаков.

Я был расстроен тем фактом что до сих пор нет спецификации адаптивных изображений. В ноябре 2011-го я предложил тег picture. Данный элемент использует механизм тега video в паре с Media Queries:

<picture alt="angry pirate">
   <source src=hires.png media="min-width:800px">
   <source src=midres.png media="min-width:480px">
   <source src=lores.png>
   <!-- для браузеров не поддерживающих тег -->
   <img src=midres.png alt="angry pirate">
</picture>

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

Тем не менее, в январе, редактор HTML5, Ян Хиксон (Ian Hickson), написал:

Зачем делать это для тега img? Обычно элемент img используется для изображений в контенте, который вам не нужно делать адаптивным.

Позже Эдвард О'Коннор (Edward O'Connor) из Apple предложил другой метод, использовать атрибут srcset для элемента img. Это дополняет аналогичное предложение нового CSS свойства image-set, которое уже добавлено в WebKit:

<img src="foo-lores.jpg"
srcset="foo-hires.jpg 2x, foo-superduperhires.jpg 6.5x"
alt="decent alt text for foo.">

Значения «2х» и «6.5х» сообщают браузеру относительное разрешение; foo-hires.jpg в 2 раза больше оригинального изображения, а foo-superduperhires.jpg в 6.5 раз. Через пару дней это предложение было добавлено в спецификацию.

Между предложенным элементом picture и атрибутом srcset есть два основных различия. Самым очевидным является то, что атрибут srcset используется в элементе img, который изначально предназначен для изображений. И это замечательно.

Второе различие в том, что использование атрибута srcset не предусматривает Media Queries. Хотя с помощью Media Queries возможно устанавливать параметры для любого разрешения, ориентации устройтсва, dpi, глубины цвета и соотношения сторон. С другой стороны, задавать Media Queries для каждого варианта изображения может привести к увеличению кода в несколько раз.

О'Коннор писал:

Почему я предлагаю коэффициент масштабирования, а не Media Queries? Media Queries работают за счет данных User Agent'а, мы же обсуждаем взаимоотношения между разными вариантами изображений. Так же, User Agent должен иметь возможность свободно выбирать вариант изображения которое лучше всего подходит для текущего состояния, учитывая не только параметры заданные с помощью Media Queries, но и размеры заданные элементу img с помощью CSS, а может даже и текущую величину масштабирования страницы.

Мне нравится идея дать возможность браузеру выбирать наиболее подходящий вариант изображения базируясь на таких данных как скорость приема информации, задержка, ppi, ориентация устройства и т.д. Идея в том, чтобы освободить разработчика от необходимости описывать условия при которых должен задействоваться тот или иной вариант изображения. Нужно указать лишь данные о изображении, размер и плотность, а браузер уже сам решит что лучше использовать в данной ситуации.

Предложенный атрибут srcset имеет два недостатка. Первый очень субъективный, но многие со мной согласятся: спецификация, какой она является сейчас имеет ужасный синтаксис:

<img src="face-600-200-at-1.jpeg" alt=""
srcset="face-600-200-at-1.jpeg 600w 200h 1x,
face-600-200-at-2.jpeg 600w 200h 2x,
face-icon.png 200w 200h">

Конечно же это может быть и должно быть исправлено. Дело не только в эстетике кода. Если синтаксис слишком запутан, то он будет использоваться не верно.

Вторая проблем состоит в том, что разработчики не желают лишится возможности управления процессом. Это вопрос потери доносимого смысла визуального контента (читайте абзац «Do I care about art direction?») и многие убеждены что Apple не подумали об этом. Хотя сторонники srcset придерживаются противоположного мнения.

Источник: HTML5 adaptive images: end of round one

Полезные ссылки:
— Немного о холиваре между разработчиками
— Which responsive images solution should you use?

Автор: roman01la