Ответ
Тег <picture> позволяет загружать разные изображения в зависимости от условий (разрешение экрана, плотность пикселей и т.д.). Он оборачивает несколько <source> и один <img> как fallback.
Пример:
<picture>
<source media="(min-width: 1200px)" srcset="large.jpg">
<source media="(min-width: 768px)" srcset="medium.jpg">
<img src="small.jpg" alt="Описание">
</picture>Ключевые особенности:
- Браузер выбирает первый подходящий
<source> - Если ни один не подошел — загружается
<img> - Поддерживает разные форматы (WebP/AVIF с fallback на JPEG/PNG)
- Оптимизирует загрузку, особенно для респонсива
Ответ 18+ 🔞
Да ты посмотри, какой хитрый тег придумали, блядь! <picture> — это ж целый стратег в мире картинок, ёпта! Сидит такой, оценивает обстановку: «Ага, у чувака экран широкий — дай-ка я ему большую картинку впихну. О, а тут телефон — на, получай мелкую, не грузи лишнее».
Вот смотри, как эта мартышлюшка работает:
<picture>
<source media="(min-width: 1200px)" srcset="large.jpg">
<source media="(min-width: 768px)" srcset="medium.jpg">
<img src="small.jpg" alt="Описание">
</picture>Суть в чём, блядь? Браузер тупо сверху вниз чекает эти <source>. Нашёл первый, который по условиям media подходит — бац, и грузит его. Всё, дальше даже не смотрит, ленивая жопа!
А если ни один не зашёл? Ну, бывает, экран какой-нибудь ебучий, нестандартный. Тогда, как последнюю надежду, тянет обычный <img> в самом низу. Это типа безусловный fallback, хуй с горы.
И главный фокус-покус — в форматах! Можно умничать, сука: «О, браузер современный, поддерживает WebP? На, жри сжатую картинку! А ты, старый пердун Internet Explorer, получи свой JPEG и не пизди». Экономия трафика — овердохуища!
Короче, штука для ленивой, но хитрой оптимизации. Чтобы не грузить на мобилку здоровенную фотку в 4К, от которой у устройства волосы дыбом встанут. Умно, блядь. Умно.