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

Вставка изображения в документе HTML происходит при помощи одинарного, строчного элемента <img>.

<img>

тег вставки изображения

src="путь и имя изображения"

указывает путь к изображению

alt="информация о изображении"

обязательный атрибут описания изображения, значение которого предназначено в первую очередь для тех, кто не сможет его увидеть. Экранный диктор прочтет значение данного атрибута. В некоторых браузерах значение данного атрибута отобразится визуально, если изображение не будет загруженно. Используется поисковыми системами для индексации картинок.

Пример вставки изображения в документе HTML

<img src="derKosmonaut.jpg alt="Космонавт">

Если изображение на сервере отсутствует, либо по причине плохой связи запрос не был обработан, то браузер отобразит шаблон отсутствующего изображения.

Пример отсутствия изображения

<img src="keinKosmonaut.jpg" alt="Космонавт">

В Internet Exploer отсутствие изображения будет выглядеть так:

Если изображение носит декоративный характер или не несет смысловой нагрузки, то рекомендуется оставить атрибут alt пустым.

К изображениям применим не только относительный путь, но и абсолютный.

Пример изображения с абсолютным путем

<img src="http://www.w3.org/QA/Tools/I_heart_validator_lg" alt="I love validator">

Особенности отображения изображений

При обращении браузера к веб-серверу извлекается страница HTML, если браузер распознает на извлеченной странице элементы <img>, то запрашивает у веб-сервера по каждому элементу соответствующее изображение загружая их сверху вниз.

Элемент <img> фактически является ссылкой на изображение. Изображение не является частью документа HTML.

Чтобы узнать URL изображения, достаточно щелкнуть на изображении правой кнопкой мыши и выбрать пункт - "копировать адрес изображения" (название пункта меню может несколько отличаться в различных браузерах) либо выбрать пункт - "открыть изображение в новом окне", тогда можно скопировать URL изображения из адресной строки в открывшемся окне.

Ширина и высота изображения

Можно сообщить браузеру заранее, с какой шириной и высотой следует отобразить изображение. Браузер будет использовать эти размеры резервируя пространство еще до загрузки самого изображения, поэтому браузеру не придется перестраивать страницу, что может ускорить загрузку. (не рекомендуется использовать при адаптивной верстке, т. к. размеры изображения останутся фиксированными) Для этого используются следующие атрибуты:

width="px"

ширина изображения

height="px"

высота изображения

Пример использования атрибутов width и heght

<img src="derKosmonaut.jpg" width="100px" height="100px">

Изображение чья ширина изначально была равна 320px а высота 240px было уменьшено до 100px и 100px соответственно.

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

Если изображению не присваивать атрибуты ширины и высоты, то изображение будет выводиться с собственными параметрами. Так же размер изображения может быть ограничен размерами элемента в который оно вложено.

Пиксел-самая маленькая точка, которая может быть изображена на экране. Каждый рисунок состоит из множества тысяч пикселов. В зависимости от монитора количество пикселов на дюйм колеблется от 72 до 120.