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