Графика в Web-дизайне

Реферат:

Графика в Web - дизайне

Введение

Web-страница мертва без графики. Графические изображения применяются для иллюстрации текстов уже много столетий. Еще на первых рукописных пергаментных свитках, обнаруженных учеными-археологами в руинах городов древности, были найдены сделанные рукой давно ушедших в небытие художников рисунки, несущие как пояснительную, так и чисто декоративную функцию. С изобретением книгопечатания иллюстрации стали неотъемлемой частью практически любых книг, не только художественных, но и научных. Пройдя нелегкий путь от многостраничных рукописей до первых книг, отпечатанных на типографских машинах, во второй половине XX века носители информации обрели еще одну форму, на сегодня самую удобную для хранения и представления человеческих знаний -- электронную, перенеся с собой в мир двоичных чисел и графику. А с появлением сети Интернет, позволившей сделать эту информацию доступной для всего человечества, графические иллюстрации, сопровождающие текст, обрели свое второе рождение, поскольку автор каждого сетевого ресурса может сам выбирать для своего проекта любое оформление, соответствующее его эстетическим вкусам.

Безусловно, первые сайты, появившиеся еще в эпоху становления Всемирной сети, представляли собой строгие текстовые документы, главным и единственным компонентом которых являлось их содержательное информационное наполнение. Шло время, и по мере того, как складывались общепринятые ныне в Интернете стандарты на графические изображения, чаша дизайнерских весов склонялась в сторону хорошо иллюстрированных ресурсов, привлекающих посетителей своей красочностью и ярким оформлением. В те времена это было в новинку, и подобно пестрой витрине магазина, такие сайты привлекали внимание зрителя неординарностью представления контента и нестандартностью оформления. Некоторые ресурсы оказались буквально перегружены графикой, которой иногда было даже больше, нежели собственно текста.

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

Графические компоненты web-страниц по назначению можно условно разделить на три обширные категории: иллюстративная графика, включая дополняющие текст фотографии, пояснительные рисунки, чертежи и схемы, функциональная графика, представляющая собой элементы управления сайтом (кнопки навигации, счетчики и элементы интерактивных форм) и, наконец, декоративная графика -- элементы дизайна страницы, включенные в нее «для красоты» и не несущие информационной нагрузки (фоновые рисунки, линии-разделители, выполненные в виде графических файлов заголовки и многое другое).

Что же, с лирикой, полагаю, закончим. Пора переходить к прозе жизни. А поскольку проза -- стиль весьма и весьма специфический, по закону жанра начнем с обширного раздела

Сетевые графические форматы

Как говорили И. Ильф и Е. Петров, «статистика знает все». Эта самая всезнающая статистика утверждает, что большинство пользователей Интернета на нашей планете применяют для связи со Всемирной сетью соединение по коммутируемым телефонным каналам при помощи модема. Поскольку это весьма медленный способ связи, время загрузки графического изображения в клиентский браузер в данном случае должно быть как можно меньшим. Действительно, длительное ожидание, когда закончится считывание картинки с сервера, занятие не из приятных. Именно поэтому два наиболее популярных стандарта, в которых хранится 90 % всей графики, представленной ныне в Интернете, это GIF и JPEG. В них заложены различные алгоритмы сжатия изображения с потерей качества, благодаря использованию которых удается значительно уменьшить размер целевого файла.

GIF

В далеком 1978 году двое израильских исследователей Якоб Зив (Jacob Ziv)и Абрахам Лемпел (Abraham Lempel) разработали принципиально новый для того времени алгоритм сжатия информации без потери данных, которому, немудрствуя лукаво, дали полученное из сокращения собственных фамилий и даты завершения своего проекта название: LZ78. Информация о принципах построения этого алгоритма была общедоступной, и спустя несколько лет американский программист Терри Уэлч (Terry Welch) усовершенствовал его, добавил в обозначение первую букву своей фамилии и запатентовал новый алгоритм под названием LZW, также предоставив свою разработку для использования всем желающим.

