Тег <img>

Описание

Тег <img> встраивает изображение в HTML-документ. Это одиночный тег, не требующий закрывающего элемента, который поддерживает растровые (JPG, PNG, GIF) и векторные (SVG) форматы изображений.

Синтаксис:
<img src="путь_к_изображению" alt="Описание изображения">
Адаптивное изображение с srcset:
<img src="image-800w.jpg" srcset="image-400w.jpg 400w, image-800w.jpg 800w" sizes="(max-width: 600px) 400px, 800px" alt="Адаптивное изображение" loading="lazy">
Изображение с подписью (фигура):
<figure> <img src="chart.png" alt="График продаж за 2023 год"> <figcaption>Рис. 1: Динамика продаж по кварталам</figcaption> </figure>

Рекомендации по использованию:

  • Всегда указывайте осмысленный атрибут alt
  • Для адаптивности используйте srcset и sizes
  • Оптимизируйте изображения перед загрузкой
  • Используйте lazy loading для изображений ниже видимой части страницы
  • Указывайте width/height для предотвращения сдвигов макета
  • Для сложных изображений добавляйте ARIA-атрибуты

Тег <img> является фундаментальным элементом веб-страниц и требует внимательного подхода к оптимизации и доступности.

Атрибуты

alt Альтернативный текст для изображения
crossorigin Режим CORS для изображения
decoding Стратегия декодирования (sync|async|auto)
height Высота изображения в пикселях
ismap Указывает, что изображение является картой-изображением
loading Стратегия загрузки (lazy|eager)
referrerpolicy Политика отправки реферера
sizes Размеры изображения для разных макетов
src URL изображения
srcset Набор изображений для разных разрешений
width Ширина изображения в пикселях
usemap Ссылка на карту изображения
accesskey Горячая клавиша для активации
class CSS-классы для стилизации
id Уникальный идентификатор
style Инлайновые CSS-стили
title Всплывающая подсказка
align Выравнивание изображения (устарел)
border Толщина границы (устарел)
hspace Горизонтальные отступы (устарел)
longdesc URL длинного описания (устарел)
name Имя изображения (устарел)
vspace Вертикальные отступы (устарел)

Поддержка браузерами
1.0 1.0 1.0 1.0 1.0