foundation

HTML-медиа

Изображения, адаптивные картинки, video, audio, captions, стратегия загрузки и доступные альтернативы.

Разметка медиа влияет на доступность, стабильность layout и производительность. Изображениям нужен осмысленный alt и адаптивные источники; video и audio — controls, субтитры и осознанный preload.

Подтемы: адаптивные изображения (`srcset`, `sizes`, `picture`); controls, captions, transcripts и политика autoplay.

На интервью: alt text, CLS, lazy loading и стратегия для LCP-изображения.

Типовые ошибки: декоративные картинки с «шумным» alt; lazy-load на LCP hero; autoplay со звуком.

Чеклист:

Alt соответствует роли изображения.
Резервируйте размеры против CLS.
Адаптивные изображения для трафика.
Captions и controls для медиа по времени.