Пост👩‍💻 Адаптирует картинки под разные устройства и поддерживаемые форматы!

👩‍💻 Адаптирует картинки под разные устройства и поддерживаемые форматы! Тег <picture> позволяет браузеру выбирать подходящую версию изображения в зависимости от размера экрана, поддерживаемого формата или других условий. Внутри <picture> обычно размещают: • <source> — задаёт альтернативные версии изображения; • srcset — указывает файл изображения; • media — определяет условие выбора, например ширину экрана; • type — указывает MIME-тип формата, например image/avif; • <img> — служит основным или резервным вариантом изображения. Браузер анализирует каждый тег <source> по порядку, останавливается на первом подходящем под текущие условия и отображает картинку из атрибута srcset. Другие теги не анализируются. Если тег <picture> не поддерживается браузером или ни один из тегов <source> не подходит под условия, то отображается картинка из тега <img>. 📣 Code Ready | #атрибут