HTML-тег <img>

Характеристики

• Тип: медиа, статичный, семантический
• Назначение: Встраивает изображение в документ.
• Родители: Любые HTML-теги, которые могут содержать фразовый контент.
• Потомки: Не содержит содержимого (самозакрывающийся тег).
• Глобальные атрибуты: все
• Атрибуты событий: все

Атрибуты

• src — URL изображения.
• alt — Альтернативный текст для изображения.
• width — Ширина изображения (в пикселях или в процентах).
• height — Высота изображения (в пикселях или в процентах).
• srcset — Набор изображений для разных размеров или плотностей экрана.
• sizes — Указывает, какие изображения использовать в зависимости от размера окна просмотра.
• loading — Указывает, как загружается изображение (lazy, eager).
• decoding — Указывает метод декодирования изображения (sync, async, auto).
• crossorigin — Управляет поведением CORS для загрузки изображения.
• referrerpolicy — Управляет политикой реферера для запроса изображения.
• usemap — Указывает имя карты-изображения для использования с &lt;map&gt;.
• ismap — Указывает, что изображение является серверной картой-изображением.

Пример использования

<img src="image.jpg" alt="Описание изображения" width="600" height="400">

Использование в JavaScript

// Получение элемента <img>
const imgElement = document.querySelector('img');

// Изменение источника изображения
imgElement.src = 'new-image.jpg';

// Изменение альтернативного текста
imgElement.alt = 'Новый альтернативный текст';

// Добавление класса
imgElement.classList.add('responsive');

Рекомендации по обеспечению доступности (a11y)

• Всегда используйте атрибут alt с описательным текстом, чтобы обеспечить доступность для пользователей с нарушениями зрения.
• Если изображение является декоративным, используйте пустой alt="", чтобы экранные читалки пропустили его.
• Избегайте использования изображений с текстом; если необходимо, продублируйте текст в контенте страницы.
• Отсутствие атрибута alt может затруднить понимание контента для пользователей экранных читалок.
• Использование изображений с низким контрастом может затруднить их восприятие.

Полезные ссылки