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>.

Пример HTML:

Попробуй сам
<img src="smiley.jpg" alt="Смайлик" width="75" height="100">

Спецификации

Спецификация Статус
WHATWG HTML Living Standard (WHATWG) Живой стандарт
HTML 4.01 (W3C) Рекомендация
HTML5 (W3C) Рекомендация
HTML 5.1 (W3C) Рекомендация

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

Попробуйте сами - Примеры

Как сделать, чтобы изображение отображалось полностью вне зависимости от ширины окна браузера:
Задание размеров изображения с помощью max-width

Как создать карту-изображений, с интерактивными областями. Каждая область является гиперссылкой:
Создание карты-изображений

Использование изображения в качестве ссылки:
Изображение-ссылка


Учебник HTML

HTML уроки: HTML Изображения

HTML Ссылки

HTML Элементы



Contema