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