Одним из таких «желающих» оказался сотрудник компании CompuServe Inc.Боб Берри (Bob Berry), взявший LZW в качестве основы для созданного им в 1987 году принципиально нового графического формата GIF (Graphic Interchange Format). Созданная Терри Уэлчем компания Unisys, которой и принадлежали авторские права на алгоритм LZW, взимала плату за его использование только с производителей аппаратного обеспечения для компьютеров, в котором применялся данный стандарт, например, с изготовителей модемов. Разработчики программного обеспечения «комиссионными сборами» не облагались.

Однако зимой 1994 года компания Unisys, начавшая испытывать финансовые проблемы, объявила LZW коммерческим стандартом, использование которого требует оплаты. Это автоматически сделало GIF единственным в мире «платным» графическим форматом, что вызвало волну недовольства среди пользователей Интернета, поскольку практически на всех современных web-сайтах так или иначе применяются элементы GIF. Тем не менее GIF чрезвычайно широко используется в Интернете и сейчас, причем пользователи не обязаны оплачивать кому бы то ни было возможность разместить на своей страничке изображение в данном формате, так как упомянутые выше финансовые претензии касаются, в первую очередь, производителей работающего с GIF программного обеспечения. Ситуация с дальнейшей судьбой этого стандарта до сих пор остается не разрешенной.

Благодаря возможностям алгоритма LZW стандарт GIF позволяет значительно сокращать объем итогового графического файла по сравнению с исходным изображением. Достигается это методом смешения сходных оттенков в один. Если, например, в составе рисунка имеется участок, состоящий из нескольких сходных полутонов, к примеру, голубого, светло-голубого и темно-голубого цвета, они будут кодированы одним оттенком -- голубым. Информация об изображении в файле стандарта GIF записывается построчно то есть представляет собой массив описаний строк высотой в один пиксел. Именно это свойство GIF, а также то, что данный формат оперирует фиксированной, так называемой индексированной палитрой, причем число цветов в этой палитре не превышает 256,явилось основой для появления двух простых правил, применяющихся в современном web-дизайне. Вот они.

ВНИМАНИЕ Стандарт GIF используется в документах HTML только для отображения так называемой бизнес-графики: диаграмм, логотипов, кнопок, разделительных линий, других элементов оформления страницы. Для размещения на web-сайте фотографий, репродукций картин и изображений с большим количеством цветов и цветовых переходов используется стандарт JPEG.

В упрощенном виде данный закон «web-мастерства» можно сформулировать так: если изображение рисованное, его следует представлять в стандарте GIF, во всех остальных случаях лучше воспользоваться JPEG.

ВНИМАНИЕ Подготавливая рисунок для сохранения его в формате GIF, необходимо избегать следующих художественных приемов: градиентных заливок, размытий, постепенных цветовых переходов с множеством оттенков, а также графических фильтров, обеспечивающих неравномерное смешение нескольких цветов на одном участке изображения, например, эффектов изменения интенсивности освещения, подобных фильтру «блик» редактора Adobe Photoshop.

Это правило продиктовано тем, что алгоритм замещения схожих оттенков одним в формате GIF далеко не всегда работает корректно. Правильнее было бы, наверное, сказать «работает некорректно почти всегда». Поэтому участки со множеством различных оттенков на небольшом физическом пространстве рисунка после сохранения изображения в индексированной палитре будут выглядеть смазанными и «грязными». Этого можно избежать, применяя в своей иллюстрации по возможности однотонные и контрастные цвета. Одно из замечательных свойств стандарта GIF -- его уникальная особенность, названная разработчиками «interlace», или, по-русски, «черезсторность». Она позволяет загружать картинку с сервера в клиентский браузер не целиком, а частями, причем процедура считывания файла выглядит следующим образом: сначала на экране отображаются первая, пятая и десятая строки, составляющие изображение, затем -- вторая, шестая и одиннадцатая и т. д. Таким образом, для пользователя создается иллюзия постепенной загрузки графического элемента: картинка как бы медленно «проявляется» на странице, что иногда бывает очень полезно при включении в документ изображений большого размера --психологически зрителю легче дождаться полной прорисовки иллюстрации, чем несколько минут скучать перед пустым экраном. К тому же еще до полной загрузки файла пользователь может оценить приблизительное содержимое картинки и решить, стоит ли ему дожидаться ее полной прорисовки или нет.

