# HTML ТЕГ
Чтобы показывать разные изображения в зависимости от устройства (ширины экрана), вы можете использовать тег <picture>.
Тег <picture> является оболочкой для элементов <source> и <img>, что позволяет браузеру выбирать подходящий источник изображения.
Тег <img> здесь очень важен — без него <picture> не может существовать. Мы используем этот элемент для того, чтобы данные из <source> были применены после выбора подходящего источника.
Тег <picture> является более продвинутым аналогом тега <img> и имеет интуитивный синтаксис.
## Преимущества тега <picture>
### 1) Использование различных форматов изображений
Тег <picture> позволяет использовать новые форматы (например, webp, avif) без беспокойства о поддержке старыми браузерами. Для этого вы можете указать тип изображения в атрибуте type; браузер использует первый поддерживаемый тип.
Выбор подходящего варианта происходит сверху вниз (первый подходящий вариант будет использован):
```html
Тип изображения, указанный в <source>, должен соответствовать типу, указанному в type.
Не используйте атрибут media, если художественное оформление не требуется.
Вы также можете использовать srcset и sizes.
Разные размеры (для экранов Retina):
Атрибут media
В теге <source> вы также можете использовать атрибут media, чтобы задать ширину экрана, для которой это изображение должно использоваться:
Атрибут sizes
Этот атрибут позволяет указать размер изображения (ширину) для заданного размера экрана:
2) Художественное оформление
Художественное оформление — это техника, при которой для разных размеров экранов отображаются разные изображения. Например, если у нас есть пейзаж с человеком в центре. Такое изображение подходит для большого экрана, так как человека хорошо видно, но для маленького экрана лучше показать обрезанное изображение с увеличенным человеком.
Например, у нас есть изображение, требующее художественного оформления:
Давайте исправим это, используя <picture>.
Комментарии к коду:
Атрибут media элемента <source> содержит условие, по которому браузер выбирает, какое изображение использовать. Например, если ширина окна просмотра (viewport) 800 пикселей или меньше, будет показано изображение из первого элемента <source>; если ширина больше, будет использовано второе изображение.
Атрибут srcset содержит URL изображения. Здесь вы также можете указать набор дескрипторов и добавить атрибут sizes, но использование тега <picture> вряд ли будет продуктивным.
Тег <img src="" alt=""> с атрибутами src и alt должен быть указан перед закрывающим тегом </picture>, иначе изображения не появятся! Этот тег нужен для поисковых роботов и в случае, если браузер не может выбрать изображение на основе заданных условий.
Показ различных изображений (художественное оформление) также можно реализовать через srcset, но удобнее использовать <picture>.
Поддержка браузеров
Тег <picture> для SEO и почему его стоит забыть
С помощью этого тега легко и без проблем перейти на использование альтернативных графических форматов. Достаточно указать ваши изображения (jpeg, png, webp) внутри этого тега, и браузер сам решит, какое использовать.
Если вы решите серьезно заняться технической оптимизацией, стоит забыть о теге <picture>.
Потому что при отрисовке с помощью тега <picture>, как и с тегом <img>, у вас получится как минимум тройное увеличение узлов в дереве DOM для каждого изображения. Идеальным верхним пределом вашего дерева DOM считается около 1500 узлов. Для многих этот предел превышен. А каждый узел в дереве DOM — это расход памяти и замедление работы скриптов.
