Ответ
<img> — это стандартный тег для вставки изображений. Он поддерживает атрибуты src, alt, width, height и другие.
<picture> — это контейнер для нескольких <source> и одного <img>. Позволяет адаптировать изображения под разные условия (разрешение экрана, плотность пикселей, формат).
Ключевые отличия:
<picture>поддерживает адаптивность через<source>с media-запросами.- Можно указывать разные форматы (WebP, AVIF) с fallback на
<img>.
Пример:
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.avif" type="image/avif">
<img src="image.jpg" alt="Fallback">
</picture>Если браузер поддерживает WebP/AVIF — загрузит их, иначе JPG.