Попробовать демоверсию
- Чтобы посмотреть сайт, нажмите View App (Посмотреть приложение), а затем – Fullscreen (Полноэкранный режим)
. - Перезагрузите приложение, используя разные размеры браузера. Обратите внимание, насколько они разные: у них не только разные размеры, но и разное кадрирование и соотношение сторон.
Что здесь происходит?
Художественное оформление позволяет показывать разные изображения на экранах разных размеров.
Адаптивное изображение загружается в разных размерах. Художественное направление делает еще один шаг вперед и загружает совершенно разные изображения в зависимости от дисплея.
Используйте художественное руководство, чтобы улучшить визуальное представление. Например, на этой демонстрации разные варианты кадрирования изображения гарантируют, что интересующий объект (цветок) всегда будет показан в деталях, независимо от дисплея. Преимущества арт-дирекшена чисто эстетические, он не дает никаких преимуществ в производительности по сравнению с адаптивными изображениями.
Ознакомьтесь с кодом
- Посмотрите
index.html, чтобы увидеть код художественного оформления для этой демонстрации.
Как работает код
Для этого используются теги <picture>, <source> и <img>.
picture
Тег <picture> служит контейнером для одного или нескольких тегов <source> и одного тега <image>.
source
Тег <source> указывает на медиаресурс.
Браузер использует первый тег <source> с запросом медиа, который возвращает значение true. Если ни один из запросов медиа не подходит, браузер загружает изображение, указанное в атрибуте <img>.
.
img
Тег <img> позволяет коду работать в браузерах, которые не поддерживают тег <picture>.
Если браузер не поддерживает тег <picture>, он загружает изображение, указанное в теге <img>.