HTML :: Тег <img>

В HTML тег <img> (от англ. image – изображение) используется для вставки изображений на веб-страницу. При этом стандартом HTML не определен список форматов изображений, которые должны поддерживаться в обязательном порядке. Тем не менее, форматы JPG, PNG, GIF и SVG поддерживаются всеми основными браузерами.

Если необходимо, чтобы изображение стало гиперссылкой, его следует поместить в элемент <a>. Также при помощи элементов <map> и <area> изображение может использоваться в качестве карты-изображения.

Синтаксис

	<img src="Адрес" alt="Текст">	             (закрывающий тег не требуется)

Атрибуты

alt – устанавливает альтернативный текст изображения, который отображается на странице в случае невозможности отображения самого изображения.
height – задает высоту изображения в пикселях или процентах.
ismap – данный логический атрибут сообщает браузеру о том, что данное изображение является серверной картой-изображением. Если это так, то при клике по изображению точные координаты клика будут отправлены на сервер для дальнейшей обработки.
sizes – задает размеры изображения в зависимости от макета страницы и типа устройства, на котором отображается данная страница.
src – в качестве значения принимает полный или относительный путь (подробнее здесь) к вставляемому на страницу изображению.
srcset – задает путь к изображению в зависимости от требуемого размера изображения и типа устройства, на котором отображается данная страница.
width – задает ширину изображения в пикселях или процентах.
usemap – сообщает браузеру о том, что данное изображение является клиентской картой-изображением. В качестве значения атрибут принимает знак решетки, за которым следует имя элемента <map>, содержащего координаты для данной карты-изображения (например, если <map name="clientMap">, то атрибут должен иметь вид usemap="#clientMap").
Также для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.

Ссылки

Официальный сайт W3C: https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/HTML/Element/img

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Пример №1</title>
</head>
<body>
	
<p>
	Робот Василий, показанный на рисунке ниже,<br> 
	очень добрый и несколько своенравный.<br>
	<img src="images/robot.png" alt="Робот Вася" width="75px"> 
</p>
		
</body>
</html>

Пример №1

HTML

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Пример №2</title>
</head>
<body>
  <p>
  Это изображение &ndash; серверная карта-изображение. 
  </p>
  
  <!-- Создаем серверную карту -->
  <a href="php/test.php">
    <img src="images/fig.png" alt="Карта-изобр." ismap>
  </a> 
   
  <p>
    Кликните по нужной фигуре, чтобы перейти <br>
    на страницу ее описания.
  </p>
		
</body>
</html>

Пример №2

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Пример №3</title>
</head>
<body>
  <p>
	Это изображение &ndash; клиентская карта-изображение. 
  </p>
  
  <img src="example_4_7.png" alt="Прямоугольники" usemap="#map_1">
   
  <map name="map_1">
    <!-- Определяем область красного прямоугольника на изображении -->
    <area href="page_1.html" shape="rect" coords="0,0 200,143">
    <!-- Определяем область синего прямоугольника на изображении -->
    <area href="page_2.html" shape="rect" coords="200,0 400,143">
  </map>
   
  <p>
    Выберите прямоугольник.
  </p>
		
</body>
</html>

Пример №3