Форматы изображений и графические редакторы

Графические иллюстрации в большинстве случаев являются неотъемлемой частью Web-документов. Сегодня графические элементы Web-страниц используют два основ­ных формата - GIF и JPEG (новый формат PNG пока еще нельзя считать общеприня­тым). Все графические браузеры, предназначенные для отображения Web-страниц на экране компьютера, способны распознавать и отображать файлы этих форматов.

Файлы формата GIF (Graphic Interchange Format) имеют расширение .GIF. Изобра­жения в этом формате содержат 256 цветов, заданных индексной палитрой. Файл упакован и может занимать значительно меньше места, чем неупакованный растро­вый рисунок (например, в формате .BMP).

Спецификация формата GIF89a позволяет создавать файлы .GIF, обладающие специ­альными возможностями.

• Один из цветов изображения может быть объявлен прозрачным. Это означает, что s соответствующих местах сквозь него будет проглядывать фон Web-стра­ницы, что де­лает рисунок более естественным.

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

• GIF-анимация превращает обычный рисунок в небольшой видеоролик. В стан­дартном файле с расширением .GIF хранится набор кадров, а также сценарий их отображения.

Файлы формата JPEG (Joint Photographic Expert Group – по названию группы исследо­вателей, предложившей этот формат) могут иметь расшире­ние JPEG или JPG. Формат предназначен для хранения фотографических изображе­ний, использующих 24-разрядный цвет. При конвертировании в формат JPEG происходит потеря части информации, приводящая к некоторому ухудшению качества изображения, обычно незаметному на глаз.

При выборе формата изображения в первую очередь принимают во внимание объем получающегося файла и во вторую – качество изображения. При загрузке Web-документа львиную долю времени занимает именно загрузка иллюстраций, так что приветствуется любая экономия. При выборе формата рекомендуется создать два файла: в формате GIF и в формате JPEG с минимально приемлемым качеством, после чего выбрать вариант, имеющий меньший объем.

Для подготовки изображений можно использовать любой графический редактор, например стандартное приложение Paint (в Windows), которое позволяет сохра­нять файлы в этих форматах. Однако Adobe Photoshop – стандарт де-факто среди программ обработки изображений: ее использует большинство профессиональных дизайнеров, к тому же она существует для всех распространенных платформ – Windows, Unix, Macintosh. Следует отметить, что Macromedia Flash практически является стандартом для использования в Web векторных изображений, обладает собственной средой разработки и позволяет создавать отличную векторную анимацию. Ulead GIF Animator – программа, которая позволит вам создавать GIF-анимацию, обладает мощными средствами анимации и в принципе может заменять на начальном этапе всю работу с анимацией.

В современном Internet существуют большое число сайтов, использующих Flashтехнологию. Flash-страницы выглядят очень красочно, но прилично «весят», а следовательно долго загружаются. Использование Flash-анимации целесообразно в презентационных домашних страницах, а также для создания навигационных панелей.

Тег <IMG>

Рисунки хранятся на Web-узлах в отдельных файлах, но отображаются как элементы Web-страниц. Для вставки рисунка непарный тег <IMG>, который должен содержать обязательный атрибут SRC=, задающий адрес URL файла с изображением в относительной или абсолютной форме.

<IMG SRС="picture1 .gif">

В таблице 4 приведены другие атрибуты этого тега.

Таблица 4. Атрибуты тега IMG.

Атрибут	Назначение
ALT	Задает альтернативный текст, отображаемый вместо картинки, если она по каким-либо причинам не может выводиться. Этот же текст выскакивает в всплывающей подсказке.
LOWSCR	Источник изображения низкого качества или размера, для быстрой предварительной загрузки.
ALIGN	Задает выравнивание относительно текущей строки: top выравнивает верхний край изображения по верхнему краю строки; middle выравнивает центр изображения по базовой лини строки; bottom установка по умолчанию, выравнивает нижний край изображения по базовой линии строки; left выравнивает изображение по левому полю right выравнивает изображение по правому полю.
WIDTH и HEIGHT	Задают горизонтальный и вертикальный размер картинки, чтобы еще до начала загрузки изображения браузер выделил ему требуемое место, что ускоряет отображение загружаемой страницы.
BORDER	Задает толщину рамки, которой будет обрисовываться изображение. Если изображение не является ссылкой, то оно по умолчанию не окружается рамкой. Если же это изображение ссылка, то толщина рамки будет равна 2.
VSPACE HSPACE	Используется для указания ширины пространства сверху и снизу (справа и слева) от изображения. По умолчанию равно 0.
USEMAP ISMAP	Используются для создания карты ссылок, описание которых будет дано ниже.

При отображении рисунка браузер по умолчанию использует его реальные размеры. Если рисунок необходимо отмасштабировать, применяют атрибуты WIDTH и HEGHT, задающие ширину и высоту рисунка (в пикселях), либо в процентах от ширины экрана. При указании высоты и ширины изображения (а также в процентах), не соответствующих его реальным размерам, оно сжимается (расширяется) до заданных размеров.

<IMG SRC="picture2.jpg" WIDTH="100" HEIGHT="40">

Еще один способ применения изображений на Web-страницах состоит в использо­вании их в качестве фонового рисунка. При отображении документа, содержащего фоновый рисунок, на компьютере рабочая область окна заполняется этим рисунком последовательно (как паркетом), считая от верхнего левого угла документа или окна. Фоновый рисунок задается с помощью атрибута BACKGROUND в теге <BODY>. Значением этого атрибута должен быть абсолютный или относи­тельный адрес URL для файла с изображением.

<BODY BACKGROUND="waves.gif" TEXT="YELLOW">