Использование графики

Использование графики в документах позволяет повысить привлекательность ваших Web-страниц, делает изложенный материал более доступным для восприятия.

Web-браузеры поддерживают множество графических форматов, но наиболее часто используются GIF и JPEG (некоторые форматы требуют установки дополнительных программных компонентов браузера).

Доминирующими графическими форматами в Internet являются GIF и JPEG. Оба формата обладают специфическими особенностями, что и определяет область их применения. Формат GIF (поддержка 256 цветов, сжатие без потери качества, чересстрочный формат, анимация, "прозрачность"), широко применяется для создания различных элементов Web-страниц: органов управления (кнопки, иконки, баннеры), анимированных изображений и других быстро загружаемых изображений с низкой цветопередачей. Формат JPEG (поддержка 16,7 миллиона цветов, потери качества при сжатии, высокая контрастность) применяется для публикации высококонтрастных изображений, фотографического качества. Больший размер файлов и следовательно более медленная загрузка.

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

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

SRC - URL изображения;

ALIGN - выравнивание текста относительно изображения (режимы с обтеканием текста: LEFT - изображение слева, текст обтекает справа / RIGHT-изображение справа, текст обтекает слева; режимы без обтекания текстом: TOP - по верхнему краю изображения / MIDDLE - по центру изображения / BOTTOM - по нижнему краю );

WIDTH - ширина изображения (пикселы);

HEIGHT - высота изображения (пикселы);

ALT - текстовое описание-альтернатива, для тех, кто отключил загрузку изображений;

BORDER - ширина рамки (по умолчанию BORDER=1);

HSPACE - пустое поле от изображения по горизонтали;

VSPACE - пустое поле от изображения по вертикали;

ISMAP - признак карты-ссылок (обработка сервером);

USEMAP - признак карты-ссылок (обработка клиентом);

Примеры тега <IMG>:

Закрепим на примере использование графики в ваших документах:

Пример 4. Использование графики.

<HTML>

<HEAD>

<TITLE>Все графическое: элемент-якорь, линия-разделитель, фон и содержимое</TITLE>

</HEAD>

<H1 ALIGN=CENTER>Два вида обезьян</H1>

<H2 ALIGN=CENTER>GIF обезьяна & JPEG обезьяна</H2>

GIF обезьяна похуже качеством, но зато живая.<br>

JPG обезьяна красивая, но глазами хлопать не умеет. <P>

<IMG SRC="mbox.gif" BORDER=0 ALT="[ почта ]"></A> Вебмастер.

</BODY>

</HTML>

Приведем несколько рекомендаций по использованию графики:

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

при использовании изображения в качестве элемента-якоря ссылки отключайте рамку изображения (BORDER=0), дабы не портить внешний вид документа;

при указании размеров изображения больших или меньших от оригинального размера браузер производит их масштабирование, что может нарушить качество изображения некоторых форматов;