Через несколько лет после создания стандарта GIF, в 1989 году, компания CompuServe выпустила новую версию этого графического формата, получившую название GIF89a. Данная модификация включает в себя еще две уникальные особенности, широко использующиеся в современном Интернете. Первая называется «transparency» и подразумевает создание для изображения прозрачного фона методом сохранения вместе с файлом так называемого альфа-канала, представляющего собой маску прозрачности рисунка. Цвета, помеченные в альфа-канале как прозрачные, станут невидимы в браузерах и большинстве других программ, предназначенных для просмотра изображений. Эта функция необходима, например, при размещении картинок неправильной геометрической формы на странице со сложным фоновым рисунком, когда корректно «подогнать» части изображений друг к другу не представляется возможным.

СОВЕТ Убрать ненужный фон из файла GIF можно, воспользовавшись встроенной процедурой графического редактора Adobe Photoshop. Для этого вменю «файл» необходимо выбрать пункт «экспорт», среди предложенных вариантов отметить «GIF89a» и в появившемся окне с помощью инструмента «пипетка» указать цвета, в которых вы больше не нуждаетесь.

Другая полезная особенность стандарта GIF89a заключается том, что этот формат позволяет сохранять в файле с одним физическим заголовком несколько разных изображений, демонстрируя их на экране последовательно одно за другим, причем с возможностью специфицировать порядок их чередования и временной интервал между сменами кадра. Именно на этом принципе построена весьма распространенная в Интернете GIF-анимация, о которой мы поговорим подробнее в этом же уроке.

JPEG

JPEG (Joint Photographic Experts Group) -- графический стандарт, созданный на основе одноименного алгоритма сжатия изображений с потерей качества, кодирующего не идентичные элементы, как алгоритм LZW, а межпиксельные интервалы. В упрощенном виде механизм сжатия изображения в файл формата JPEG выглядит следующим образом. Первой ступенью компрессии является преобразование изображения в цветовой образ LAB, раскладывающий картинку на три независимых канала, один из которых (Lightness) выделен для сохранения значений интенсивности цветов, а два других (А и В) -- для запоминания непосредственно цветовой информации. Причем данные о цветах сохраняются в виде шкалы, организованной по принципу непрерывного спектра. Вторя ступень -- собственно компрессия: из получившейся цветовой модели удаляются приблизительно три четверти информации о цвете, затем образ дробится на участки размером 8x8 точек и преобразуется в числовой массив данных. Заголовок каждого блока описывает доминирующий цвет участка, остальная информация -- менее заметные оттенки. На третьей ступени сжатия из массива данных удаляется определенная часть информации, описывающей второстепенные оттенки, причем количество изымаемых данных зависит от выбранного пользователем качества результирующего изображения. И наконец, готовый файл сжимается согласно алгоритму Хаффмана, который предусматривает замену наиболее часто встречающихся в массиве данных знаков более компактной двух битной кодировкой. Декомпрессия файла JPEG происходит в обратном порядке.

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

ВНИМАНИЕ При изготовлении иллюстраций в формате JPEG рекомендуется избегать использования больших участков, заполненных одним цветом, во избежание появления на изображении постороннего цветового «шума» и «грязи».

Несоблюдение этого правила может повлечь за собой ряд неприятных последствий: например, картинка в формате JPEG, содержащая достаточно большое пространство, заполненное одним цветом, будет выглядеть на экране компьютера «грязно» и неопрятно, фон сохраненного в JPEG логотипа, «подогнанный» под фоновый цвет html-документа, «поплывет» при изменении свойств экранной палитры.

Существует несколько разновидностей стандарта JPEG. Среди них -- формат JPEG Baseline Optimized, основанный на более совершенном алгоритме компрессии изображений. Недостатком данной реализации JPEG является то, что она не распознается целым рядом часто используемых приложений. Так называемый Progressive JPEG был оптимизирован специально для представления графики во Всемирной сети, изображения в этом формате сжимаются чуть лучше, чем в стандартном JPEG, но хуже, чем в JPEG Baseline Optimized. Отличительная особенность Progressive JPEG -- возможность сохранять графику в чересстрочном режиме, как это реализовано в стандарте GIF.

