Тег <img>

Синтаксис

Описание

Тег <img> (от англ. image — изображение) предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG, SVG, PNG или WebP.

Адрес файла с картинкой задаётся через атрибут src. В атрибуте alt указывается текстовое описание содержимого картинки.

Тег <img> не нужно закрывать.

Примечание!

Если необходима интерактивность, то картинку можно сделать ссылкой на другой файл, поместив <img> в контейнер <a>.

Атрибуты, которые можно использовать в теге <img>, указаны ниже. Также тег поддерживает глобальные атрибуты и атрибуты события.

Атрибуты

Атрибут	Значение	Описание
align	left right top bottom middle	Устанавливает выравнивание изображения относительно окружающих элементов. Не поддерживается в HTML5
alt	текст	Определяет альтернативный текст для изображения
border	px	Устанавливает толщину рамки вокруг изображения. Не поддерживается в HTML5
crossorigin	anonymous use-credentials	Определяет, используется ли CORS (технология, которая позволяет предоставить веб-странице доступ к ресурсам другого домена) при загрузке изображения. Изображения, загруженные с помощью CORS могут быть использованы в элементе <canvas> без ограничения функциональности последних
height	px	Устанавливает высоту изображения
hspace	px	Устанавливает пробелы слева и справа от изображения. Не поддерживается в HTML5
ismap	ismap	Определяет, что содержимое тега является серверной картой-изображением
longdesc	URL-адрес	Указывает URL-адрес с подробным описанием к изображению. Для короткого описания изображения используется атрибут alt. Не поддерживается в HTML5
src	URL-адрес	Определяет источник изображения
usemap	name тега <map>	Указывает ссылку на элемент <map>, в котором содержатся координаты для клиентской карты-изображения
vspace	px	Определяет пробелы сверху и снизу изображения. Не поддерживается в HTML5
width	px	Устанавливает ширину изображения

Пример

HTML-код:

<!DOCTYPE html>

<head>

</head>

<body>

<a href="programmer.jpg" target="_blank">

<img src="programmer.jpg" alt="сайт для программистов">

</a>

</body>

</html>

Отображение в браузере:

Параметры CSS по умолчанию

img {
display: inline-block;
}

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

Элемент	Chrome	Opera	Firefox	Safari	Microsoft Edge
<img>	Да	Да	Да	Да	Да

Элемент

Chrome

Opera

Firefox

Safari

Microsoft Edge

<img>

Да