Картинка без описания против доступного медиа

Кратко

Старый <img> без alt и размеров → современный: с alt, width/height и loading="lazy".

Изображение: было → стало

Старый подход

Вставить картинку «как есть»: без описания, без размеров. Скринридер прочитает имя файла, а текст ниже прыгнет вниз, когда картинка докачается.

<img src="hero.jpg">

Современный подход

Описываем смысл, резервируем место под размеры и откладываем загрузку невидимых картинок.

<img src="hero.jpg"
     alt="Закат над горным озером"
     width="1200" height="800"
     loading="lazy">

Почему это видно глазами: сдвиг макета

Слева — без размеров: пока картинки нет, под ней пусто, и текст потом прыгает. Справа — с width/height: место зарезервировано заранее.

без размеров — текст подскочит

img грузится…

Текст под картинкой

с width/height — место занято

место зарезервировано

Текст под картинкой

<!-- задаём размеры, чтобы блок не «прыгал» -->
<img src="hero.jpg" alt="…" width="1200" height="800">

Видео: было → стало

Старый подход

<video src="intro.mp4"></video>

Нет кнопок управления, один формат, нет текста для старых браузеров.

Современный подход

<video controls width="640">
  <source src="intro.webm" type="video/webm">
  <source src="intro.mp4"  type="video/mp4">
  Ваш браузер не поддерживает встроенное видео.
</video>