| Значение | Описание | Пример |
| absmiddle | Выравнивание середины изображения по середине текущей строки. | Lorem ipsum dolor sit amet,  consectetuer adipiscing elit... |
| baseline | Выравнивание изображения по базовой линии текущей строки. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit... |
| bottom | Выравнивание нижней границы изображения по окружающему тексту.. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit... |
| left | Выравнивает изображение по левому краю окна. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit... |
| middle | Выравнивание середины изображения по базовой линии текущей строки. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit... |
| right | Выравнивает изображение по правому краю окна. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit... |
| texttop | Верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit... |
| top | Верхняя граница изображения выравнивается по самому высокому элементу текущей строки. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit... |
Наиболее популярные параметры - left и right, создающие обтекание текста вокруг изображения. Чтобы текст не прилегал плотно к рисунку, рекомендуется в теге <IMG> добавить параметр hspace и vspace, задающих расстояние до текста в пикселах.
Значение по умолчанию
bottom
Пример 2. Выравнивание изображения
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример тега IMG, параметр align</title>
</head>
<body>
<p><img src="/images/square.gif" alt="Квадрат" width="20" height="20" align="right"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
</body>
</html>
Примечание
Хотя все значения параметра align поддерживаются браузерами, аргументы absbottom, absmiddle, baseline и texttop не поддерживаются спецификацией HTML 4.x/XHTML 1.0.
Параметр ALT
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Описание
Параметр alt задает альтернативный текст для изображений. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то замещающий рисунок текст появляется раньше. А уже по мере загрузки текст будет сменяться изображением.
Браузеры также отображают альтернативный текст в виде подсказки, появляющейся при наведении курсора мыши на изображение.
Синтаксис
Аргументы
Любая подходящяя текстовая строка. Ее обязательно надо брать в двойные или одинарные кавычки.
Обязательный параметр
Да.
Значение по умолчанию
Нет.
Пример 3. Добавление альтернативного текста
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример тега IMG, параметр alt</title>
</head>
<body>
<p> <a href="/index.html"><img src="home.gif" alt="Вернуться на главную страницу"></a></p>
</body>
</html>
Параметр BORDER
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Описание
Изображение, помещаемое на web-страницу, можно поместить в рамку различной ширины. Для этого служит параметр border тега <IMG>. По умолчанию рамка вокруг изображения не отображается за исключением случая, когда рисунок является ссылкой. При этом цвет рамки совпадает с цветом ссылок, заданных с помощью стиля или параметра link тега <BODY>.
Чтобы убрать рамку, следует задать параметр border="0".
Синтаксис
Аргументы
Любое целое положительное число в пикселах.
Значение по умолчанию
0
Пример 4. Рамка вокруг изображения
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример тега IMG, параметр border</title>
</head>
<body text="#00ff00">
<p><img src="sample.gif" width="50" height="50" border="2" alt=""></p>
</body>
</html>
Параметр HEIGHT и WIDTH
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Описание
Для изменения размеров изображения средствами HTML предусмотрены параметры height и width. Допускается использовать значения в пикселах или процентах. Если установлена процентная запись, то размеры изображения вычисляются относительно родительского элемента - контейнера, где находится тег <IMG>. В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. То есть, width="100%" означает, что рисунок будет растянут на всю ширину web-страницы. Добавление только одного параметра width или height сохраняет пропорции и отношение сторон изображения. Браузер при этом ожидает полной загрузки рисунка, чтобы определить его первоначальную высоту и ширину.
Обязательно задавайте размеры всех изображений на web-странице. Это несколько ускоряет загрузку страницы, поскольку браузеру нет нужды вычислять размер каждого рисунка после его получения. Это утверждение особенно важно для изображений, размещенных внутри таблицы.
Ширину и высоту изображения можно менять как в меньшую, так и большую сторону. Однако на скорость загрузки рисунка это никак не влияет, поскольку размер файла остается неизменным. Поэтому с осторожностью уменьшайте изображение, т.к. это может вызвать недоумение у читателей, отчего такой маленький рисунок так долго грузится. А вот увеличение размеров приводит к обратному эффекту - размер изображения велик, но файл относительно изображения аналогичного размера загружается быстрее. Но качество рисунка при этом ухудшается.
Синтаксис
<img width="ширина">
Аргументы
Любое целое положительное число в пикселах или процентах.
Значение по умолчанию
Исходная ширина или высота изображения.
Пример 5. Размеры изображения
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример тега IMG, параметр width</title>
</head>
<body>
<p><img src="sample.gif" width="150" height="150" alt=""></p>
</body>
</html>
Параметр HSPACE и VSPACE
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Описание
Для любого изображения можно задать невидимые отступы по горизонтали и вертикали с помощью параметров hspace и vspace. Особенно это актуально при обтекании рисунка текстом. В данном случае, чтобы текст не «наезжал» плотно на изображение, необходимо вокруг него добавить пустое пространство.
Синтаксис
<img vspace="отступ по вертикали">
Аргументы
Любое целое положительное число в пикселах.
Значение по умолчанию
0
Пример 6. Отступы вокруг изображения
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример тега IMG, параметр hspace</title>
</head>
<body>
<p><img src="sample.gif" width="150" height="150" hspace="5" vspace="7" alt=""></p>
</body>
</html>
Параметр ISMAP
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Описание
Параметр ismap говорит браузеру что рисунок является серверной картой-изображением. Карты-изображения позволяют привязывать ссылки к разным областям одного изображения. Реализуется в двух различных вариантах - серверном и клиентском. В случае применения серверного варианта браузер посылает запрос на сервер для получения адреса выбранной ссылки и ждет ответа с требуемой информацией. Такой подход требует дополнительного времени на ожидание результата и отдельные файлы для каждой карты-изображения.
Отправка данных на сервер происходит следующим образом. Необходимо поместить тег <IMG> в контейнер <A>, где в качестве значения параметра href указать адрес CGI-программы. Программа анализирует полученные координаты нажатия мыши, которые считаются от левого верхнего угла изображения, и возвращает требуемую web-страницу.
Синтаксис
Аргументы
Нет.
Значение по умолчанию
По умолчанию данный параметр выключен.
Пример 7. Использование параметра ismap
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример тега IMG, параметр ismap</title>
</head>
<body>
<p><a href="http://www.htmdoc.ru/cgi-bin/map.cgi"><img src="sample.gif" alt="" width="150" height="150" ismap></a></p>
</body>
</html>
Если пользователь установил координаты мыши на изображении 100, 50, то после нажатия на ссылку будет открыт файл по адресу http://www.htmdoc.ru/cgi-bin/map.cgi?100,50. Последние цифры передаются в CGI-программу по методу GET и интерпретируются на сервере.
Параметр LOWSRC
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Описание
Параметр lowsrc используется для отображения рисунка низкого качества перед полной загрузкой конечного изображения. Такой подход предназначен для снижения времени ожидания пользователя. Предварительно ему показывается изображение в низком разрешении или черно-белый рисунок, который быстро загружается из-за небольшого исходного объема файла. Пока пользователь рассматривает его, происходит загрузка изображения хорошего качества, которое постепенно сменяет первоначальное. Размеры этих изображений обязательно должны совпадать.
Синтаксис
Аргументы
Полный или относительный путь к файлу.
Значение по умолчанию
Нет.
Пример 8. Использование параметра lowsrc
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример тега IMG, параметр lowsrc</title>
</head>
<body>
<p><img src="sample.jpg" alt="" width="450" height="450" lowsrc="samplelow.gif"></p>
</body>
</html>
Параметр SRC
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Описание
Адрес графического файла, который будет отображаться на web-странице. Наиболее популярны файлы в формате GIF и JPEG.
Синтаксис
Обязательный параметр
Да.
Аргументы
Полный или относительный путь к файлу.
Обязательный параметр
Да.
Значение по умолчанию
Нет.
Пример 9. Путь к графическому файлу
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример тега IMG, параметр src</title>
</head>
<body>
<p><img src="sample.jpg" width="450" height="450" alt=""></p>
</body>
</html>