СОВЕТ При работе со стандартом JPEG следует учитывать, что сжатию с наименьшей потерей качества поддаются изображения, сохраненные с высоким разрешением, от 150 до 300 dpi. В процессе обработки иллюстраций лучше всего сохранять картинку в формате TIFF и переводить в JPEG лишь готовый результат, поскольку каждое промежуточное сохранение файла JPEG на диск приводит к удалению второстепенной информации и ухудшению качества рисунка.

PNG

Описанная чуть ранее «криминальная история» с неожиданным изменением статуса алгоритма сжатия LZW с бесплатного на платный спровоцировала стремление пользователей избавиться от формата GIF, дальнейшая судьба которого становилась все более туманной. С этой целью во второй половине девяностых годов была создана инициативная группа программистов и исследователей, которую возглавил американский специалист по электронным технологиям Том Боутелл (Thomas Bowtell). Перед инициативной группой стояла нелегкая задача: разработать стандарт, который не только включал бы в себя все лучшие качества GIF, нo и превосходил бы его по всем характеристикам, оставаясь при этом совершенно бесплатным для пользователей. Основной областью применения данного формата должен был стать Интернет. Такой стандарт был создан и получил название Portable Network Graphics -- PNG, хотя многие пользователи Всемирной сети придумали этой аббревиатуре иную расшифровку: Picture is Not GIF.

PNG, как и GIF, поддерживает interlacing (через строчность), но в отличие от последнего не только по горизонтали, но и по вертикали. Палитра PNG не ограничивается 256 цветами, данный формат позволяет создавать изображения с глубиной цвета до 48 бит. Весьма любопытные изменения внесены в режим прозрачности графики: PNG также поддерживает альфа-канал, по состоит он не из одного уровня, как альфа-канал файлов GIF, а из 254 уровней для каждого элемента изображения, с диапазоном прозрачности рт 0 до 99 %. Благодаря этому дизайнер получил возможность создавать картинки с переменной прозрачностью, например, логотипы, фон которых плавно сливается с фоновым цветом html-документа, каким бы тот ни был.

Помимо альфа-канала изображения PNG содержат так называемый блок описания гамма-коррекции. Под переменной «гамма» в данном случае подразумевается некая величина, выражающая зависимость яркости свечения каждой точки экрана пользователя от напряжения на электродах кинескопа, которое берется из файлов управления видеоподсистемой компьютера. Таким образом, при открытии изображения, созданного с помощью IBM-совместимой машины, на компьютере другого производителя, например на Apple Macintosh, в яркость цветопередачи вводится соответствующая поправка, и картинка отображается совершенно идентично на разных типах оборудования. Этим стандарт PNG еще более приблизился к основной идее Интернета единообразию отображения web-страниц на компьютерах от различных производителей.

Поскольку данный формат появился на свет относительно недавно, его поддерживают далеко не все броузеры, в отличие от GIF и JPEG, которые распознаются без проблем любыми программами, предназначенными для отображения графики. PNG поддерживается Microsoft Internet Explorer, начиная с версии 4.0, и Netscape Communicator версий 4.04 и выше. Старые браузеры отобразить картинку в формате PNG не смогут.

Оптимизация графических изображений

Несмотря на наличие довольно эффективных алгоритмов сжатия графической информации, при сохранении изображений GIF и JPEG на диск в файлы записывается определенное количество «лишних» данных, таких, например, как невидимые текстовые комментарии, автоматически добавляемые в заголовок файла некоторыми графическими редакторами, ссылки на разработчиков стандарта и соответствующего программного обеспечения и т. д. Все эти дополнения лишь увеличивают физический размер файла и не несут никакой полезной нагрузки. Чтобы сократить время загрузки иллюстраций в клиентский браузер, используют специальные методы оптимизации изображений.

Существуют два способа дополнительной компрессии графических файлов: с использованием специальных утилит, так называемых оптимизаторов графики, и вручную. Рассмотрим оба варианта. А начнем мы, пожалуй, с небольшой и очень удобной программы-компрессора файлов GIF, разработанной МартиномХарингом (Martin Haring), которая называется GifClean32.

