HTML таг `source`

Пример

Кратък пример как се използва тагът <source>.

<picture>
  <source srcset="image-large.jpg" media="(min-width: 992px)">
  <source srcset="image-medium.jpg" media="(min-width: 576px)">
  <img src="image-small.jpg" class="img-fluid" alt="Отзивчива примерна снимка">
</picture>

<audio controls>
  <source src="audio.ogg" type="audio/ogg">
  <source src="audio.mp3" type="audio/mpeg">
  Вашият браузър не поддържа аудио елемента.
</audio>

Опитай в редактора

Дефиниция и употреба

Виж как се ползва тагът <source>.

Елементът <source> се използва за задаване на алтернативни медийни източници (файлове) за елементите <audio>, <video> и <picture>. Той позволява на браузъра да избере най-подходящия формат или резолюция според поддръжката и характеристиките на устройството (размер на екрана, плътност на пикселите, предпочитан формат и др.).

<source> е самозатварящ се (void) елемент и не съдържа вътрешно съдържание. Обикновено се поставя вътре в контейнерния елемент, като се използват по няколко <source> тагa един след друг. Браузърът преминава през тях в реда, в който са дефинирани, и избира първия подходящ източник.

Най-често използвани атрибути са:

src – URL към медийния файл (използва се основно при <audio> и <video>).
srcset – списък от изображения с различни размери/резолюции (използва се при <picture> и отзивчиви изображения).
type – MIME тип на ресурса (напр. image/webp, audio/mpeg, video/mp4), помага на браузъра бързо да прецени дали поддържа формата.
media – медия заявка (media query), която определя при какви условия да се използва даденият източник (напр. ширина на екрана, ориентация и др.).
sizes – описва какъв размер ще заема изображението в различни viewport-и (използва се заедно със srcset).

При <audio> и <video> е добра практика да се предоставят няколко формата (например .mp3 и .ogg за аудио), за да се осигури максимална съвместимост между различните браузъри. При <picture> <source> позволява да се използват модерни формати като WebP и AVIF, с резервно изображение в по-широко поддържан формат като JPEG или PNG.

Browser Support

Browser	Поддръжка
Chrome	✔️
Firefox	✔️
Edge	✔️
Safari	✔️
Opera	✔️

Атрибути

Атрибут	Описание
`src`	Посочва URL на медийния файл (използва се основно с `<audio>` и `<video>`).
`srcset`	Задава списък от изображения с различни размери/резолюции за отзивчиви изображения (използва се с `<picture>` и `<img>`).
`type`	Определя MIME типа на ресурса (например `image/webp`, `audio/ogg`, `video/mp4`).
`media`	Медия заявка, която указва при какви условия да се използва този източник (напр. `(min-width: 768px)`).
`sizes`	Описва какъв размер ще заема изображението в различни viewport-и; използва се заедно със `srcset`.

Тагове

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 таг source