HTML таг picture
Пример
Кратък пример как се използва тагът <picture>.
<picture>
<source srcset="images/hero-large.webp" type="image/webp" media="(min-width: 992px)">
<source srcset="images/hero-medium.webp" type="image/webp" media="(min-width: 576px)">
<source srcset="images/hero-small.webp" type="image/webp">
<source srcset="images/hero-large.jpg" type="image/jpeg" media="(min-width: 992px)">
<source srcset="images/hero-medium.jpg" type="image/jpeg" media="(min-width: 576px)">
<img src="images/hero-small.jpg" class="img-fluid" alt="Планински пейзаж при изгрев">
</picture>
Опитай в редактора
Дефиниция и употреба
Елементът <picture> се използва за дефиниране на адаптивни (responsive) изображения, като позволява да се посочат различни източници на изображението в зависимост от размера на екрана, плътността на пикселите или поддържания файлов формат от браузъра.
Вътре в <picture> се поставят едно или повече <source> елемента и задължително един <img> елемент като последен. Браузърът преминава през <source> елементите отгоре надолу и избира първия, ч чиито условия (например media или type) са изпълнени. Ако нито един <source> не е подходящ или не се поддържа, се използва изображението от <img> като резервен вариант (fallback).
Типични сценарии за използване на <picture> са:
- Зареждане на различни размери на едно и също изображение за мобилни, таблети и десктоп устройства (чрез атрибута
mediaна<source>). - Предлагане на модерни формати като WebP или AVIF, с резервен JPEG/PNG вариант (чрез атрибута
type). - Използване на различни композиции/изрязвания на изображението за различни екрани (например хоризонтална версия за десктоп и вертикална за мобилни).
Важно е винаги да се задава атрибут alt на <img> за по-добра достъпност и SEO. Елементът <picture> сам по себе си не показва съдържание – той служи като контейнер, който управлява избора на подходящ източник за <img>.
Browser Support
| Browser | Поддръжка |
|---|---|
|
Chrome |
✔️ |
|
Firefox |
✔️ |
|
Edge |
✔️ |
|
Safari |
✔️ |
|
Opera |
✔️ |
Атрибути
Този елемент няма специфични атрибути.