Данная программа хороша, прежде всего, тем, что позволяет гибко настраивать список тех компонентов GIF-изображений, которые подлежат удалению, в частности комментарии из самого файла и редко встречающиеся цвета из файловой палитры. Левая кнопка, расположенная на панели инструментов GifClean32,открывает файл GIF для компрессии и редактирования. При помощи следующей кнопки вы можете внести в открытый графический файл собственные комментарии, с помощью третьей кнопки -- записать комментарии текущего изображения в отдельный текстовый документ, а посредством четвертой -- сохранить само изображение в любую директорию на диске. Функции следующих четырех кнопок (слева направо): удаление всех комментариев из изображения, удаление малоиспользуемых оттенков, отображение извлекаемых комментариев на экране, отображение обрабатываемого изображения. И наконец, последние три кнопки (опять же слева направо) -- это вызов справки о программе GifClean32,остановка компрессии после завершения обработки текущего файла и автоматическая перезапись оптимизированного изображения в файл с тем же именем, что и исходный. Все перечисленные процедуры продублированы в командной панели.

Оптимизаторы JPEG, в отличие от компрессоров для файлов стандарта GIF, в большинстве случаев рассчитаны на эксплуатацию под MS-DOS. Среди них --небольшая утилита JPEG Cleaner, предназначенная для удаления из изображений JPEG комментариев, записанных в файл различными графическими редакторами. Это позволяет сократить объем целевого файла на 5-10 %, а если иллюстрация создана с применением редактора Adobe Photoshop, то можно добиться сокращения ее объема вплоть до 45 % без потери качества. Программа имеет русскоязычный интерфейс и работает только с MS-DOS. При ее запуске под Windows возможно появление непредвиденных ошибок.

Для оптимизации графики следует скопировать все необходимые файлы JPEGв тот же каталог, где хранятся файлы jc.exe и jc.cfg, и выполнить из командной строки процедуру jc file.jpg или jc *.jpg. Программа самостоятельно найдет и удалит из предложенных ей файлов всю лишнюю информацию. Для изменения настроек программы необходимо отдать из командной строки DOS команду jc /с.

Универсальным программным продуктом для оптимизации графики, ориентированной на Интернет, является пакет WebGraphics Optimizer производства компании Plenio Software Solutions. Данную программу можно бесплатно загрузить с сайта разработчика в виде shareware-версии, доступной для свободного использования в течение 30 дней.

WebGraphics Optimizer -- 32-рязрядное приложение Windows, содержащее множество функций полноценного графического редактора. Эта программа умеет работать с 24 типами графических файлов, включая PNG, формат Adobe Photoshop PSD и даже MAC (Mac Paint), применяющийся на компьютерах Apple Macintosh.

Интерфейс WebGraphics Optimizer достаточно прост. На панели инструментов расположено всего лишь тринадцать кнопок и меню управления масштабом обрабатываемой картинки. Их функции таковы.

Окно инструментов включает в себя четыре функциональные вкладки, позволяющие оперировать с исходным изображением, редактируя его параметры. Вкладка Resize дает возможность изменить геометрические размеры исходного изображения или его выделенного участка путем перемещения мышью «ползунков» для ширины (Width) и высоты (Height) картинки.

Ha вкладке Adjust Color/Intensity можно корректировать цвета, точнее их интенсивность. Рабочее поле данной вкладки содержит выпадающее меню со следующими опциями:

Brightness -- управление яркостью;

Gamma correction корректировка гаммы;

Contrast -- управление контрастностью;

Histogram contrast -- настройка контраста гистограммы;

Stretch Intensity построчная интенсивность отображения иллюстрации;

Invert -- инвертирование цветов;

Hue -- коррекция оттенков;

Saturation -- настройка насыщенности цветов;

Histogram equalize выравнивание цветовой гистограммы;

Fill color заполнение выделенного участка каким-либо цветом.

Каждая опция данного меню, за исключением пунктов Stretch Intensity, Invert и Histogram equalize, имеет в нижней части окна собственный «ползунок» настройки, перемещая который пользователь может задать индивидуальные значения того или иного параметра.

Вкладка Filters содержит различные графические фильтры, повторяющие в основном аналогичные фильтры Adobe Photoshop:

Halftone -- «Полутона»;

Blur/Sharpen «Размытие/Резкость»;

Posterize «Пастеризация» («Схематизация»);

