Тег <img> (англ. "image" - изображение) служит для вставки изображения в html-документ. Обязательным атрибутом для данного тега является атрибут src, который указывает адрес графического файла. Таким образом минимальная запись для вставки изображения выглядит так:
<img src="адрес_изображения">
Абсолютный и относительный адрес
Здесь следует указать, что адрес изображения может быть абсолютным (с полным указанием адреса) или относительным (удобно при указании ссылок внутри вашего сайта).
Примеры:
<img src="www.mywebsite.ru"> (абсолютный адрес в Сети)
<img src="C:/website/images/picture.jpg"> (абсолютный адрес на локальном компьютере)
<img src="images/picture.jpg"> (относительный адрес)
Также не забывайте, что в названии изображения в конце нужно добавить расширение файла (.gif, .jpg, .png и т.д.), иначе оно не отобразится на экране.
Ширина и высота изображения
Рассмотрим другие атрибуты тега <img>. Атрибут width (ширина) и height (высота) определяют размер изображения в документе. Если указать один атрибут, то второй будет рассчитываться, исходя из пропорций оригинала. При отсутствии обоих атрибутов загрузится изображение-оригинал.
Примечание: атрибуты width и height с указанием размера изображения все же следует вставлять в тег <img> для более быстрой загрузки в браузер.
Размер задается в пикселях (px) или в процентах (%). Пиксели позволяют указать абсолютный размер изображения, проценты определяют размер относительно того элемента, в котором вложено данное изображение. Чтобы разобраться в разнице, следует самому поэкспериментировать, используя разные единицы измерения и вкладывая изображения в родительские элементы разной ширины и высоты.
Альтернативный текст
Атрибут alt (альтернативный текст) служит для подписи картинки при случае, если показ изображений в браузере отключен. Так пользователь будет видеть надпись вместо картинки, для того чтобы иметь представление о том, что там должно быть изображено:
<img src="images/mypicture.jpg" alt="Здесь изображен я 20К">
Для удобства пользователей в альтернативный текст можно добавить размер изображения.
Вообще-то отсутствие атрибута alt считается ошибкой, поэтому его следует указывать везде. Однако если вы не хотите подписывать изображение, значение атрибута alt можно оставить пустым.
Всплывающее окно
При наведении на изображение курсора мыши можно добавить всплывающее окно (например, поясняющий текст). Делается это с помощью атрибута title:
<img src="images/mypicture.jpg" alt="Это я" title="Это я">
Примечание: не путайте атрибут title с атрибутом alt.
Горизонтальное и вертикальное выравнивание
Для горизонтального выравнивания изображения используется атрибут align, принимающий значения left, right и center, выравнивающих соответственно по левому краю, по правому краю и по центру родительского элемента.
Такой способ выравнивания достаточно широко используется, однако можно выравнивать изображение с помощью параметра float (обтекание) атрибута style (или с помощью привязки к документу внешней таблицы стилей). Float может принимать значения left, right и none.
Примеры:
<img src="images/mypicture.jpg" align="right"> (выравнивание с помощью атрибута align)
<img src="images/mypicture.jpg" style="float:right"> (выравнивание с помощью параметра float)
Еще один способ горизонтального выравнивания изображения (и даже нескольких изображений вместе) заключается в применении тега <div>, используя атрибут тега align со значениями left, right и center.
Пример выравнивания нескольких изображений:
<div align="center">
<img src="images/mypicture1.jpg">
<img src="images/mypicture2.jpg">
</div>
Для вертикального выравнивания изображения относительно других элементов таже применяют атрибут align, но уже используем значения bottom (по умолчанию), middle и top.
Граница и отступы
Для создания границы вокруг изображения используется атрибут border (значение по умолчанию равно 0, т.е. границы нет). Единица измерения - пиксели. Для того чтобы текст или другие изображения не прижимались вплотную к картинке, используют атрибуты vspace (вертикальный отступ сверху и снизу) и hspace (горизонтальный отступ слева и справа).
Пример:
<img src="images/mypicture.jpg" border="10px" hspace="20px" vspace="20px">
Здесь мы получим изображение с границей 10 пикселей и горизонтальным и вертикальным отступом 20 пикселей.
Более точных отступов можно добиться с помощья параметра margin атрибута style, где указываются четыре значения для задания отступа сверху, справа, снизу и слева:
<img src="images/mypicture.jpg" style="margin:1px 2px 3px 4px">
Таким образом, мы получим отступ в 1 пиксель сверху, 2 пикселя справа, 3 снизу и 4 слева. Все очень просто.
Для отступа изображения с какой-либо одной стороны используют параметры margin-top (сверху), margin-right (справа), margin-bottom (снизу) и margin-left (слева).
Пиктограммы
Для ускорения загрузки страниц можно сделать пиктограммы с ссылкой на оригинальное изображение. Пиктограмма - это уменьшенная копия изображения в более низком качестве. Делается это при помощи тега <a>:
<a href="images/original-image.jpg"><img src="images/mypicture.gif" border="0"></a>
При создании ссылки некоторые браузеры (в частности, IE) вокруг изображения показывают рамку, что не всегда желательно. Отключить ее можно, присвоив атрибуту border значение 0 или none.
Другое применение тега <img>
А вот это из разряда для тех, кому интересно: с помощью тега <img> в документ можно добавить видео формата .avi. Из трех протестированных мною браузеров (Chrome, Opera, Firefox и IE) работало только в IE. Делается это с помощью атрибута dynsrc с указанием адреса видеофайла:
<img dynsrc="videos/myvideo.avi">
Собственно для вставки видеофайлов служат другие теги, так что узнали и забыли :).