<source>

Указывает на разные форматы медиа, из которых браузер выбирает оптимальный.

Время чтения: 5 мин

Кратко

Секция статьи "Кратко"

При помощи тега <source> можно указать несколько источников для видео (<video>), аудио (<audio>) или изображения (<picture>). Очень пригождается, когда нужно подключить контент в нескольких форматах для лучшей поддержки в разных браузерах.

Пример

Секция статьи "Пример"

Пример указания пути до видеофайла в форматах WebM и MP4:

        
          
          <video controls width="250" height="200" muted>  <source src="birthday.webm" type="video/webm">  <source src="birthday.mp4" type="video/mp4"></video>
          <video controls width="250" height="200" muted>
  <source src="birthday.webm" type="video/webm">
  <source src="birthday.mp4" type="video/mp4">
</video>

        
        
          
        
      

Пример указания пути до аудиофайла в форматах MP3 и OGG:

        
          
          <audio controls>  <source src="song.mp3" type="audio/mpeg">  <source src="song.ogg" type="audio/ogg"></audio>
          <audio controls>
  <source src="song.mp3" type="audio/mpeg">
  <source src="song.ogg" type="audio/ogg">
</audio>

        
        
          
        
      

Пример использования тега <source> для адаптивных изображений. При ширине экрана от 0 до 599 пикселей будет загружено изображение small.jpg, на ширине экрана от 600 пикселей будет загружено изображение big.jpg:

        
          
          <picture>  <source srcset="big.jpg" media="(min-width: 600px)">  <img src="small.jpg" alt="Абстрактное изображение"></picture>
          <picture>
  <source srcset="big.jpg" media="(min-width: 600px)">
  <img src="small.jpg" alt="Абстрактное изображение">
</picture>

        
        
          
        
      

Как это понять

Секция статьи "Как это понять"

Когда мы хотим вставить на страницу аудио- или видеофайл, то используем теги <audio> и <video>. Если у нас есть несколько одинаковых файлов разного формата (например, один и тот же видеоролик в форматах .mp4 и .webm), то можно использовать тег <source>. Он поможет определить, какие форматы поддерживает браузер, и загрузить медиафайл в нужном формате.

С адаптивными изображениями чуть сложнее. Тег <source> используется совместно с тегами <picture> и <img>, чтобы определить, какое изображение должен загрузить браузер при разных условиях.

Как пишется

Секция статьи "Как пишется"

В теге <source> могут использоваться атрибуты:

src

Секция статьи "src"

Требуется только для использования внутри тегов <audio> и <video>. В атрибуте указывается путь до медиафайла. Если тег <source> находится внутри <picture>, то атрибут src игнорируется.

        
          
          <audio controls>  <source src="song.mp3" type="audio/mpeg">  <source src="song.ogg" type="audio/ogg"></audio>
          <audio controls>
  <source src="song.mp3" type="audio/mpeg">
  <source src="song.ogg" type="audio/ogg">
</audio>

        
        
          
        
      

type

Секция статьи "type"

Содержит указание на MIME-тип медиафайла. Если у нас есть несколько одинаковых видеофайлов разного формата, то атрибут type помогает выбрать первый поддерживаемый браузером:

        
          
          <video controls width="250" height="200" muted>  <source src="birthday.webm" type="video/webm">  <source src="birthday.mp4" type="video/mp4"></video>
          <video controls width="250" height="200" muted>
  <source src="birthday.webm" type="video/webm">
  <source src="birthday.mp4" type="video/mp4">
</video>

        
        
          
        
      

Если браузер поддерживает формат WebM, то будет загружен файл из первого тега <source>. Если нет, то из второго. Обычно перечисляют несколько форматов видео или аудио, начиная с самого эффективного по соотношению «размер-качество».

media

Секция статьи "media"

Может использоваться в <source> только внутри элемента <picture>. Атрибут содержит медиавыражение для выбора нужного изображения.

        
          
          <picture>  <source srcset="big.jpg" media="(min-width: 600px)">  <img src="small.jpg" alt="Абстрактное изображение"></picture>
          <picture>
  <source srcset="big.jpg" media="(min-width: 600px)">
  <img src="small.jpg" alt="Абстрактное изображение">
</picture>

        
        
          
        
      

