Изображения

Элемент <img> вставляет изображение в документ. Атрибуты srcset, sizes и элемент <picture> обеспечивают адаптивность.

Зачем нужно

Изображения -- важная часть контента. Правильное использование <img> влияет на скорость загрузки (Core Web Vitals), SEO (alt-текст), доступность (screen readers) и адаптивность (мобильные устройства).

Где используется

  • Контентные изображения (фото, иллюстрации, диаграммы)
  • Аватары и логотипы
  • Товарные карточки
  • Галереи

Предпосылки

Базовый <img>

<img src="photo.jpg" alt="Закат над морем" width="800" height="600">

Обязательные атрибуты

Атрибут Назначение
src Путь к изображению (обязателен)
alt Альтернативный текст (обязателен для a11y)

Рекомендуемые атрибуты

Атрибут Назначение
width Ширина в px (предотвращает CLS)
height Высота в px (предотвращает CLS)
loading "lazy" / "eager" -- отложенная загрузка
decoding "async" / "sync" / "auto" -- декодирование
fetchpriority "high" / "low" / "auto" -- приоритет загрузки

Атрибут alt -- правила

<!-- Контентное изображение: описывай ЧТО на картинке -->
<img src="chart.png" alt="График роста продаж: с 10 до 50 млн за 2025 год">

<!-- Ссылка-изображение: описывай КУДА ведёт -->
<a href="/profile">
  <img src="avatar.jpg" alt="Профиль Ивана Петрова">
</a>

<!-- Декоративное изображение: пустой alt -->
<img src="decorative-line.svg" alt="">

<!-- Изображение с текстом: воспроизведи текст -->
<img src="banner.jpg" alt="Скидка 50% на все товары до конца апреля">

<!-- Иконка рядом с текстом: пустой alt (текст уже есть) -->
<button>
  <img src="icon-save.svg" alt=""> Сохранить
</button>

Правила alt-текста:

  • Не начинай с "Изображение..." или "Картинка..." -- screen reader и так объявит "image"
  • Описывай содержание, а не файл ("Котёнок спит на подушке", а не "photo123.jpg")
  • Для декоративных -- пустой alt="" (не пропускай атрибут!)
  • Длина: до 125 символов (рекомендация)

width и height -- борьба с CLS

CLS (Cumulative Layout Shift) -- метрика сдвига контента при загрузке. Без width/height браузер не знает размеры картинки до загрузки, и контент "прыгает".

<!-- ПЛОХО: нет размеров -- CLS -->
<img src="photo.jpg" alt="Фото">

<!-- ХОРОШО: браузер резервирует место -->
<img src="photo.jpg" alt="Фото" width="800" height="600">

/* Чтобы картинка была адаптивной, но сохраняла пропорции */
img {
  max-width: 100%;
  height: auto;
}

Браузер использует width и height для расчёта aspect ratio ещё до загрузки изображения.

srcset и sizes -- адаптивные изображения

Разные размеры для разных экранов

<img
  src="photo-800.jpg"
  srcset="
    photo-400.jpg   400w,
    photo-800.jpg   800w,
    photo-1200.jpg 1200w,
    photo-1600.jpg 1600w
  "
  sizes="
    (max-width: 600px) 100vw,
    (max-width: 1200px) 50vw,
    33vw
  "
  alt="Пейзаж"
  width="800"
  height="600"
>
  • srcset -- список изображений с их реальной шириной (w-дескриптор)
  • sizes -- какую ширину изображение займёт при каждом размере viewport
  • Браузер сам выбирает оптимальное изображение с учётом DPR

Для Retina (DPR)

<img
  src="logo.png"
  srcset="
    logo.png    1x,
    logo@2x.png 2x,
    logo@3x.png 3x
  "
  alt="Логотип"
  width="200"
  height="50"
>

<figure> и <figcaption>

Группирует изображение с подписью:

<figure>
  <img src="diagram.png" alt="Схема HTTP-запроса: клиент отправляет запрос серверу" width="600" height="400">
  <figcaption>Рис. 1: Схема HTTP-запроса от клиента к серверу</figcaption>
</figure>

<figure> может содержать не только изображения, но и код, таблицы, цитаты -- всё, что является иллюстрацией.

Lazy loading -- отложенная загрузка

<!-- Изображения ниже viewport загрузятся когда пользователь проскроллит -->
<img src="photo.jpg" alt="Фото" width="800" height="600" loading="lazy">

<!-- Главное изображение (LCP) -- загрузить сразу -->
<img src="hero.jpg" alt="Баннер" width="1200" height="600"
     loading="eager" fetchpriority="high">

Правило: loading="lazy" только для изображений ниже viewport (below the fold). Для hero-баннера и LCP-изображений используй loading="eager" + fetchpriority="high".

Подробнее -- в loading lazy.

Форматы изображений

Формат Для чего Поддержка
JPEG Фотографии Везде
PNG Прозрачность, скриншоты Везде
WebP Фото + прозрачность, ~30% меньше JPEG 97%+
AVIF Лучшее сжатие, ~50% меньше JPEG 92%+
SVG Иконки, логотипы, схемы (векторный) Везде
GIF Простые анимации Везде (лучше видео)

Fallback через <picture>

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Фото" width="800" height="600">
</picture>

Подробнее -- в picture и srcset.

Частые ошибки

Ошибка Почему плохо Как правильно
Нет alt Screen reader пропустит или прочитает имя файла Всегда добавляй alt
alt = имя файла "IMG_20260406.jpg" бесполезен Описание содержимого
Нет width/height CLS -- контент прыгает Указывай реальные размеры
loading="lazy" на hero LCP (Largest Contentful Paint) замедлится loading="eager" для первого экрана
Огромные JPEG без оптимизации Медленная загрузка Сжимай и используй WebP/AVIF
Декоративная картинка без alt="" Screen reader читает src alt="" для декоративных

Практика

  1. Вставь изображение с правильным alt, width, height
  2. Добавь srcset с 3 размерами и sizes -- проверь в DevTools Network, какой файл загружается при разных размерах окна
  3. Создай <figure> с <figcaption>
  4. Добавь loading="lazy" к изображениям ниже первого экрана
  5. Используй <picture> с AVIF → WebP → JPEG fallback

Связанные темы

Ресурсы