Изображения и медиа
Правильный img, srcset и sizes, picture и форматы, SVG, видео.
Обновлено
Что значит медиа в HTML
Изображения, видео и иконки обычно составляют основную часть веса страницы. То, как вы добавляете их в HTML, определяет, насколько быстро грузится страница, «прыгает» ли вёрстка и доступны ли они.
img — важные атрибуты
<img src="/team.avif" alt="Команда в офисе" width="1200" height="600" loading="lazy" decoding="async" />| Атрибут | Роль |
|---|---|
alt |
альтернативный текст — обязателен; alt="" для декоративных изображений (Доступность) |
width / height |
исходные размеры — браузер резервирует место до загрузки изображения (без CLS) |
loading="lazy" |
загружается только при приближении к экрану — для изображений ниже первого экрана |
fetchpriority="high" |
максимальный приоритет — для главного изображения (LCP) |
decoding="async" |
декодирование не блокирует остальную страницу |
Когда заданы width и height, CSS img { max-width: 100%; height: auto } сохраняет пропорции и на маленьких экранах.
Адаптивные изображения: srcset и sizes
Телефону не нужна картинка шириной 2400px для монитора. Вы даёте браузеру варианты и позволяете ему выбрать:
<img
src="/hero-800.jpg"
srcset="/hero-400.jpg 400w, /hero-800.jpg 800w, /hero-1600.jpg 1600w"
sizes="(min-width: 64rem) 50vw, 100vw"
alt="..."
/>| Атрибут | Сообщает браузеру |
|---|---|
srcset |
какие файлы есть и какой ширины каждый (400w) |
sizes |
какой ширины будет изображение на экране в каждой ситуации |
Браузер учитывает ещё и плотность экрана и скачивает самый маленький достаточный вариант. next/image генерирует srcset автоматически.
picture — форматы и art direction
<picture>
<source type="image/avif" srcset="/hero.avif" />
<source type="image/webp" srcset="/hero.webp" />
<img src="/hero.jpg" alt="..." width="1200" height="600" />
</picture><picture> используют для |
Пример |
|---|---|
| современных форматов с запасным вариантом | AVIF → WebP → JPEG |
| art direction — другого кадрирования на мобильном | <source media="(max-width: 40rem)" srcset="/hero-portrait.jpg"> |
<img> внутри обязателен — именно он отображается, и на него ставят alt.
Форматы — какой и когда
| Формат | Для | Заметка |
|---|---|---|
| AVIF | фотографии | самый лёгкий, сегодня широко поддерживается |
| WebP | фотографии, иллюстрации | хороший запасной вариант |
| JPEG | фотографии | универсальный запасной вариант |
| PNG | изображения с прозрачностью, скриншоты | тяжёлый для фотографий |
| SVG | иконки, логотипы, векторные иллюстрации | идеально масштабируется, стилизуется через CSS (currentColor) |
Встроенный SVG или файл
Встроенный <svg> |
<img src="icon.svg"> |
|
|---|---|---|
Цвет из CSS (currentColor, hover) |
да | нет |
| Отдельный кэш | нет | да |
| Когда | иконки интерфейса | большие иллюстрации |
Декоративные иконки получают aria-hidden="true"; смысловые — role="img" + aria-label (или видимый текст рядом).
Видео и аудио
<video src="/demo.mp4" controls muted playsinline preload="metadata" poster="/demo.jpg" width="1280" height="720">
<track kind="captions" src="/demo.ru.vtt" srclang="ru" label="Русский" />
</video>autoplay работает только с muted; poster показывает картинку до запуска; <track> добавляет субтитры (доступность).
Коротко
img:alt,width/height,lazyниже первого экрана,fetchpriority="high"для главного изображения.srcset+sizesдля размеров,<picture>для форматов и art direction.- AVIF/WebP для фото, SVG для иконок; видео с
controls,poster, субтитрами.