При ширине экрана от 600 пикселей будет загружено изображение из тега <source>. В других случаях — из тега <img>.

srcset

Секция статьи "srcset"

В атрибуте srcset через запятую перечисляются строки, которые дают браузеру информацию об изображениях. Каждая строка состоит из следующих частей:

  • URL изображения (например,1024x768.png);
  • целое число, за которым идёт буква w (например, 1024w). Число указывает на ширину изображения в пикселях;
  • число, за которым идёт буква x (например, 1.5x). Число указывает на плотность пикселей, для которой будет использоваться изображение.

Например, атрибут может выглядеть так:

        
          
          <source srcset="640x480.png 1x, 1280x960.png 2x">
          <source srcset="640x480.png 1x, 1280x960.png 2x">

        
        
          
        
      

Эта запись означает, что для экранов с обычной плотностью пикселей будет использовано изображение 640x480.png, а для экранов с удвоенной плотностью пикселей (например, для retina-экранов) — 1280x960.png.

Другой вариант записи атрибута:

        
          
          <source srcset="1024x768.png 1024w, 640x480.png 640w">
          <source srcset="1024x768.png 1024w, 640x480.png 640w">

        
        
          
        
      

Здесь мы говорим браузеру, что изображение 1024x768.png имеет ширину 1024 px, а изображение 640x480.png — 640 px. Эта информация помогает браузеру определить, какое изображение выбрать при разборе соседнего атрибута sizes.

sizes

Секция статьи "sizes"

Атрибут sizes говорит браузеру, какой ширины нам понадобится изображение из текущего элемента <source> при отрисовке страницы. Можно сказать, что браузер определяет ширину слота для изображения. Так мы заранее сообщаем браузеру, сколько места на странице «забронировать» под изображение. Значением атрибута может быть либо абсолютное значение (например, 150px или 30em), либо относительное от вьюпорта (например, 20vw). Значения в процентах не разрешены.

Атрибуты srcset и sizes эффективно работают в паре. Рассмотрим пример:

        
          
          <source  srcset="640x480.png 640w, 1024x768.png 1024w"  sizes="(max-width: 1200px) 50vw, 1024px">
          <source
  srcset="640x480.png 640w, 1024x768.png 1024w"
  sizes="(max-width: 1200px) 50vw, 1024px">

        
        
          
        
      

Когда браузер разбирает тег <source>, он выполняет следующие действия:

  • смотрит на текущую ширину окна браузера;
  • ищет подходящий вариант из атрибута sizes, с учётом плотности пикселей;
  • выбирает из атрибута srcset подходящую картинку для слота: больше или равную ему.

Как сработает наш пример при разных ширинах:

  • 1000 пикселей: срабатывает условие (max-width: 1200px) (1200 пикселей или меньше), и браузер устанавливает ширину слота 50vw (500 пикселей в нашем случае). Из списка srcset браузер выбирает подходящую картинку: на 1x-экране покажется 640x480.png, на 2x-экране покажется 1024x768.png — ближайшие к ширине слота 500 пикселей.
  • 1201 пиксель: не срабатывает условие (max-width: 1200px), и ширина слота выбирается из списка sizes — это 1024px. У браузера в srcset самая большая картинка равна ширине слота 1024x768.png 1024w, а значит и на 1x-, и на 2x-экране будет картинка 1024x768.png.
Открыть демо в новой вкладке

На практике

Секция статьи "На практике"

Денис Ежков советует

Секция статьи "Денис Ежков советует"

🛠 Использование атрибутов srcset и sizes отлично работает и просто в теге <img>, а теги <source> чаще всего используются совместно с атрибутом type. Подготовка и указание изображений, видео или аудио различных типов помогает браузеру выбрать наиболее эффективный поддерживаемый формат.

        
          
          <picture>  <source type="image/avif" srcset="photo.avif">  <source type="image/webp" srcset="photo.webp">  <source type="image/jpeg" srcset="photo.jpg">  <img src="photo.jpg" alt="Тестовая картинка"></picture>
          <picture>
  <source type="image/avif" srcset="photo.avif">
  <source type="image/webp" srcset="photo.webp">
  <source type="image/jpeg" srcset="photo.jpg">
  <img src="photo.jpg" alt="Тестовая картинка">
</picture>