Тег <source>: выбор ресурса в picture и медиаплеере

Назначение

Элемент source предлагает браузеру варианты изображения, видео или звука. Его атрибуты зависят от родителя: для picture используются srcset и условия выбора, для аудио и видео — src.

Как это работает

В picture браузер рассматривает source по порядку, проверяя media и поддерживаемый type. Завершающий img обязателен как элемент изображения и запасной вариант; альтернативный текст задаётся именно ему.

Пример

<picture>
  <source media="(min-width: 60rem)" srcset="/images/desk-wide.webp" type="image/webp">
  <img src="/images/desk-small.jpg" alt="Рабочий стол с открытым редактором" width="640" height="400">
</picture>

Что должно получиться

На широком окне при поддержке WebP выбирается широкий ресурс; иначе используется img. Изображения должны существовать и подходить по композиции. Размеры в примере предполагают одинаковые пропорции подготовленных файлов.

Граница применения и частая ошибка

Source не имеет закрывающего тега и не получает alt вместо img. Условия media проверяют окно, а не произвольный контейнер. При проверке уже загруженного изображения браузер может сохранять подходящий ресурс в кеше.

Самостоятельная проверка

Подготовьте два изображения с одинаковыми пропорциями. Измените окно, перезагрузите страницу с отключённым кешем и посмотрите currentSrc у img в DevTools. Убедитесь, что смысл alt верен для обеих версий.

Связанные материалы

• Видео
• Семантика
• Клавиатура