<source>

При помощи тега <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> могут использоваться атрибуты:

Требуется только для использования внутри тегов <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>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

Может использоваться в <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 через запятую перечисляются строки, которые дают браузеру информацию об изображениях. Каждая строка состоит из следующих частей:

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

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

        
          
          <source  srcset="images/600x100.png 600w, images/1000x200.png 1000w"  sizes="(max-width: 1200px) 50vw, 1000px">
          <source
  srcset="images/600x100.png 600w, images/1000x200.png 1000w"
  sizes="(max-width: 1200px) 50vw, 1000px">

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

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

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать