Вставка изображений — базовый навык верстки. Основной тег <img> с атрибутами src и alt позволяет добавить картинку на страницу. Для сложных случаев используйте семантический контейнер <figure> с подписью. Современные форматы вроде WebP и AVIF экономят трафик, а адаптивные техники обеспечивают корректное отображение на всех устройствах.

Базовый тег img и обязательные атрибуты

Тег <img> — одиночный, не требует закрытия. Обязательные атрибуты:

  • : путь к файлу изображения. Может быть относительным или абсолютным.
  • : альтернативный текст. Описывает изображение если оно не загрузилось или для accessibility.

Пример:

<img src="photo.jpg" alt="Описание фотографии">

Атрибут alt критически важен для доступности и SEO. Избегайте декоративных фраз вроде «изображение» — описывайте содержание.

Элемент figure для семантической группировки

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

Пример:

<figure> <img src="chart.png" alt="График роста продаж"> <figcaption>Рис. 1 — Динамика продаж по кварталам</figcaption>
</figure>

Используйте figure для контента, который можно переместить в приложение без потери смысла.

Современные форматы изображений: WebP и AVIF

Традиционные JPEG, PNG и GIF уступают современным форматам в сжатии и качестве. WebP поддерживается всеми современными браузерами и дает на 25-35% меньший размер при том же качестве. AVIF — следующий шаг, с еще лучшим сжатием, но поддержка пока уже.

Формат Плюсы Минусы Поддержка браузерами
Универсальная поддержка Потери качества при сжатии 100%
Без потерь, прозрачность Большой размер 100%
Хорошее сжатие, прозрачность Старые браузеры не поддерживают ~95%
Отличное сжатие, высокое качество Ограниченная поддержка ~75%

Для обеспечения совместимости используйте элемент <picture> с fallback на традиционные форматы.

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

Адаптивные изображения подстраиваются под размер экрана и плотность пикселей. Используйте атрибут srcset для указания нескольких версий изображения и sizes для условий отображения.

Пример для разных разрешений:

<img srcset="small.jpg 320w, medium.jpg 640w, large.jpg 1024w" sizes="(max-width: 480px) 100vw, 50vw" src="fallback.jpg" alt="Адаптивное изображение">

Браузер выберет наиболее подходящую версию based on текущих условий.

Частые ошибки и как их избежать

Новички часто допускают типовые ошибки:

  • Пропуск alt: всегда добавляйте осмысленный альтернативный текст.
  • Неправильные пути: проверяйте относительные и абсолютные пути к файлам.
  • Большие размеры файлов: оптимизируйте изображения перед загрузкой.
  • Игнорирование адаптивности: используйте srcset и CSS max-width: 100%.

Проверяйте валидность кода через валидатор W3C.

Чек-лист для работы с изображениями

Перед публикацией проверьте:

  • Атрибут alt заполнен и meaningful
  • Изображения оптимизированы по размеру
  • Пути к файлам корректны
  • Использованы современные форматы с fallback
  • Добавлена адаптивность для мобильных устройств

Частые вопросы

Какой основной тег используется для вставки изображений в HTML?

Основной тег — <img>. Он не требует закрывающего тега и содержит обязательный атрибут src (путь к изображению) и alt (альтернативный текст).

Что такое элемент figure и когда его использовать?

<figure> — семантический контейнер для иллюстраций, диаграмм, фото с необязательной подписью <figcaption>. Используйте для контента, который дополняет основной материал.

Какие современные форматы изображений поддерживают браузеры?

Помимо JPEG, PNG и GIF, современные браузеры поддерживают WebP (хорошее сжатие) и AVIF (лучшее качество при меньшем размере). Проверяйте поддержку браузером.

Как сделать изображение адаптивным?

Используйте атрибут srcset для указания версий разного размера и sizes для определения условий отображения. Добавьте max-width: 100% в CSS для гибкости.