Mosaic -- «Мозаика»;

Emboss -- «Чекан»;

Soften -- «Смягчение полутонов»;

Oil Painting -- «Масляная живопись»;

Reduce Noise -- «Уменьшить шум»;

Add Noise -- «Добавить шум»;

Intensity Detect -- «Выделение интенсивности»;

Edge Detect -- «Выделение краев»;

Line Detect -- «Выделение строк».

Каждый из перечисленных фильтров имеет собственные параметры настройки, отображаемые в том же окне чуть ниже основного меню. И наконец, вкладка Special (рис. 6) служит для следующих манипуляций с исходным изображением: поворот картинки на любой угол (Rotate), деформация ее в горизонтальной проекции (Parallelogram) и зеркальное отражение по вертикали или горизонтали (Flip Image).

Все команды, вызываемые нажатием кнопок на панели инструментов, продублированы в панели команд. Более того, программа Web Graphics Optimizer позволяет работать с выделенными участками изображения, которые можно задать при помощи пункта системного меню Edit > Select Region, причем выделение фрагментов возможно в виде нескольких геометрических фигур: Rectangle (прямоугольник), Ellipse (овал), Rounded Rectangle (прямоугольник со скругленными углами) и, наконец, Freehand -- произвольная фигура. Можно создать копию текущего изображения (команда меню Edit > Duplicdate Image), эта функция применяется в случае, когда пользователь желает поэкспериментировать с дублем, опасаясь испортить исходную картинку.

Основное рабочее поле программы Plenio WebGraphics Optimizer занимает разделенное вертикально окно, отображающее исходное изображение и его оптимизированную копию. В нижней части панели указаны размеры исходного и оптимизированного файла, а также коэффициент сэкономленного на компрессии дискового пространства в процентах. При выборе одного из пяти уровней оптимизации графики (функция вызывается нажатием кнопок, обозначенных на рис. 3 цифрой 10) для каждого дубликата картинки открывается новое окно, причем пользователь может выбрать тот вариант изображения, который в наибольшей степени устраивает его по качеству и размеру файла.

Процедура компрессии файлов JPEG вручную выглядит достаточно просто в графическом редакторе, позволяющем обрабатывать изображение, при сохранении картинки в файл обычно появляется меню, содержащее «ползунок» регулятора степени сжатия. Она отображается, как правило, в условных пунктах от 1 до 10, причем максимальному сжатию соответствует минимальное качество картинки. Здесь перед дизайнером стоит только одна задача: найти «золотую середину», компромисс между наименьшим объемом целевого файла и допустимым качеством изображения. В большинстве случаев такой компромисс удается отыскать экспериментальным путем, варьируя настройки компрессора. С GIF все обстоит гораздо сложнее. Оптимизировать файл по размеру с помощью встроенных функций графических редакторов не всегда возможно, а использование внешних компрессоров зачастую ведет к нежелательной и неоправданной потере качества изображения. Происходит это, прежде всего, потому что все без исключения программы-оптимизаторы графики используют один алгоритм сжатия GIF для разных картинок, а именно метод удаления из палитры GIF неиспользуемых и малоиспользуемых цветов с подстановкой вместо них цветов, близких по оттенкам, что, как правило, портит изображение. Поэтому, если вы хотите, чтобы ваша страница выглядела качественно и профессионально, лучше всего оптимизировать GIF вручную. Это занимает чрезвычайно много времени и требует большого терпения, но для получения хорошего результата такой способ вполне оправдан.

Поскольку информация об изображении в файле стандарта GIF записывается построчно, чем однороднее будет ваше изображение по горизонтали тем компактнее получится целевой файл. Пример? Пожалуйста. Создадим изображение GIF, состоящее из семи цветов, соответствующих спектру радуги: красная полоса, оранжевая, желтая, зеленая, голубая, синяя и фиолетовая, причем все цветовые полосы иллюстрации разместим на картинке вертикально. Размер изображения составляет 210 на 210 пикселов. Как записывается информация о каждой строке такого рисунка в графический файл? Приблизительно так: «первая строка: тридцать точек красного цвета, тридцать точек оранжевого, тридцать точек желтого» и т. д. При сохранении изображения получится файл объемом 3,9 Кбайт. Теперь развернем картинку на 90° чтобы полосы стали горизонтальными. Логическая запись первой строки в этом случае звучит так: «двести десять точек красного цвета». Компактнее? Конечно: файл уменьшился почти в три раза, теперь его объем составляет1,34 Кбайт.

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

