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