| Элемент | ||||||
| <img> | 1+ | 1+ | 1+ | 1+ | 1+ | 1+ |
HTML тег <img>
Элемент <img> (от англ. "image" ‒ «изображение») предназначен для вставки в HTML страницу изображений в графическом формате GIF, JPEG, SVG или PNG. Адрес файла с изображением задаётся через атрибут src.
Примечание: Изображение можно сделать ссылкой на другой файл, поместив <img> в контейнер <a>
Изображения также могут применяться в качестве карт-изображений, когда картинка содержит активные области, выступающие в качестве ссылок. Карта-изображение по внешнему виду ничем не отличается от обычного изображения, но при этом оно может быть разбито на невидимые зоны разной формы, каждая из которых служит ссылкой.
Если <img> используется внутри ссылки или задает карту-изображение, то вокруг самого изображения некоторые браузеры отображают рамку, которую можно стилизовать или убрать при помощи CSS.
Технически изображение не вставляется в HTML-страницу, а подключается к HTML-странице, при этом важным моментом является его размер (вес) в килобайтах, а точнее соотношение вес-качество. Естественно, чем меньше вес изображений — тем быстрее загрузится страница.
Также, для ускорения загрузки веб-страниц рекомендуется устанавливать атрибуты width и height, элемента <img>. Тогда браузер не будет ожидать полной загрузки изображения, он просто выделит под него место и будет загружать страницу дальше, а его подгрузит потом. К тому же, если одно изображение используется на странице несколько раз (значение атрибута src одинаковое), то браузер загружает его с сервера только один раз, а потом берет из кэш-памяти.
Примечание: Браузеры не всегда показывают изображение, указанное в этом элементе. Например, если браузер неграфический (включая используемые людьми с нарушениями зрения), или если браузер не может показать изображение, потому что файл испорчен. В таких случаях браузер может заменить изображение альтернативным текстом, определённым в атрибуте alt элемента.
Синтаксис
<img src="..." alt="...">Закрывающий тег
Не требуется.
Атрибуты
- alignУстарел
- Определяет, как рисунок будет выравниваться по краю и способ обтекания текстом.
- altОбязательный
- Альтернативный текст для изображения.
- borderУстарел
- Толщина рамки вокруг изображения.
- height
- Высота изображения HTML5 в пикселях CSS, HTML4 в пикселях или процентах.
- hspaceУстарел
- Горизонтальный отступ от изображения до окружающего контента.
- ismap
- Говорит браузеру, что картинка является серверной картой-изображением.
- longdescУстарел в HTML5
- Указывает адрес документа, где содержится аннотация к картинке.
- sizesHTML5
- Задаёт размеры изображения для разных макетов страницы.
- srcОбязательный
- Путь к графическому файлу.
- srcsetHTML5
- Путь к графическим файлам с учётом размера изображения и устройств.
- vspaceУстарел
- Вертикальный отступ от изображения до окружающего контента.
- width
- Ширина изображения HTML5 в пикселях CSS, HTML4 в пикселях или процентах.
- usemap
- Ссылка на элемент <map>, содержащий координаты для клиентской карты-изображения.
Элемент поддерживает глобальные атрибуты и события.
Стилизация по умолчанию
Большинство браузеров отобразит элемент <img> со следующими значениями CSS по умолчанию:
img {
display: inline-block;
}Различия между HTML 4.01 и HTML5
В HTML 5 была прекращена поддержка атрибутов align, border, hspace, vspace
Пример использования:
Элемент <img>.
Спецификации
| Спецификация | Статус |
|---|---|
| WHATWG HTML Living Standard (WHATWG) | Живой стандарт |
| HTML 4.01 (W3C) | Рекомендация |
| HTML5 (W3C) | Рекомендация |
| HTML 5.1 (W3C) | Рекомендация |
Поддержка браузерами
Попробуйте сами - Примеры
Как сделать, чтобы изображение отображалось полностью вне зависимости от ширины окна браузера:
Задание размеров изображения с помощью max-width
Как создать карту-изображений, с интерактивными областями. Каждая область является гиперссылкой:
Создание карты-изображений
Использование изображения в качестве ссылки:
Изображение-ссылка
Учебник HTML
HTML уроки: HTML Изображения