Следует проследить также за тем, чтобы ваше изображение не содержало большого количества полутонов. Если на вашей картинке синий цвет плавно «перетекает» в белый фон посредством восьми полутоновых переходов голубого оттенка, не проще ли свести этот градиентный участок к трем оттенкам голубого? Теперь, отредактировав вручную палитру файла и удалив из нее все цвета, исчезновение которых не повлияет, по вашему мнению, на качество изображения (пункт Таблица цветов в меню Изображение редактора Adobe Photoshop), вы сократите время загрузки иллюстрации, а также сэкономите определенное количество килобайт на диске сервера, где будет размещаться сайт. Следует помнить, что создание прозрачного фона для GIF также способствует уменьшению его объема. Затем с помощью любой подходящей утилиты, широкий ассортимент которых представлен на серверах, предлагающих бесплатное программное обеспечение, можно удалить из файла все ненужные комментарии, и ваша картинка готова к публикации.

Включение графики в web-страницу

Интеграция графики в html-документ осуществляется с использованием команды <IMG>, синтаксис которой в общем виде записывается следующим образом:

<IMG SRC="URL" ALIGN="значение" WIDTH="значение" HIGHT="значение" ALT="текст">

В качестве параметра атрибута SRC указывается путь к изображению в виде либо полного URL, либо сокращенного URL с указанием пути к изображению на локальном сервере (например, . ./images/picture.jpg).

ВНИМАНИЕ Указывая URL картинки, внимательно следите за регистром символов, которыми вы записываете расширение файла. Некоторые графические редакторы, такие как Adobe Photoshop, по умолчанию сохраняют изображение в файл с расширением в заглавном регистре, например picture. GIF. Иллюстрация с расширением в URL в строчном регистре(picture.gif) при отображении документа HTML в браузере просто не будет показана на странице.

С помощью атрибута ALIGN картинка позиционируется в документе HTML или в ячейке таблицы. Однако помимо традиционных значений данного атрибута --RIGHT, LEFT и CENTER, -- совместно с тегом <IMG> можно использовать и другие параметры атрибута:

ТОР -- изображение совмещается верхним краем с верхней границей ячейки таблицы или с верхней границей текстовой строки, в которой размещена картинка. Следует учитывать, что различные браузеры интерпретируют данное значение атрибута ALIGN по-разному, в связи с чем при использовании этого параметра возможна неадекватность отображения документа HTML в InternetExplorer и Netscape Navigator.

BOTTOM -- изображение совмещается нижним краем с нижней границей ячейки таблицы или текстовой строки.

MIDDLE -- центр изображения выравнивается по основной строке, либо оно размещается в середине табличной ячейки.

BASELINE -- изображение выравнивается по условной «базовой линии». Применение этого параметра рекомендуется в случае, когда web-мастер размещает несколько рисунков или несколько фрагментов одного рисунка в разных ячейках строки таблицы. Именно с использованием значения ALIGN="baseline" удается добиться оптимального выравнивания иллюстраций для браузеров всех типов.

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

Почему же использование данных атрибутов необходимо? При отображении на экране компьютера html-документа транслятор браузера, встречающий в его тексте процедуру вызова графического изображения, не снабженную указанием на его геометрические размеры, приостанавливает дальнейшую загрузку страницы до тех пор, пока изображение не будет считано полностью. Только после этого он компонует документ согласно получаемому им с сервера html-коду дальше. Если же размеры картинки указаны явно, браузер резервирует под нее свободное пространство, продолжая считывание кода и отображение результатов его обработки на экране, то есть графика загружается параллельно с этим процессом.

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

Вот пример применения тега <IMG>:

<IMG SRC="/images/sunset.jpg" ALIGN="CENTER" WIDTH="325" HEIGHT="215"А1Т="Красивый закат на берегу Карибского моря">

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

<А HREF="URL документа, на который организуется ссылка">

<IMG SRC="URL изображения" ALIGN-''значение" WIDTH="значение" HEIGHT="значение"

