Кратко

  • В феврале 2013 года W3C опубликовал первые проекты элемента picture и требований к адаптивным изображениям, подготовленные вместе с Responsive Images Community Group.
  • Нынешний HTML позволяет предлагать варианты разрешения через srcset и sizes, а разные композиции — через picture, source и условие media.

Фоторедактору принесли снимок побережья. В нем много воздуха: тяжелые облака, камни, прибой и маяк вдали. Для широкой полосы это достоинство. Для узкой колонки нужна другая рамка — ближе к маяку. В раннем адаптивном вебе колонка легко меняла ширину, а изображение часто оставалось привязанным к одному адресу в img src. Браузер добросовестно ужимал всю сцену и превращал ее героя в предмет для викторины «найди точку».

Скрипт мог подменить адрес после загрузки страницы, но браузер обычно хочет как можно раньше начать получать изображения. Для быстрой и осмысленной загрузки варианты следовало объявить в самом HTML. Тогда машина могла увидеть их во время разбора документа, а не ждать, пока после нее проснется чужой сценарий.

26 февраля 2013 года W3C сообщил о двух первых публичных рабочих проектах. Один предлагал элемент picture, второй описывал задачи адаптивных изображений. Над обоими работали вместе с Responsive Images Community Group. Пара документов хорошо ставила вопрос: прежде чем спорить о написании тега, нужно понять, зачем фотография меняется при переходе с одного экрана на другой.

Первый проект picture называл его контейнером, источник которого определяется медиаусловиями CSS. В разметке можно было показать несколько кандидатов и условия их использования. Это был рабочий проект, а детали синтаксиса еще развивались. Важнее была модель: издатель готовит варианты заранее, браузер выбирает вариант для текущей среды.

Документ W3C о сценариях применения, опубликованный в ноябре 2013 года, разводит две работы, которые часто называют одним словом «адаптация». Первая касается разрешения. Композиция сохраняется, а количество пикселей меняется под плотность экрана и место в макете. Вторая касается художественного кадрирования. Для узкого экрана человек может приблизить героя группового портрета или обрезать широкий берег так, чтобы маяк вновь стал видимым. Увеличение числа пикселей в исходном панорамном кадре сделает исчезающий маяк лишь более четким при исчезновении.

Современная глава о изображениях в стандарте HTML от WHATWG дает этим задачам разные инструменты. srcset предлагает файлы с указанием плотности пикселей. Если видимая ширина изображения зависит от окна, дескрипторы ширины вместе с sizes описывают предполагаемое место в макете. Браузер учитывает плотность дисплея, масштаб и другие условия, выбирая из объявленного набора. Редакция составляет меню, браузер знает размеры стола.

Смену композиции обеспечивает picture с вложенными source. Источник может содержать условие media и набор изображений. Браузер просматривает источники по порядку, берет первый подходящий и выбирает файл из его кандидатов. Вложенный img остается элементом изображения и запасным путем. Для широкого экрана можно предложить весь берег, для телефона — подготовленный редактором крупный кадр маяка. Машине достается выбор между готовыми работами, а не задача угадать предмет фотографии.

Два механизма удобно сочетать. Крупный кадр для телефона может существовать в нескольких разрешениях. Панорама для большого экрана — тоже. Сначала решается вопрос о композиции, затем о конкретном файле. Иначе можно с удивительным трудолюбием подготовить четыре размера фотографии, на каждой из которых читателю все равно придется искать маяк.

Текстовая альтернатива в img удерживает смысл для тех, кто получает описание вместо картинки. Если статья говорит о маяке, описание должно передать роль маяка, даже когда разные экраны показывают разные границы кадра. Чем больше визуальных вариантов, тем полезнее ясное редакционное ядро изображения.

История 2013 года показывает, как веб распределил работу. Страница уже умела менять форму. Для фотографии понадобился способ сохранить главного героя при этом превращении. Редактор решает, какие кадры предложить, браузер выбирает подходящий файл. На телефоне маяк снова становится маяком, а не испытанием зрения.