<picture> позволяет браузеру выбирать между несколькими источниками изображений в зависимости от размера экрана и ориентация устройства.Код выглядит так:
Код: Выделить всё
<picture>
<source media="(orientation: landscape)"
srcset="images/stories/001-home/pc-img_5454_600.jpg 1200w,
images/stories/001-home/pc-img_5454_600.jpg 800w,
images/stories/001-home/pc-img_5454_600.jpg 600w"
sizes="(min-width: 768px) 800px,
100vw">
<source media="(orientation: portrait)"
srcset="images/stories/001-home/mob-img_5454_800.jpg 800w,
images/stories/001-home/mob-img_5454_600.jpg 600w"
sizes="(min-width: 768px) 800px,
100vw">
<img src="images/stories/001-home/mob-img_5454_600.jpg" alt="Примеры работ" title="Откройте галерею" width="420" height="750" class="image_big center horizontal animated" >
</picture>
<picture> находятся два элемента <source> и один элемент <img>.1. Первый элемент
<source> (для ландшафтной ориентации)(orientation: landscape) — этот элемент будет применяться только на устройствах, находящихся в горизонтальной ориентации.
(min-width: 768px) 800px — если ширина экрана 768 пикселей или больше, браузер покажет изображение 800 пикселей.100vw — в противном случае (если условие не выполняется), изображение будет занимать 100% ширины окна просмотра.2. Второй элемент <source> (для портретной ориентации)
media: "(orientation: portrait)" — элемент применяется только на устройствах в портретной ориентации (вертикально).srcset:
- Здесь две версии изображений:
- "images/stories/001-home/mob-img_5454_800.jpg 800w" — изображение шириной 800 пикселей.
- "images/stories/001-home/mob-img_5454_600.jpg 600w" — изображение шириной 600 пикселей.
- sizes:
- "(min-width: 768px) 800px" — если ширина экрана 768 пикселей или больше, изображение будет отображаться шириной 800 пикселей.
- 100vw — в противном случае изображение будет занимать 100% ширины окна просмотра.
3. Элемент <img>
Код: Выделить всё
<img src="images/stories/001-home/mob-img_5454_600.jpg" alt="Примеры работ" title="Откройте галерею" width="420" height="750" class="image_big center horizontal animated">- width и height: Указывают размеры изображения, помогая браузеру резервировать нужное пространство на странице до загрузки изображения.
Как это работает <picture> в сборе
2. Если устройство в ландшафтной ориентации и ширина экрана соответствует условиям, браузер выбирает подходящее изображение из первого <source>.
3. Если устройство в портретной ориентации, браузер выбирает изображение из второго <source>.
4. Если ни одно из условий не выполняется, браузер использует изображение по умолчанию из элемента <img>.
5. Браузер выбирает изображение с наилучшим разрешением, основываясь на srcset и sizes.
Таким образом, данный код позволяет адаптивно загружать изображения в зависимости от ориентации устройства и ширины экрана, что оптимизирует веб-страницу.
