Как правильно работать с изображениями и медиа в HTML?

Вопрос

Как реализовать адаптивные изображения с помощью srcset/sizes и <picture>, и какие базовые возможности предоставляют теги <video> и <audio>?

Короткий ответ

srcset + sizes на <img> позволяют браузеру самому выбрать подходящий по разрешению файл из нескольких вариантов одного изображения. <picture> идёт дальше и позволяет менять сам источник (формат, art direction) в зависимости от условий через несколько <source>. <video>/<audio> дают встроенный плеер с несколькими источниками и текстовыми дорожками без сторонних библиотек.

Подробный ответ

srcset + sizes (один и тот же кадр, разное разрешение):

• srcset перечисляет варианты файла с дескриптором ширины (480w) или плотности пикселей (2x).
• sizes сообщает браузеру, какую ширину на экране займёт изображение при разных условиях viewport — это нужно до загрузки, чтобы браузер посчитал, какой из файлов в srcset скачивать.
• Решение о том, какой файл загрузить, браузер принимает сам на основе реального экрана и плотности пикселей (DPR), это разгружает верстальщика от ручных media query для картинок.

<picture> (разные источники, art direction / форматы):

• Содержит несколько <source> с условиями (media, type) и обязательный <img> как fallback.
• Используется, когда нужно не просто разное разрешение, а разный файл: например, WebP/AVIF с фоллбеком на JPEG через type, либо другой кадр для мобильного и десктопа через media (art direction — на мобильном показать более крупный план).
• Браузер выбирает первый подходящий <source> сверху вниз; если ни один не подошёл — рендерит <img>.

<video> / <audio>:

• Атрибуты controls, autoplay, muted, loop, poster (только у video) управляют плеером «из коробки».
• Несколько <source> с разными форматами (mp4, webm) дают fallback для браузеров без поддержки конкретного кодека.
• <track kind="subtitles"> добавляет субтитры/дорожки без JS.
• Автовоспроизведение со звуком браузеры блокируют политикой — для гарантированного autoplay видео должно быть muted.

Пример

<!-- srcset + sizes: один кадр, разное разрешение -->
<img
  src="cat-800.jpg"
  srcset="cat-400.jpg 400w, cat-800.jpg 800w, cat-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="Кот на подоконнике"
/>

<!-- picture: разные форматы + art direction -->
<picture>
  <source srcset="banner.avif" type="image/avif" />
  <source srcset="banner.webp" type="image/webp" />
  <source media="(max-width: 600px)" srcset="banner-mobile.jpg" />
  <img src="banner.jpg" alt="Баннер акции" loading="lazy" />
</picture>

<!-- video с несколькими форматами и субтитрами -->
<video controls poster="preview.jpg" width="640">
  <source src="movie.webm" type="video/webm" />
  <source src="movie.mp4" type="video/mp4" />
  <track kind="subtitles" src="subs-ru.vtt" srclang="ru" label="Русский" />
  Ваш браузер не поддерживает видео.
</video>

Дополнительные вопросы

• Чем дескриптор w в srcset отличается от дескриптора x?
• Как loading="lazy" влияет на производительность загрузки страницы?
• Почему autoplay без muted не сработает в большинстве браузеров?