Вставить изображение на web страницу можно, используя элемент <img />. Этот элемент должен содержать атрибут src, указывающий адрес файла изображения. Ниже показан пример вставки изображения, расположенного по адресу "C:\images\image1.jpg":

<img src="file:///c:/image/image1.jpg" />

Теперь более подробно. Элемент img может иметь следующие специальные атрибуты:

• src - абсолютный или относительный адрес файла изображения (Обязателен!)
• alt - альтернативный текст (Обязателен!)
• width - ширина изображения
• height - высота изображения
• align - выравнивание изображения (Отменен!)
• hspace - отступы от границ изображения по горизонтали (Отменен!)
• vspace - отступы от границ изображения по вертикали (Отменен!)

Обязательными являются только два из них: src и alt.

Добавление изображения

Атрибут src должен содержать адрес файла рисунка. Адрес, или путь, можно указать в двух различных формах: абсолютно и относительно.

Абсолютное указание пути используют в тех случаях, когда необходимо адресовать ресурс расположенный на другом сайте, другом компьютере в сети или другом логическом диске (если речь идет об адресации файла локально, в пределах одной машины). Например - страница расположена на сайте "http://www.somehost.com/index.html", изображение "image.jpg" расположено в папке Images на сайте "http://www.otherhost.com". Тогда код для подключения данного изображения будет иметь вид:

<img src="http://www.otherhost.com/Images/image.jpg" />

Относительную адресацию используют для указания адреса ресурса в пределах одного и того же сайта, логического диска. При этом используются следующие обозначения:

• "/" - обозначает корневой каталог web-узла или диска
• "./" - обозначает текущий каталог
• "../" - обозначает родительский каталог
• "имя/" - обозначает каталог, дочерний по отношению к текущему

Таким образом, если необходимо указать путь к изображению "image.jpg", расположенному в каталоге "Images", дочернему по отношению к текущему, используют следующий адрес:

<img src="Images/image.jpg" />

Альтернативный текст

Атрибут alt используется для текстового описания изображения. Если браузер посетителя web-узла не поддерживает изображения, или они в данный момент отключены, то, вместо изображений, пользователь на странице увидит следующее:

Рис. №3.3.1. Вместо картинок...

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

В случае же, когда изображение отобразилось успешно, альтернативный текст выступает в качестве всплывающей подсказки, возникающей при наведении курсора мыши на изображение:

Рис. №3.3.2. Alt текст - всплывающая подсказка

Ниже приводится комплексный пример, показывающий добавление изображения на страницу и использование атрибута alt.

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

Для выравнивания изображений относительно границ страницы можно использовать свойство стиля float. Это свойство может принимать следующие значения:

• "left" - изображение размещается слева, текст "обтекает" его справа
• "right" - изображение размещается справа, текст "обтекает" его слева

То есть, атрибут align используется не только для выравнивания изображения, но и для управления обтеканием его текстом. Пример:

...
<h2>finalFlares v1.0</h2> 

<img src="sample_img_3.3.1.jpg" style="float: left;" ... />

<p style="text-align: justify;">
<i>Светорассеивание</i>, <i>свечение</i> и <i>контурное свечение</i> - 
основные эффекты, создаваемые с помощью <b>finalFlares</b> от 
<b>cebas Computer GmbH</b>. В отличие от встроенного в 3ds max эквивалента, 
finalFlares создает гораздо более естественно выглядящие эффекты с мощным 
и гибким контролем. Помимо более быстрого рендеринга и лучшего контроля над 
эффектами, finalFlares также обеспечивает полной поддержкой 
<i>Particle Flow</i> и <i>ThinkingParticles</i>.
</p>
<p style="text-align: justify;">finalFlares доступен для 3ds max 6 и 7 по 
цене <b style="color: red;">245$</b> до 30 апреля 2005 года. После 30 
апреля цена будет составлять <b style="color: red;">299$</b>. К сожалению 
нет никакой информации о доступности демонстрационной версии продукта.
</p>
...

В ряде случаев обтекание изображения требуется прекратить. Например, необходимо начать новый раздел сразу под изображением. В таком случае, сразу за элементом, после которого обтекание необходимо прекратить, вставляют элемент <br style="clear: both;" />. Например:

...
<img src="someimage.jpg" alt="Какое-то изображение" style="float: left;" />
<p>Текст абзаца, который обтекает изображение ...
</p> 
<br style="clear: both;" />
<p>Этот абзац располагается уже под изображением, не обтекая его.</p>

Для выравнивания изображения по центру вложите элемент img в элемент div или p, выровненный по центру:

<div style="text-align: center;">
 <img src="sample_img_3.3.1.jpg" alt="По центру!" />
</div>

Размеры изображения

Помимо прочих атрибутов, рекомендуется, так же задавать размеры изображения с помощью атрибутов width и height. При этом, следует указывать реальные размеры изображения в пикселях. Это нужно для того, чтобы браузер сразу, еще перед непосредственной загрузкой изображения с сервера выделил пространство под элемент и не нарушал в дальнейшем структуру страницы.

Кроме того, с помощью атрибутов width и height можно масштабировать изображение по вашему желанию. Например, если вы хотите в 2 раза увеличить изображение с размерами 160x120, то достаточно указать только один из размеров (высоту или ширину), увеличив его в 2 раза. Второй размер будет подогнан автоматически так, чтобы сохранить пропорции изображения:

<img src="sample_img_3.3.1.jpg" alt="Исходное изображение" />
<img src="sample_img_3.3.1.jpg" alt="Увеличенное изображение" width="320" />

Будьте внимательны! При изменении обоих атрибутов width и height для изображения есть риск его искажения. Поэтому, расчитывайте новую высоту и ширину изображения таким образом, чтобы не изменять отношение сторон. Пример:

<img src="sample_img_3.3.1.jpg" alt="Искаженное изображение" width="520" height="120"/>

В любом случае, изменять размеры изображений, которые вы используете на своих страницах, я рекомендую с помощью специализированного ПО, например - Photoshop. Не стоит масштабировать изображения средствами HTML. У специализированных программ гораздо более продвинутые и эффективные алгоритмы интерполяции изображений и, следовательно, уменьшается нежелательный эффект пикселизации при масштабировании.