Теория: Изображения, видео и аудио

Кратко

Медиа делает страницу наглядной, но требует аккуратной разметки.

  • <img> — пустой тег; src — путь к файлу, alt — текстовое описание.
  • width и height резервируют место — страница не «прыгает» при загрузке.
  • loading="lazy" откладывает загрузку картинок за пределами экрана.
  • <picture> + <source> отдают разные файлы под разную ширину экрана.
  • <figure> + <figcaption> связывают медиа с подписью.
  • <video> / <audio> — с controls, несколькими <source> и fallback-текстом.

Главная идея

Текст браузер рисует сам, а медиа — изображения, видео, звук — он подгружает отдельными файлами по ссылке. Наша задача — не просто «вставить картинку», а описать её так, чтобы страница оставалась понятной даже когда файл ещё не загрузился, не загрузился вовсе или читается голосом для незрячего пользователя. Поэтому у медиа-тегов так много «текстовых» атрибутов: они подстраховывают визуальное содержимое словами.

Представь книгу с иллюстрациями. Сама картинка — это src. Но под каждой иллюстрацией есть подпись (figcaption), а в конце книги — список иллюстраций с их описаниями (alt) для того, кто читает книгу «вслепую», на ощупь. Если страницу с картинкой вырвали (файл не загрузился), по подписи и описанию всё равно понятно, что там было. Хорошее медиа в HTML — это всегда «картинка + слова о ней».

Изображение <img>

<img> — одиночный (пустой) тег без закрывающей части. Два главных атрибута: src — путь к файлу, и alt — текстовая альтернатива. alt описывает смысл картинки, а не её внешний вид: не «фото jpg», а «студенты обсуждают макет у экрана». Этот текст видят поисковики (SEO) и слышат пользователи скринридеров (доступность), а ещё он показывается, если файл не загрузился. Для чисто декоративной картинки пишут пустой alt="" — но сам атрибут всё равно обязателен, иначе скринридер прочитает имя файла.

Размеры и lazy loading

Атрибуты width и height задают исходные пропорции файла в пикселях. Браузер по ним заранее резервирует место под картинку, и текст ниже не «прыгает» вниз, когда файл наконец докачался (это сдвиг макета, layout shift). Атрибут loading="lazy" говорит браузеру: не качай эту картинку, пока пользователь до неё не долистал. Так первый экран грузится быстрее.

Адаптивное изображение: <picture>

<picture> позволяет отдать разные файлы под разные условия: маленький файл на телефон, большой — на десктоп. Браузер идёт по <source> сверху вниз, проверяет условие media и берёт первый подходящий; если ни один не подошёл — показывает <img> внутри (он же — обязательный fallback).

телефон ≤ 600px → phone.jpg десктоп > 600px → wide.jpg <picture> выбирает source
Браузер сверяет ширину экрана с условиями source и берёт первый подходящий файл; <img> внутри — запасной вариант.

Подписи: <figure> и <figcaption>

<figure> — это самостоятельный смысловой блок (картинка, схема, фрагмент кода), а <figcaption> — его подпись. В отличие от alt, подпись видят все пользователи. Связка помогает скринридеру понять, что текст под картинкой относится именно к ней.

Видео и аудио

<video> и <audio> вставляют медиаплеер прямо в страницу. Атрибут controls добавляет кнопки play/пауза/громкость. Несколько вложенных <source> с разными type дают браузеру выбор формата (например, WebM и MP4), а текст после них — fallback для старых браузеров, которые тег вообще не понимают.

Зачем всё это: alt и figcaption — это доступность и SEO; width/height — стабильный макет; loading=lazy — скорость; picture — экономия трафика на мобильных. Каждый атрибут решает реальную проблему пользователя.