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	✔️

Атрибути

Този елемент няма специфични атрибути.

Тагове

a abbr address area article aside audio b base bdi bdo blockquote body br button canvas caption cite code col colgroup data datalist dd del details dfn dialog div dl dt em embed fencedframe fieldset figcaption figure footer form h1 h2 h3 h4 h5 h6 head header hgroup hr html i iframe img input ins kbd label legend li link main map mark menu meta meter nav noscript object ol optgroup option output p picture pre progress q rp rt ruby s samp script search section select selectedcontent slot small source span strong style sub summary sup table tbody td template textarea tfoot th thead time title tr track u ul var video wbr

HTML таг picture