АLТ="Альтернативный текст" BORDER="значение"></A>

Как видите, особых отличий в написании этих команд от их традиционного синтаксиса в данном случае нет, за исключением того, что между тегами <А> и </А>вместо текстовой строки вставляется директива <IMG>. Атрибут BORDER управляет толщиной синей рамки, в которую заключается изображение, включенное в тег <А>, при превращении его в гиперссылку. В большинстве случаев эта рамка портит дизайн web-страницы, и чтобы избавиться от нее, достаточно установить значение BORDER равным нулю.

Отрывок кода HTML, позволяющего использовать изображение в качестве гиперссылки, приведен ниже:

<А HREF="/hobbie/index.html"> <IMG SRC="/images/hobbie.jpg" ALIGN="BASELINE" WIDTH="315" HEIGHT="226" АLТ="Тематический раздел "Мои увлечения" BORDER="0"></A>

Помимо описанных атрибутов тега <IMG> в команде вызова изображения иногда используют еще два: HSPACE и VSPACE. Данные атрибуты задают горизонтальные и вертикальные отступы от изображения в пикселах, которые необходимы, например, в случае, когда картинка помещается на web-странице рядом с текстом. HSPACE определяет величину незаполненного пространства справа и слева от картинки, VSPACE соответственно сверху и снизу.

Путешествуя по ресурсам Всемирной сети, вы наверняка неоднократно сталкивались с весьма распространенным дизайнерским приемом использованием графических изображений в качестве своеобразных карт (image map), в которых определенным участкам картинки соответствуют гиперссылки на различные ресурсы сервера. Такие карты можно создать с помощью тега <МАР>, о правилах применения которого мы поговорим в следующем уроке. Однако существует и другой способ реализации этого приема, к которому прибегают в тех случаях, когда включение в код HTML команды <МАР> по каким-либо причинам невозможно. Речь идет о рассечении целого изображения на отдельные фрагменты и «склеивании» его по принципу мозаики в невидимой таблице с назначением отдельным фрагментам картинки свойств гиперссылки при помощи директивы<А>. Иногда данный прием применяется не только при создании элементов, подобных image map, но и при подготовке рисованых заголовков или полей для размещения рекламного баннера.

Однако аккуратно «разрезать» изображение при помощи традиционных графических редакторов, причем так, чтобы готовая «мозаика» правильно вписывалась в таблицу, весьма трудно. В этой задаче web-мастеру помогает специальная утилита -- фрагментатор графики ShoeString Picture Dicer. Она не только разделит картинку на составляющие так, как это необходимо дизайнеру, но еще и автоматически сгенерирует файл HTML с невидимой таблицей, «склеивающей» изображение в единое целое.

Picture Diser позволяет открывать графические файлы форматов DIB, GIF,JPEG, PCX, TGA и TIFF, сохраняя результат в виде файлов BMP, DIB, PCX,TGA, TIFF, GIF или JPEG. Формат вывода изображений можно задать в меню Output Format.

После открытия картинки (функция File > Open File) программа спросит вас, в какой директории на винчестере сохранить результат обработки изображения. Левой кнопкой мыши вы можете установить границы вертикального разбиения картинки (они отмечаются на экране линиями с красными стрелками), а правой кнопкой -- горизонтальные границы (линии с синими стрелками). Удалить неправильно установленную границу можно щелчком левой кнопки мыши над стрелкой соответствующей линии. После того как все границы размечены, необходимо выполнить команду File > Process Image.

Picture Dicer автоматически фрагментирует изображение и сохранит результат в указанной вами директории.

Литература

1.Гребенюк Е.Н., Гребенюк Н.А. Технические средства информатизации - М.; Изд. Центр Академия,2002.

2. Дьяконов В.П. Настольная книга пользователя Интернет - М., Десс - Ком, 2003.

3.Муртазин Э.В. Internet: Учебник - М., ДМК, 1999.

4.Киселев С.В., Куранов В.П. Оператор ЭВМ: Учебник. - 2-е изд. - М.; Изд. Центр «Академия», 2002.

5.Романычева Э.В., Соколова Т.Ю.Инженерная и компьютерная графика, М., 2001.