HTML :: Вставка изображений в документ

Тег <img> и его атрибут src

Для того, чтобы вставить изображение в документ используется элемент «img» (от англ. image – рисунок, изображение), формирующийся одиночным тегом <img>, и его атрибут src, который в качестве значения принимает полный или относительный адресный путь к файлу изображения. Браузерами «img» отображается, как строчный элемент.

Атрибут alt тега <img>

Для случаев, когда загрузка изображений в браузере отключена либо не завершилась, предусмотрен атрибут alt (от англ. alternative), который устанавливает альтернативный текст изображения. При загрузке страницы сперва отображается альтернативный текст, а уже потом, в случае успешной загрузки, само изображение. Следует практически всегда задавать атрибут alt, так как грамотно составленное содержание атрибута (т.е. его значение), кроме всего, позволяет еще и продвинуть страницу в поисковых системах.

Атрибуты width и height тега <img>

В отличие от многих других элементов разметки для элемента «img» в HTML 5 сохранились атрибуты height и width, которые задают, соответственно, высоту и ширину изображения. Кстати, если указать размеры изображения меньше, чем они есть на самом деле, то размер самого файла при этом меньше не станет. Так что это никак не повлияет на скорость загрузки изображения.

Рассмотрим вставку изображений в документ на примере №1. Отображение соответствующей страницы в браузере показано на рис. №2.

HTML

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<!-- Привыкаем задавать служебные элементы -->
	<meta charset="utf-8">	
	<base href="https://site.name/">
	<link rel="stylesheet" href="css/style_1.css">
	<script src="javascript/code_1.js"></script>
	<title>Элемент «img»</title>
</head>
<body>
	Это изображение. Это изображение. Это изображение.<br>
	Это изображение. Это изображение. Это изображение.<br>
	Это изображение. 
	<img src="images/img_1.png" alt="House_1"> 
	Это изображение.<br>
	Это изображение. Это изображение. Это изображение.<br>
	Это изображение. Это изображение. Это изображение.<br>
	Это изображение. Это изображение. Это изображение.<br>
	Это изображение.
	<img src="images/img_2.png" alt="House_2" width="175px" 
	height="70px"> Это изображение.<br>
	Это изображение. Это изображение. Это изображение.<br>
	Это изображение. Это изображение. Это изображение.<br>
	Это изображение. Это изображение. Это изображение.<br>
</body>
</html>

Пример №1. Использование элемента «img»

Рис. №2. Отображение страницы с использованием элемента «img» браузером

Из примера хорошо видно, что изображение отображается браузером по умолчанию, как строчный элемент. При этом высота строки подстраивается под высоту изображения. В виду отстутствия файла второго изображения по указанному пути, браузер отобразил вместо него альтернативный текст. А так как размеры изображения были заданы в атрибутах, браузер зарезервировал за ним область соответствующих размеров. Отметим, что браузер Firefox поступает иначе, отображая вместо изображения просто альтернативный текст.

HTML :: Вставка изображений в документ

Тег <img> и его атрибут src

Атрибут alt тега <img>

Атрибуты width и height тега <img>

Быстрый переход к другим страницам