Разметку адаптивных изображений можно разделить на два сценария: ситуация, когда целью является максимально эффективное изображение, и ситуация, когда вам нужен явный контроль над тем, какое исходное изображение выберет браузер. Можно считать, что это описательный и предписывающий синтаксис, соответственно.
В этом разделе вы изучите оба подхода. Сначала мы расскажем об атрибутах srcset и sizes, а также о том, как помочь браузеру сделать наилучший выбор, основываясь на том, что он знает о пользователе, его устройстве и ситуации. Затем вы познакомитесь с элементом <picture>, который позволяет явно контролировать выбор источника на основе таких факторов, как размер области просмотра и поддержка браузером форматов изображений.
Описательный синтаксис
Описательный синтаксис даёт браузеру информацию об источниках изображений и о том, как они будут использоваться, но в конечном итоге оставляет принятие решений за браузером. Это, безусловно, наиболее распространённый сценарий; для подавляющего большинства изображений вам не понадобится детальный контроль над поведением браузера. Браузеры обладают гораздо большей информацией, чем веб-разработчики, и на основе этой информации могут принимать сложные решения. Вы не можете точно предсказать контекст просмотра пользователей, поскольку не можете знать достаточно об их оборудовании, предпочтениях и скорости соединения. В лучшем случае вы можете сделать обоснованные предположения, но наверняка не можете знать, как каждый пользователь взаимодействует с Интернетом. С точки зрения разработчика основной вариант использования адаптивных изображений строго ориентирован на достижение цели: позволить браузерам выполнять максимально эффективные запросы изображений на основе информации, имеющейся у браузера.
Чтобы браузеры могли делать свой выбор, атрибут srcset позволяет указать браузеру список потенциальных источников для работы одного <img>, а sizes даёт браузеру информацию о том, как этот <img> будет отображаться. Вы узнаете как их использовать в следующем разделе.
Предписывающий синтаксис
При использовании предписывающего синтаксиса вы указываете браузеру, что делать — какой источник выбрать на основе определённых вами критериев. Хотя этот вариант использования не так распространён, как «просто загрузите наиболее эффективный ресурс для отображения этого изображения», он позволяет дать браузеру инструкции по использованию, учитывающие информацию, которой он не располагает до передачи ресурсов, например содержимое источников или их форматы.
Хотя атрибуты srcset и sizes предлагают синтаксис для отправки информации в браузер пользователя и позволяют ему принимать решения об источниках изображений, бывают случаи, когда требуется явный контроль над тем, какой исходный файл будет представлен и когда. Например, вы можете отображать версии одного и того же изображения с разным соотношением сторон, исходя из различных дизайнерских решений, или убедиться, что только браузеры с поддержкой определённого формата получат нужные источники.
В таких случаях вам нужен явный контроль над тем, какой источник отображается и когда. Это гарантии, которые srcset и sizes не могут нам дать по своему предназначению. Чтобы получить такой контроль нужно использовать элемент <picture>.