Элемент <img> (от англ. image — изображение) предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG, SVG или PNG. Адрес файла с картинкой задаётся через атрибут src. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив <img> в контейнер <a>.
Рисунки также могут применяться в качестве карт-изображений, когда картинка содержит активные области, выступающие в качестве ссылок. Такая карта по внешнему виду ничем не отличается от обычного изображения, но при этом оно может быть разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой.
Синтаксис
<img src="<адрес>" alt="<текст>">
Атрибуты
- alt
- Альтернативный текст для изображения.
- crossorigin
- Является частью технологии CORS и применяется при загрузке изображения со стороннего сайта для использования в элементе <canvas>.
- decoding
- Указывает предпочтительный метод декодирования изображения.
- height
- Высота изображения.
- ismap
- Говорит браузеру, что картинка является серверной картой-изображением.
- loading
- Используется для управления загрузкой изображений на веб-странице.
- referrerpolicy
- Определяет, какие реферальные данные следует отправлять на сервер в заголовке Referer при получении изображения.
- sizes
- Задаёт размеры изображения для разных макетов страницы.
- src
- Путь к графическому файлу.
- srcset
- Путь к графическим файлам с учётом размера изображения и устройств.
- width
- Ширина изображения.
- usemap
- Ссылка на элемент <map>, содержащий координаты для клиентской карты-изображения.
Также для этого элемента доступны универсальные атрибуты и события.
Устаревшие атрибуты
- align
- Определяет, как рисунок будет выравниваться по краю и способ обтекания текстом.
- border
- Толщина рамки вокруг изображения.
- hspace
- Горизонтальный отступ от изображения до окружающего контента.
- longdesc
- Указывает адрес документа, где содержится аннотация к картинке.
- vspace
- Вертикальный отступ от изображения до окружающего контента.
Устаревшие атрибуты
Устаревшие атрибуты — это атрибуты элементов HTML, которые были частью предыдущих версий HTML,
но больше не поддерживаются в последних версиях стандарта. Использование таких атрибутов не
рекомендуется, поскольку они противоречат современной идеологии HTML и могут не поддерживаться
последними версиями браузеров.
Добавлять к элементам HTML устаревшие атрибуты не надо, взамен применяются стили или другие элементы HTML.
Пример
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>IMG</title>
</head>
<body>
<p><a href="page/lorem.html"><img src="image/girl.jpg"
width="120" height="120" alt="Девочка с муфтой"></a></p>
</body>
</html>
Спецификация
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.