|
ГрафикаВозможность использования графики трудно переоценить в приложении к любому виду публикации, в том числе и для Web-документов. Без иллюстраций документ однообразен, вял и скучен. Расчетливо подобранная и правильно размещенная в документе графика делает его визуально привлекательнее и, что самое важное, передает одну из основных идей документа. Изображения могут сделать текст вашего документа более содержательным. Представьте некий сухой HTML-документ, содержащий, например, описание придуманного вами технического устройства. Если он состоит из одного текста, то многим покажется скучным и порой непонятным. А если его "разбавить" несколькими иллюстрациями, размещенными в нужных местах, документ станет более читабельным и визуально привлекательным. Изображения помогают лучше передать суть и содержание документа. Можете ли вы представить эту книгу без иллюстраций? Вы бы вряд ли ее купили, и авторы не могли бы иметь за это к вам никаких претензий. Вспомните старое правило: лучше один раз увидеть, чем сто раз услышать (в данном случае — прочитать). Однако во всем нужно чувство меры. Это правило лишний раз подтверждается при просмотре ряда Web-страниц. Довольно часто встречаются Web-документы, загроможденные фоновыми изображениями, ничего не выражающей графикой и раздражающей анимацией. Планируя разместить на своей странице то или иное изображение, убедитесь, что оно действительно необходимо. Если при просмотре печатных материалов вам не составит труда перевернуть страницу, то для Web-документов часто приходится дожидаться окончания его загрузки с тем, чтобы двинуться дальше. Загроможденность графикой также плоха, как и полное ее отсутствие. Дело усугубляет наличие рекламы в Интернет, которая появляется на страницах многих сайтов в виде привлекательных графических плакатов (рекламных баннеров), которые обычно размещаются до основной содержательной части документов. Обычная реакция пользователей на рекламу в Web-документах точно такая же, как и на рекламу, вставляемую посреди вашей любимой телевизионной передачи. Использование графики в компьютерных документах имеет давние корни. Еще в те прежние времена, когда о мониторах приходилось лишь мечтать, подготовка документов выполнялась на перфолентах, перфокартах и распечатывалась на АЦПУ, предпринимались попытки что-то изобразить графически. С помощью совокупности алфавитно-цифровых символов, накладываемых друг на друга, даже на алфавитно-цифровом печатающем устройстве удавалось построить подобие изображения. Вспомните кинофильм Э. Рязанова "Служебный роман", в котором над рабочим местом одного из героев висела картинка, распечатанная на АЦПУ. Как это ни удивительно, графика такого рода (ее называют ASCII-графикой) до сих пор популярна в среде компьютерщиков. Так, например, в сети FIDOnet многие используют логотипы, составленные из символов кода ASCII. А в сообщениях, которыми обмениваются пользователи электронной почты, принято использовать отдельные совокупности символов для выражения своих эмоций. Поверните голову набок и посмотрите, что вам напоминает следующая совокупность символов :-). Вернемся в современность. В предыдущих главах вы узнали об основных методах построения HTML-документов. Эта глава дополнит ваш инструментарий средствами включения изображений в страницы, позволяющих сделать их более привлекательными и информативными. Дается обзор различных графических форматов и рекомендации по их применению. Приводятся правила встраивания изображений и примеры их использования. Для начала рассмотрим общие вопросы, возникающие на первом этапе работы с графическими изображениями на Web-страницах. Принимая решение о целесообразности включения в документ тех или иных иллюстраций, нужно иметь в виду следующее. Графические файлы могут иметь значительные размеры, что требует времени для их загрузки. Насыщенность графикой может привести к недопустимо большим затратам времени, требуемым для получения документов, особенно, если используется соединение с помощью модема на небольших скоростях. С другой стороны, одновременная работа нескольких пользователей с большими документами, размещенными на вашем сервере, может также привести к его перегрузке. Многие пользователи работают в режиме отключения приема графических изображений для увеличения скорости передачи данных. Некоторые пользователи до сих пор используют чисто текстовые программы просмотра. В обоих случаях от полученных документов останется только текстовая часть, которая должна давать информацию о содержательной стороне документа. Поисковые системы не могут индексировать графику. Поэтому если на ваших страницах расположены только иллюстрации без текстовых пояснений, то читатели, использующие современные методы поиска, такие страницы не обнаружат. Следует помнить, что пользователи могут работать с различным разрешением экрана монитора и различной глубиной цвета. Страницы, хорошо смотрящиеся при одном разрешении, могут выглядеть совершенно по-другому при ином разрешении. Сейчас на многих сайтах просто указывают, что его материалы оптимизированы для разрешения 800x600. Нужно помнить также, что многие изображения защищены законом об авторских правах. Публикация изображений без санкции автора может привести к неприятностям. В общем, изображения на Web-страницах могут использоваться двумя способами: в качестве фонового изображения, на котором располагаются элементы основного документа, и изображения, встраиваемые в документ. Далее будут рассмотрены особенности применения тех и других изображений. Вопросы использования изображений, отдельные части которых являются ссылками на другие документы (так называемые карты-изображения), вынесены в отдельную главу. Рассматривая изображение на экране монитора, вы на самом деле видите большое количество разноцветных точек (пикселов), которые, будучи собранными вместе, образуют некую картинку. Отсюда следует, что графический файл должен содержать информацию о том, как представить этот набор точек на экране. Существует много способов описания графической информации, соответственно имеется значительное количество форматов хранения графических файлов, — порядка нескольких десятков. Все форматы хранения графической информации можно разделить на два типа: векторный и растровый. Файлы векторной графики содержат математические данные о том, как перерисовать изображение с помощью отрезков прямых (векторов) при выводе его на экран. Процесс вывода требует дополнительной обработки, но такое представление графической информации имеет важное преимущество: масштаб изображения может быть изменен без потери качества, так как не существует фиксированной связи между тем, как он определен в файле и выводом точек на экран. При масштабировании растровой графики обычно происходит потеря разрешения, что ухудшает качество изображения. Векторная графика, как правило, употребляется для изображений с четкими геометрическими формами. Примером ее применения являются системы автоматизированного проектирования (CAD). В векторном виде хранится информация для некоторых типов шрифтов. Растровая графика предполагает хранение данных о каждой точке изображения. Для отображения растровой графики не требуется сложных математических расчетов, достаточно лишь получить данные о каждой точке и отобразить их на экране. Примечание В действительности вопрос вывода растровых изображений не так прост. Во-первых, большинство форматов хранения растровых изображений предусматривают сжатие данных, поэтому перед выводом требуется осуществлять процедуру декодирования. Во-вторых, при выводе изображений браузерами допустимо изменять их масштаб. Поэтому при отображении должна решаться довольно нетривиальная задача расчета цвета отдельных точек по исходной совокупности данных. В зависимости от алгоритма, используемого для масштабирования изображения, можно получить различный результат. В-третьих, при отображении иногда требуется решать вопросы несоответствия палитры изображения или глубины цвета режиму работы монитора. Все перечисленные вопросы успешно решаются современными браузерами (причем это выполняется на лету, при загрузке изображений), однако конкретные алгоритмы могут различаться, что приводит к разному представлению одного и того же документа в различных браузерах. На Web-страницах в подавляющем большинстве случаев используется растровая графика в двух форматах: GIF и JPG. Подробное обсуждение преимуществ и недостатков того и другого формата будет дано ниже. Здесь лишь заметим, что именно эти два формата непосредственно поддерживаются популярными браузерами, а для использования большинства других графических форматов потребуются специальные средства. Формат BMP является стандартом MS Windows и поддерживается браузером Internet Explorer, однако его употребление не может быть рекомендовано, так как данный формат не поддерживает сжатие данных. Разработанный недавно формат PNG был призван заменить растровый формат GIF, однако, несмотря на его очевидные преимущества, должного распространения на настоящий момент не получил. Иные графические форматы (кроме GIF и JPG) в HTML-документах на WWW-серверах практически не встречаются, хотя принципиально это возможно. Использование других форматов не рекомендуется по следующим причинам: во-первых, только для GIF и JPG осуществляется встроенная поддержка в большинстве браузеров, тогда как для иных файлов необходимо подключение внешних программ отображения, во-вторых, структура файлов GIF и JPG наиболее подходит для передачи данных по сети и является независимой от платформы. Так, например, использование старого и доброго формата PCX, который существует уже более 10 лет и распознается практически всеми графическими редакторами, крайне неудачно для сетевых приложений. Во-первых, алгоритм сжатия формата PCX (RLE — метод группового кодирования) дает малую степень сжатия, однако, вследствие своей простоты, позволяет распаковывать данные со скоростью, близкой к скорости считывания. Для сетевых приложений определяющим фактором является размер файла, от которого непосредственно зависит время передачи данных, по сравнению с которым время распаковки составляет ничтожную величину. Во-вторых, несмотря на последовательную структуру файла PCX (данные в файле всегда хранятся по строчкам, начиная с первой до последней), палитра располагается в конце PCX-файла (это справедливо только для 256 цветов), что не дает возможности начать выдачу изображения по мере считывания файла. Последнего недостатка не имеют 16-цветные PCX-файлы (палитра которых располагается в заголовке), а также последние версии PCX-файлов, которые разрешают хранить изображение в 16,7 млн цветов (для них понятие палитры отсутствует). Перейдем теперь к общим вопросам включения изображений в HTML-страницы, а лишь затем более подробно обсудим нюансы использования различных форматов. Разработчики Web-страниц могут управлять цветом фона документа, а также указывать изображения, используемые в качестве фонового. Идея применения фоновых изображений хорошо знакома пользователям системы Windows, в которой предусмотрен ряд возможностей по изменению параметров рабочего стола (desktop). В этой системе в качестве параметров отображения рабочего стола может быть указан как однотонный цвет, так и фоновый узор или рисунок (рис. 3.1). 
Рис. 3.1. Выбор параметров рабочего стола MS Windows Во многом аналогично выполняется настройка параметров фона для HTML-документов. Для задания цвета фона употребляется параметр BGCOLOR тега <BODY>, а фоновое изображение включается в документ при помощи параметра BACKGROUND. В качестве значения параметра BGCOLOR указывается название цвета или его составляющие в шестнадцатеричном коде. В качестве фонового изображения должен использоваться графический файл формата GIF или JPG. Примечание Названия стандартных цветов и их шестнадцатеричное представление приведено в приложении П2. Фоновое изображение для HTML-документа всегда заполняет все окно просмотра (в отличие от рабочего стола Windows, где изображение может не размножаться). Если размер изображения меньше размеров окна просмотра, то оно будет размножено по принципу мозаики. Поэтому фоновые изображения должны создаваться так, чтобы при появлении на экране границы сшивки повторяющихся изображений были бы невидимы. Эта задача напоминает подбор рисунка при оклеивании обоями стен комнаты. Обычно в качестве фонового берется небольшое изображение, для загрузки которого по сети не требуется значительного времени. Существуют огромные коллекции изображений (текстур), которые можно использовать при разработке своих собственных HTML-документов (рис. 3.2). Другим часто используемым вариантом является фоновое изображение в виде бледного рельефного логотипа. Такая графика ясно идентифицирует сайт и не мешает восприятию материала. Приведем пример записи тега <BODY> с указанием фонового цвета и фонового изображения: <BODY BACKGROUND=texture.gif BGCOLOR=gray> Пример документа с фоновым изображением показан на рис. 3.3. Заметим, что одновременное задание параметров BACKGROUND и BGCOLOR вовсе не обязательно. Любой из них, равно как и оба вместе, могут отсутствовать. На первый взгляд может показаться, что указание фонового цвета излишне при задании фонового изображения. В действительности все наоборот. Можно рекомендовать всегда указывать цвет фона документа если задается фоновое изображение. Дело в том, что при загрузке документа прежде всего отображается текстовая часть, а на следующем проходе будут загружаться изображения, в том числе и изображение, используемое в качестве фонового. До момента загрузки и отображения фонового изображения цвет фона документа будет определяться значением параметра BGCOLOR или устанавливаться по умолчанию. Опыт работы с HTML-документами, получаемыми по сети, показывает, что до загрузки фонового изображения порой проходит достаточное количество времени, в течение которого пользователь знакомится с уже загруженным текстом. В какой-то момент проявляется фоновое изображение, изменяя гамму цветов документа. Чтобы предотвратить резкое изменение гаммы цветов, следует задавать значение цвета фона близким к цветам фонового изображения. 
Рис. 3.2. Коллекция текстур 
Рис. 3.3. Использование фонового изображения Примечание При выборе цвета фона и характера фонового изображения следует не забывать о необходимости контраста между цветом текста и фона. Неудачное соотношение цветов может затруднить чтение текста. Обратите внимание на рис. 3.3. Без фонового изображения прочитать текст было бы гораздо проще. Есть еще причина, из-за которой задание цвета фона документа следует рекомендовать. Пользователь может отключить загрузку изображений. В этом случае фоновое изображение также не будет загружено. Еще один вариант предпочтений пользователя исключит и выдачу фонового изображения и указание цвета фона. Конкретный вариант настроек зависит от используемого браузера. Так, например, в браузере Netscape есть режим принудительного задания гаммы цветов, перекрывающих настройки, указанные в документе (пункт Always use my colors, overriding document меню Colors вкладки Preferences). При установке данного флажка цветовые настройки отображаемого документа не будут использоваться, в том числе вообще не будет загружаться фоновое изображение.
При помощи таблиц стилей, речь о которых пойдет в последних главах книги, можно задавать фоновые изображения для любых элементов Web-документа. Например, можно тексты всех заголовков документа расположить на своем фоновом изображении. Встраивание изображений в HTML-документы Для встраивания изображений в HTML-документ следует использовать тег <IMG>, имеющий единственный обязательный параметр SRC, определяющий URL-адрес файла с изображением. Простейший пример встраивания изображения: <IMG SRC=picture.gif> Данный тег может иметь ряд параметров, обсуждение которых дается ниже. При включении графического изображения в документ можно указывать его расположение относительно текста или других элементов страницы. Способ выравнивания изображения задается значением параметра ALIGN тега <IMG>. Возможные значения этого параметра приведены в табл. 3.1. Таблица 3.1. Значения параметра ALIGN
Поясним действие параметров выравнивания, приведенных в таблице. Сразу же оговоримся, что все значения параметров выравнивания изображений можно условно разделить на две группы по их принципу действия. К одной группе относятся два значения параметра — LEFT и RIGHT. При использовании любого из этих параметров мы получаем так называемое "плавающее" изображение. В этом случае изображение прижимается к соответствующему краю окна просмотра браузера, а последующий текст (или другие элементы) отекают" изображение с противоположной стороны. Здесь текст, размещаемый рядом с изображением, может занимать несколько строчек. К другой группе значений параметров относятся все остальные. При их использовании изображение как бы встраивается в строчку текста, а параметры выравнивания задают расположение изображения относительно строки текста. Таким образом, в отличие от плавающих изображений, здесь изображение является обычным элементом строки. Это легко понять, если представить, что изображение является просто одной буквой строки текста, правда, достаточно большой (типа буквицы). Приведем пример HTML-кода, в котором используются изображения, как элемент строки. <HTML> <TITLE>Выравнивание изображений</TITLE> <BODY> Выравнивание<IMG SRC=eagle.gif ALIGN=top>по верхнему краю <P> Выравнивание по<IMG SRC=eagle.gif ALIGN=baseline>базовой линии </BODY> </HTML> Отображение браузерами приведенного выше кода показано на рис. 3.4. 
Рис. 3.4. Выравнивание изображений как элементов текстовой строки Приведем пример плавающего изображения (рис. 3.5). В примере изображение прижато к правому краю окна просмотра браузера, а последующий текст располагается с левой стороны от изображения. Количество строк, располагаемое рядом с изображением, может изменяться в зависимости от размеров шрифта текста, а также размеров окна просмотра. Текст, не поместившийся рядом с изображением, автоматически продолжается ниже. Этот пример построен на следующем исходном коде: <HTML> <TITLE>Выравнивание изображений</TITLE> <BODY> <IMG SRC=spb.gif ALIGN=right> <P ALIGN=JUSTIFY> Санкт-Петербург расположен в самой восточной оконечности Финского залива в устье реки Невы, на 42-х островах ее дельты. Географические координаты города: 59"57' северной широты и 30"19' восточной долготы от Гринвича. Из крупнейших городов мира (с населением свыше одного миллиона человек) Санкт-Петербург является ближайшим к Северному полюсу, он находится на одной широте с северной частью Камчатки и южной оконечностью Аляски. <P ALIGN=JUSTIFY> Высокоширотным положением города объясняется явление белых ночей. Они наступают 25-26 мая, когда солнце опускается за горизонт не более чем на 9', и вечерние сумерки практически сливаются с утренними. Наибольшая продолжительность дня приходится на 21-22 июня; заканчиваются белые ночи 16-17 июля, продолжаясь в общей сложности более 50 дней. </BODY> </HTML> 
Рис. 3.5. Выравнивание изображения по правому краю Отметим, что по умолчанию изображения выравниваются по базовой линии. Примечание Браузер Netscape реализует выравнивание со значением ABSBOTTOM точно так же, как и BOTTOM. Аналогично выравнивание со значением ABSMIDDLE реализуется так же, как и MIDDLE. Браузер Microsoft Internet Explorer выполняет выравнивание согласно приведенной выше таблице. Возникает вопрос, в чем разница между базовой линией и нижней границей строки? Или различие между самым высоким элементом строки и самым высоким текстовым элементом строки? Результат действия этих параметров может отличаться в зависимости от содержимого рассматриваемой строки. Базовая линия (BASELINE или BOTTOM) — это нижняя часть линии текста, которая проводится без учета нижней части (descender) некоторых символов, например, букв типа j, q, у. В отличие от выравнивания по базовой линии, при задании значения ABSBOTTOM выравнивание выполняется по нижней части самого низкого элемента в строке, т. е. по одному из символов строки, имеющему элементы, лежащие ниже базовой линии. Аналогично обстоит дело с различием между параметрами ТОР и ТЕХТТОР. Например, самым высоким элементом в строке может быть графическое изображение, в то время как самым высоким текстовым элементом строки является, как правило, заглавная буква. На рис. 3.6 показаны возможные отличия. Для данного примера был использован следующий HTML-код: <HTML> <TITLE>Различие параметров выравнивания</TITLE> <BODY> <IMG SRC=olen.gif> <IMG SRC=belka.gif ALIGN=top width=160> Выравнивание ALIGN=TOP <P> <IMG SRC=olen.gif> <IMG SRC=belka.gif ALIGN=texttop width=160> Выравнивание ALIGN=TEXTTOP </BODY> </HTML> 
Рис. 3.6. Выравнивание со значениями ТОР и ТЕХТТОР может отличаться Если в документе используются плавающие изображения, выровненные со значением RIGHT или LEFT, то имеется возможность принудительного прекращения обтекания в заданном месте текста. Это обеспечивается применением тега принудительного прерывания строки <BR> с параметром CLEAR. В качестве значений параметра CLEAR можно использовать следующие: LEFT, RIGHT или ALL. Так, для приведенного выше примера в нужном месте текста можно разместить строку: <BR CLEAR=right>. Текст, следующий далее, будет размещаться ниже изображения с новой строки. Задание размеров выводимого изображения Тэг встраивания изображений имеет два необязательных параметра, указывающих размеры изображения при отображении — WIDTH и HEIGHT. Значения параметров могут указываться как в пикселах, так и в процентах от размеров окна просмотра. Значения параметров ширины и высоты изображения могут не совпадать с истинными размерами изображения. В этом случае браузеры автоматически при загрузке изображений выполняют его перемасштабирование. Заметим, что неаккуратное задание параметров может привести к изменению пропорций рисунка и, как следствие, к его искажению. Любой из этих параметров может быть опущен. Если задан только один из параметров, то при загрузке рисунка второй параметр будет вычисляться автоматически из условий сохранения пропорций. Изменение размеров изображений при помощи задания параметров ширины и высоты может использоваться для просмотра иллюстраций в уменьшенном виде, однако такой подход не сокращает время загрузки изображения. Вопросы использования миниатюрных версий изображений будут рассмотрены ниже. Если не требуется решать задачу изменения размеров изображения, настоятельно рекомендуется указывать их реальные размеры в пикселах с помощью параметров WIDTH и HEIGHT. Определить действительные размеры используемых вами изображений можно при помощи любой из многих программ работы с растровой графикой. Например, LView Pro или Paint Shop Pro. Указание действительных размеров:
Приведем пример HTML-кода, отображение которого показано на рис. 3.7. Действительные размеры отображаемого рисунка — 150x174. Этот рисунок отображен трижды в разном масштабе. Для изменения масштаба использовано указание ширины изображения, а его высота автоматически масштабируется. В итоге рисунки при отображении будут иметь масштаб— 2:1, 1:1 и 1:2. <HTML> <TITLE>Задание размеров изображений</TITLE> <BODY> <IMG SRC=spb.gif WIDTH=300> <IMG SRC=spb.gif> <IMG SRC=spb.gif WIDTH=75> </BODY> </HTML> 
Рис. З.7. Все три изображения являются отображением одного и того же файла Отделение изображения от текста Для тега <IMG> можно задавать параметры HSPACE и VSPACE, значения которых определяют отступы от изображения, оставляемые пустыми, соответственно, по горизонтали и вертикали. Это гарантирует, что между текстом и изображением останется пространство, необходимое для нормального восприятия. В приведенном ниже HTML-коде, отображение которого показано на рис. 3.8, со всех четырех сторон изображения задан отступ, равный 20 пикселам. Сравните этот рисунок с рис. 3.5, где отступы от изображения не задавались. <HTML> <TITLE>Использование параметров HSPACE и VSPACE</TITLE> <BODY> <IMG SRC=spb.gif ALIGN=left HSPACE=20 VSPACE=20> (Текст абзаца) <P> (Текст абзаца) </BODY> </HTML> 
Рис. 3.8. Отступы от изображения улучшают восприятие документа Изображение, встраиваемое на страницу, можно поместить в рамку различной ширины. Для этого служит параметр BORDER тега <IMG>. В качестве значения параметра используется число, означающее толщину рамки в пикселах. По умолчанию рамка вокруг изображений не рисуется. Исключением из этого правила является случай, когда изображение является ссылкой. 
Рис. 3.9. Изображения могут помещаться в рамку различной толщины На рис. 3.9 показан пример задания рамок различной толщины для одного и того же изображения. HTML-код данного примера приведен ниже: <HTML> <TITLE>Помещение изображения в рамку</TITLE> <BODY> <IMG SRC=map.gif> <IMG SRC=map.gif BORDER=1> <IMG SRC=map.gif BORDER=5> <IMG SRC=map.gif BORDER=10> </BODY> </HTML> Примечание Если изображение является указателем ссылки, то по умолчанию браузеры заключают их в рамку синего цвета. Избежать появления рамки можно, указав значение BORDER=0. Одним из параметров тега <IMG> является параметр ALT, определяющий альтернативный текст. Его указание дает возможность пользователям неграфических браузеров или пользователям, работающим в режиме отключения загрузки изображений, получить некоторую текстовую информацию о встроенных изображениях. При отключенном изображении вместо них на экране появится альтернативный текст, определенный значением параметра ALT. Значение этого параметра имеет смысл и для случаев, когда загрузка изображений будет выполняться. Поскольку загрузка изображений выполняется на втором проходе после отображения текстовой информации, то изначально на экране на месте изображения появится альтернативный текст, который по мере загрузки будет сменяться изображением. Современные браузеры будут также отображать альтернативный текст в качестве подсказки (tooltip) при помещении курсора мыши в область изображения. На рис. 3.10 показано отображение документа в режиме отключения загрузки изображений. Заметим, что точно так же документ будет выглядеть и при отсутствии файлов с изображениями. Различие в двух изображениях связано с тем, что для первого из них явно указаны размеры, а для второго размеры не заданы. Для этого примера использовался следующий фрагмент HTML-кода: <IMG SRC=spb.gif ALT="Герб Санкт-Петербурга" WIDTH=150 HEIGHT=174> <IMG SRC=moscow.gif ALT="Герб Москвы"> 
Рис. 3.10. При отключенной загрузке изображений будет показан альтернативный текст Использование изображения в качестве ссылки Графические изображения могут использоваться не только в качестве иллюстраций, но и выполнять роль указателей гипертекстовых связей. Для обеспечения работы изображения в качестве ссылки на другие ресурсы достаточно включить изображение внутрь тэга-контейнера <А>. Пример: <А HREF=My_doc.html><IMG SRC=map.gif></A> Любая часть такого изображения будет работать как указатель ссылки на документ My_doc.html. Существуют возможности задания изображений, отдельные фрагменты которого будут указывать на различные ресурсы. Обсуждение этих вопросов дано в главе 6. Еще одним параметром, который можно задать в тэге <IMG>, является LOWSRC. Его значение определяет файл с альтернативным изображением, которое должно появляться при первом проходе выдачи на экран загружаемого документа. Смысл задания двух загружаемых на одно и то же место изображений заключается в следующем. В качестве изображения, указываемого значением параметра LOWSRC, рекомендуется выбирать картинку того же содержания, но более низкого разрешения, возможно с меньшей глубиной цвета или даже монохромное. Изображения такого рода занимают значительно меньше места и, как следствие, быстро загружаются. Это позволяет уже на первом проходе формирования документа увидеть общие черты изображений и не ожидать их полной загрузки. Пример записи: <IMG SRC=main.gif LOWSRC=low.gif> Использованию параметра LOWSRC присущ ряд особенностей. Если была загружена картинка, адрес которой был задан параметром LOWSRC, то основная картинка будет иметь точно такие же размеры, что и предыдущая. Если изображения исходно имели различные размеры, то основное изображение будет приводиться к размерам первого. При этом могут быть нарушены пропорции основного изображения. Во избежание этого разумно указывать настоящие размеры основного изображения (параметрами WIDTH и HEIGHT тега <IMG>). Тогда на первом проходе изображение низкого разрешения будет приводиться к размерам настоящего изображения, а на втором проходе — будет заменено им. Примечание Параметр LOWSRC был предложен компанией Netscape и в настоящее время распознается только этим браузером. Другие браузеры просто проигнорируют наличие незнакомого им параметра. Использование миниатюрных версий изображений На Web-страницах часто используются миниатюрные версии изображений (thumbnail) в качестве графических указателей ссылок на полноразмерные изображения (рис. 3.11). Изображения такого рода представляют собой уменьшенные копии оригинальных изображений, имеющие иногда также меньшую глубину цвета или представленные в оттенках серого цвета. Файлы с такими изображениями занимают значительно меньше места по сравнению с полноразмерными и поэтому гораздо быстрее грузятся. С помощью миниатюрных версий можно быстро просмотреть набор изображений, доступных для загрузки, и выбрать понравившееся. В Интернете можно найти целый ряд специализированных сайтов, содержащих разного рода изображения и обеспечивающих предпросмотр (preview) с помощью миниатюрных копий. Большое число сайтов не предназначено для детских глаз, но есть и ряд интересных серверов, предлагающих изображения различной тематики. Можно отметить сайт http://www.snap-shot.com, одна из страниц которого приведена на рис. 3.11. 
Рис. 3.11. Типовое применение миниатюрных версий изображений Еще одним интересным сервером с огромным набором изображений является сайт, расположенный по адресу http://euclid.nmu.edu/, одна из страниц которого была показана на рисунке в предыдущей главе (см. рис. 2.7). Примечание Термин thumbnail является общепринятым для обозначения миниатюрных версий изображений. В буквальном переводе с английского языка он означает "ноготь большого пальца" или нечто, имеющее небольшой размер. Для создания миниатюрных версий изображений можно воспользоваться одним из пакетов для работы с растровыми изображениями. Большинство пакетов такого рода обладают возможностями масштабирования, изменения яркости, контрастности и других параметров изображений. Из простейших пакетов, успешно справляющихся с поставленной задачей, можно назвать Paint Shop Pro и LView Pro. Среди более мощных пакетов можно отметить Adobe Photoshop. Существуют также специализированные программы, ориентированные на решение задачи создания миниатюрных копий изображений. Примечание Браузеры предоставляют возможность масштабирования изображений "на лету" при помощи указания требуемых размеров в тэге <IMG>. Это свойство может использоваться для выдачи миниатюрных копий на экран, но при этом не решается главная проблема — уменьшение объема передаваемых файлов. Довольно странно загружать полное изображение, чтобы увидеть его маленькую копию. Такой подход рационально использовать только при просмотре локальных файлов, когда время загрузки файлов с жесткого диска или локальной сети невелико. Формат файла GIF (Graphics Interchange Format) первоначально был предложен корпорацией CompuServe Incorporated для передачи графических данных по сети. Из-за популярности сети CompuServe формат GIF получил широкое распространение и в настоящее время поддерживается множеством программ работы с графикой, а также реализован на ряде платформ. Популярность формата увеличивается за счет свободного распространения его спецификации и свободного использования. Поскольку изначально формат разрабатывался для передачи данных в потоке, а не как формат для хранения данных в файле, то его последовательная организация как нельзя более подходит для размещения графических изображений на WWW-серверах. К положительным качествам формата можно отнести возможность хранения множественных изображений, внесение перекрывающего текста, отображение ряда изображений с задержкой, задание режимов восстановления предыдущего изображения, введение данных для специфических приложений. К недостаткам следует отнести ограниченное количество цветов (не более 256), реализованных в виде палитры 24-битовых цветов, отсутствие возможностей по хранению градаций серого и данных цветовой коррекции, хранению данных в моделях, отличных от RGB (например, CMYK или HSI). Хотя 256 цветов во многих случаях оказывается достаточно, сохранение фотореалистичных изображений в этом формате может привести к ухудшению цветовой гаммы картинки. В настоящее время используются две модификации GIF-файлов, которые носят название GIF87a и GIF89a. Последняя модификация является расширением GIF87a. Официальная документация по GIF89a датирована 31 июля 1990 года. Версия файла определяется дескриптором, который записывается в первые шесть байтов файла. В качестве дескриптора используется строка "GIF87a" или "GIF89a". Дескриптор определяет минимальные требования к программам, работающим с данным файлом. Так, например, для файла, имеющего дескриптор "GIF87a" это означает, что для работы с ним не требуется дополнительных возможностей, введенных в модификации GIF89a. Поэтому даже современные программы, способные сохранять изображения в формате GIF, предлагают оба варианта сохранения. Таким образом, модификация GIF87a не является устаревшей, а представляет собой подмножество GIF89a с полной совместимостью снизу вверх. Уже в 1987 году в модификации GIF87a были определены следующие возможности:
Это означает, что уже более десяти лет назад была потенциальная возможность создавать простейшие анимации, собирая последовательность кадров в одном GIF-файле, однако широкое распространение "анимированных" (animated GIF) файлов произошло только в последние годы, главным образом, за счет широкого использования на Web-страницах. В GIF-файле определены два различных варианта хранения данных. В одном из них все строки изображения записываются подряд от начальной до конечной (построчное хранение — Noninterlaced). В другом варианте строки сохраняются в определенном порядке (хранение с чередованием строк — Interlaced). Для последнего варианта порядок хранения строго определен, а именно, строки изображения с чередованием размещаются в четыре прохода:
Вариант хранения изображения задается при его создании или сохранении после редактирования и является параметром самого файла изображения. В зависимости от варианта хранения выполняется и вывод изображения на экран — либо картинка разворачивается сверху вниз, либо она постепенно проявляется и улучшается от прохода к проходу. Очевидно, что браузеры графических файлов могут использовать свои варианты появления изображения на экране, применяя различные эффекты вне зависимости от схемы хранения, однако для этого необходимо первоначальное получение всего файла с последующей его обработкой для получения нужного эффекта. Для WWW-браузеров характерно отображение файлов в процессе их получения, что определяет однозначную связь между схемой хранения и процессом выдачи на экран. Заметим, что на первом проходе заполняется 1/8 часть всех строк изображения. На каждом последующем проходе число заполненных строк растет вдвое и, таким образом, за четыре прохода изображение принимает оригинальный вид. При чересстрочной схеме хранения уже после первого прохода можно увидеть контуры появляющегося изображения и, при необходимости, остановить дальнейшую загрузку, чтобы не загружать сеть перекачкой бесполезной для вас информацией. При построчной схеме хранения, получив данные для 1/8 части всех строк, пользователь увидит верхнюю 1/8 часть изображения сразу в оригинальном качестве, по которой, скорее всего, не удастся определить содержание рисунка. Связь между размерами уже полученной части файла с изображением и числом строк, отображенных браузером по этим данным, вообще говоря, не прямая. Дело в том, что формат GIF предусматривает сжатие данных, поэтому размер файла и структура данных будут существенно зависеть от его содержимого. Покажем пример отображения файла формата GIF, загрузка которого была прервана после первого прохода (рис. 3.12). Размер изображения составляет 570x495 (256 оттенков серого), файл имеет размер 243 Кб. Для получения данных первого прохода потребовалось загрузить 32 Кб, что и составляет примерно 1/8 от размеров всего файла. Примечание Конечно, браузеры не обладают возможностью остановки загрузки GIF-файлов после получения данных для первого (или любого другого) прохода. Здесь нами был использован искусственный прием, единственной целью которого являлась иллюстрация данного примера. Можно было ожидать, что на изображении после первого прохода будет прорисована только каждая восьмая строка, а остальные будут иметь цвет фона. На самом деле браузеры поступают более умно. Очевидно, что для многих изображений близлежащие пикселы имеют близкий цвет, поэтому, выполняя интерполяцию по пикселам с известным значением цвета, можно примерно угадать цвет других пикселов. Браузеры применяют простейший вариант такого подбора, а именно, получив данные для пикселов какой-либо строки, окрашивают в такой же цвет все последующие строчки изображения, для которых данных пока еще нет. Для первого прохода, при получении данных для одной строки цвет ее пикселов распространяется еще на семь смежных строк. Использование такого подхода позволяет довольно быстро сформировать контуры изображения, что хорошо видно на рис. 3.12. При получении очередных данных пикселы отдельных строчек будут изменять свой цвет, давая эффект проявления изображения. Для сравнения качества приведем оригинальное изображение (рис. 3.13). 
Рис. 3.12. Отображение чересстрочного GIF-файла, полученное после первого прохода 
Рис. 3.13. Оригинальное изображение Примечание Для неискушенных читателей заметим, что термины Interlaced и Noninterlaced (NI) часто встречаются при описании режимов работы мониторов. Хотя на первый взгляд речь идет о схожих вещах, а именно о порядке заполнения строк экрана, однако применительно к мониторам эти термины отражают технический аспект работы развертки кадра монитора, что никак не влияет на работу программ в общем, и метод выдачи строк изображения формата GIF, в частности. Модификация GIF89a расширила возможности управления выводом изображений, разрешив определение следующих параметров:
Примечание Перечисленные пункты являются лишь потенциальными возможностями управления выводом изображений, определенные спецификацией GIF89a. В действительности, большинство программ работы с графическими изображениями поддерживают только часть из них. Рассмотрим кратко перечисленные возможности. Время задержки определяет промежуток между окончанием выдачи текущего кадра и началом выдачи следующего. Точнее, перед началом выдачи следующего кадра выполняется восстановление области экрана, занятого изображением, в соответствии с заданным режимом. Режим ожидания ввода пользователем позволяет интерактивно управлять сменой кадров при просмотре. Для отдельного кадра может быть задано и время задержки, и режим ожидания ввода. При этом смена кадра осуществится при наступлении любого из этих событий — окончании времени задержки или ввода пользователя. Браузерами данный режим не поддерживается. Один из цветов палитры изображения может быть определен как прозрачный (transparent). Это указывает браузеру, что при выводе изображения те пикселы, цвет которых объявлен прозрачным, не требуется изменять на экране. Чаще всего в качестве прозрачного цвета задается цвет фона изображения. Включение комментариев в GIF-файл используется для текстовых пояснений к изображениям, которые не являются частью самого изображения. Размер комментариев не ограничивается, однако следует иметь в виду, что излишне большое их количество может привести к неоправданному увеличению размеров файла. Включение строк текста в файл позволяет визуализировать его в простой форме в виде фрагмента графического изображения. Визуализация будет выполняться с использованием сетки ячеек символов, определяемой параметрами в этом блоке файла. Текстовые данные будут представлены как моноширинные символы по одному символу на ячейку наиболее подходящим шрифтом и размером. Данные будут представимы до тех пор, пока не будет достигнут конец данных или сетка ячеек не будет заполнена. Браузеры не поддерживают отображение строк текста. Режим восстановления области экрана задает способ, которым будет обрабатываться фрагмент графики после его отображения. Определены следующие способы:
Браузеры не поддерживают восстановление предыдущего состояния фрагмента экрана. Это наиболее сложный режим, так как требует предварительного запоминания содержимого части экрана. Задание внутри GIF-файла данных, специфичных для отдельного приложения, позволяет практически неограниченно расширять возможности работы с этими файлами. В одном GIF-файле может быть несколько разных блоков, каждый из которых определяет данные для конкретного приложения и не используется другими. Netscape использует такой блок для задания параметров цикла смены изображений. Внутри блока записывается единственный параметр, представляющий собой число от 0 до 32760, который означает количество полных циклов смены кадров, выполняемых при отображении. Число нуль означает бесконечный цикл. Отсутствие этого блока приводит к одноразовой выдаче всех кадров файла с соответствующими временными задержками. Версия Netscape 2.0 при любом числовом значении давала бесконечный цикл. Начиная с версии 3.0, браузер Netscape выполняет заданное число циклов. Внутри блоков, специфичных для приложения, имеется 8-байтовое поле идентификатора приложения и 3-байтовое поле кода приложения. Для блоков задания цикла в качестве идентификатора используется слово "NETSCAPE", а в качестве кода приложения "2.0". Это можно обнаружить, "заглянув" внутрь любого GIF-файла с циклом. Примечание Версия Netscape 2.0 на сегодняшний день представляется архаичной. Однако это вовсе не означает, что следует менять значение поля кода приложения. Это значение указывает на номер версии, начиная с которой обеспечивается распознавание такого блока браузером Netscape. Заметим, что данный блок распознается также и браузером Internet Explorer. Если Netscape обнаруживает в файле предназначенный для него блок данных, то он выполняет загрузку всего файла в кэш компьютера и начинает выполнение цикла анимации. Отметим некоторые особенности отображения:
Формат файлов графических изображений JPG (JPEG) был разработан Объединенной группой экспертов в области фотографии (Joint Photographic Experts Group) как средство для хранения изображений, имеющих большую глубину цвета (24 бита на пиксел, что обеспечивает 16,7 Мб возможных цветов). Не останавливаясь на деталях хранения информации в этом формате, отметим, что файлы JPG следует использовать, прежде всего, для хранения фотореалистичных изображений. Такого рода изображения можно получить при использовании сканера, оцифровке отдельных видеокадров или с цифровой фотокамеры. Ограничение в 256 цветов, присущее GIF, может снизить качество изображения, что исключается при использовании JPG. Поскольку JPG основан на сжатии данных с потерями, учитывающими особенности восприятия изображения человеком, то без значительного ухудшения картинки можно обеспечить значительную степень сжатия и, как следствие, небольшой размер файла. Аналогичный файл GIF в большинстве случаев будет иметь больший размер. В настоящее время файлы формата JPG поддерживаются большинством программ работы с растровой графикой. Отметим лишь важное обстоятельство, проявляющееся при сохранении данных в этом формате. Поскольку формат предусматривает потери при сжатии, то уровень потерь (а соответственно, и однозначно связанную с ним степень сжатия) может быть изменен пользователем в широких пределах. Во многих пакетах по умолчанию установлен некий приемлемый уровень, при котором изображение не очень сильно искажается при сохранении в данном формате. Значение этого уровня обычно задается параметрами настроек определенного пакета. Как правило, это число, изменяемое в пределах от 1 до 99, смысл которого для разных программ различен. Более того, для одних программ увеличение такого параметра повышает уровень потерь, а для других наоборот. Здесь можно рекомендовать пробовать сохранять изображения с различным уровнем потерь и визуально наблюдать различия. Одновременно можно следить за изменением размеров получаемых файлов. Еще одним важным параметром файлов JPG является схема их хранения. Различают две схемы — обычная и прогрессивная (progressive). Прогрессивная схема хранения такова, что при выводе таких изображений создается впечатление постепенного проявления рисунка на экране со все большим уточнением отдельных деталей. Это напоминает проявление изображения при работе с чересстрочными файлами формата GIF, однако здесь уточнение производится не построчно, а, как правило, по прямоугольным областям размера 8x8 или более. При сохранении изображения в обычной форме его отображение будет выполняться путем разворачивания изображения сверху вниз. Из сказанного можно сделать вывод, что хранение изображений, предназначенных для загрузки по сети, лучше осуществлять в прогрессивной форме. Покажем пример изображения, сохраненного в формате JPG с высокой степенью сжатия (рис. 3.14). Видна размытость изображения, что вызвано потерями при сжатии. Такое изображение могло также получиться при отображении файла JPG с приемлемым качеством на определенном шаге проявления изображения (по мере загрузки его из сети). Единственным условием для этого является хранение в прогрессивном формате. Сравните это изображение с оригиналом, приведенным выше (см. рис. 3.13), а также с частично загруженным GIF-файлом (см. рис. 3.12). 
Рис. 3.14. Формат JPG позволяет хранить изображения со значительной степенью сжатия Файлы формата JPG, в отличие от файлов формата GIF, не могут иметь несколько изображений, которые будут при просмотре сменять друг друга. Кроме того, для них нет возможности назначить прозрачный цвет. Какой формат предпочесть — GIF или JPG В каких случаях предпочтительнее использование формата GIF, а в каких — JPG? Формат GIF следует использовать для изображений, создаваемых программным путем или рисуемых вручную с помощью графических редакторов, например, графики, гистограммы, несложные рисунки и т. д. (так называемый line art). Ограничение формата — одновременное использование не более чем 256 цветов, для таких изображений в большинстве случаев не играет роли. Алгоритм сжатия, используемый в GIF-формате (LZW — алгоритм, названный по фамилиям Lempel-Ziv-Welch), выполняющий сжатие без потерь, обеспечивает точное восстановление изображения и для несложных рисунков достаточно хорошую степень сжатия. Некоторые проблемы со свободным использованием этого формата возникли в 1995 году. Алгоритм компрессии LZW имеет патент, который в настоящее время принадлежит компании Unisys Corporation. Хотя GIF-формат является свободно распространяемым и используемым, однако компания Unisys Corporation в 1995 году решила обязать всех коммерческих продавцов программных продуктов, использующих LZW-компрессию, лицензировать ее применение. Чтобы избежать уплаты гонорара вместо GIF-формата было решено создать альтернативный формат PNG (Portable Network Graphic, читается "пинг"), поддерживающий прозрачный цвет и чередование строк, однако не допускающий нескольких изображений в одном файле. Считалось, что формат PNG станет достойной заменой формата GIF, поскольку снимает многие ограничения последнего и является абсолютно открытым. Кроме того, в формате PNG предусмотрена еще более хитрая схема хранения данных об отдельных точках изображения по сравнению с чересстрочной схемой формата GIF. Если для формата GIF при чересстрочной схеме хранения можно было увидеть контуры всего изображения после загрузки примерно 1/8 части данных, то для формата PNG то же самое можно сделать, загрузив 1/64 часть данных. В этом формате предусматривается не только чересстрочное, но и череспиксельное (если можно так выразиться) хранение. Несмотря на значительные преимущества, на текущий момент формат PNG широкого распространения не получил, и по-прежнему во всем мире на WWW-серверах лежат GIF-файлы. Подводя итоги сказанному, сделаем вывод, что формат GIF лучше всего подходит для следующих типов изображений:
Формат JPG больше подходит для хранения следующих изображений:
Эти рекомендации не носят абсолютного характера и могут не приниматься во внимание, тем более, что не всегда можно провести строгое разграничение между многоцветными фотореалистичными изображениями и рисованной графикой в стиле "line art". Если уже имеется файл с изображением, хранящийся в одном из двух форматов — GIF или JPG, то никогда не следует преобразовывать один формат в другой. Преобразование GIF в JPG может ухудшить качество изображения за счет алгоритма сжатия с потерями. Например, в областях, заполненных одним цветом, обязательно появится муар. Размер файла при таком преобразовании несложных рисунков может даже увеличиться. Преобразование JPG в GIF ограничит палитру цветов до 256 и в подавляющем большинстве случаев приведет к увеличению размера файла. Некоторые проблемы использования цвета Рассмотрим некоторые проблемы, связанные с выбором цвета. Сраз]( оговоримся, что речь будет идти об изображениях с палитрой 256 цветовТ и их просмотре в режиме монитора также с 256 цветами. Большая глубина цвета — 15, 16 или 24 бит (т.е. 32 тыс., 64 тыс. или 16,7 млн одновременно отображаемых различных цветов) пока доступна не всем. Кроме того, выбор видеорежима влияет на характеристики частоты развертки монитора. Современные мониторы (вкупе с соответствующим видеоадаптером) позволяют обеспечить вертикальную частоту развертки (частоту смены кадров) до 90—120 Гц. Повышение разрешения (числа пикселов по высоте и ширине экрана) и глубины цвета снижает максимально достижимую частоту смены кадров до значений 72, 60 и даже 56 Гц, что существенно влияет на утомляемость пользователя. Поэтому опытные операторы, проводящие по несколько часов ежедневно у компьютера, без необходимости не пользуются режимами с повышенными характеристиками. Рассмотрим следующий пример. Создадим в любом графическом редакторе самый простой рисунок, а именно прямоугольник произвольного размера, все пикселы которого закрашены одним цветом. Сохраним изображение в формате GIF с 256 цветами. Просматривая такой файл с помощью большинства графических программ, можно действительно увидеть однотонный прямоугольник. Иначе может получиться, если такой файл использовать в HTML-документе, который будет просматриваться в Netscape Navigator или Microsoft Internet Explorer. Эти браузеры работают с использованием своей собственной палитры, которая может не совпадать с палитрой изображения. Преобразование изображения к палитре браузера выполняется при его загрузке, при этом используется метод Dither, подбирающий недостающий цвет сочетанием нескольких пикселов доступного цвета. В итоге вместо однотонного прямоугольника при внимательном рассмотрении можно увидеть повторяющиеся группы разноцветных пикселов, которые в целом неплохо имитируют требуемый цвет. Отметим, что при просмотре такого файла отдельно в Netscape Navigator (браузеры позволяют загружать не только HTML-документы со ссылками на графические файлы, но и непосредственно просматривать файлы типа GIF) приведение палитры не выполняется, а используется палитра изображения. Эффект приведения палитры может несколько исказить восприятие рисунка, поэтому для изображений, ориентированных на использование в WWW, рекомендуется заранее выполнить приведение к нужной палитре. Для описываемого примера вместо произвольного цвета следует выбрать какой-либо цвет, имеющийся в палитре браузера, и тогда при просмотре всегда будет виден строго однотонный прямоугольник. Изменение палитры используемых цветов доступно во многих программах, предназначенных для редактирования растровых изображений. Приведение палитры к требованиям WWW-браузеров выполняется рядом специальных пакетов, в частности GIF Construction Set и VideoCraft GIF Animator, описываемых ниже. В первом из них предлагается выполнить приведение к палитре Netscape Navigator, используя замену цветов на ближайшие (Remap) или метод Dither. Эти возможности заложены непосредственно в пакет. Термин dither (или dithering) в среде профессионалов обычно используется без перевода, поскольку подходящего русского термина, который бы кратко и точно отражал суть дела, пока не найдено. В англо-русском словаре терминов по компьютерной графике Д. В. Волкова, А. Н. Ефлеева, Н. Г. Шагу-риной (Мир ПК, 1994, № 4, с. 43—52) предлагается переводить словом "клиширование". Часто используются термины "диффузия цвета" или "смешение цветов". Процитируем также пояснение термина dithering, взятое из того же источника: "Способ получения дополнительных градаций цветов в изображении за счет использования цветовых шаблонов, образованных различными сочетаниями цветов пикселов базовой палитры. Метод обеспечивает расширение цветовой палитры при ухудшении разрешающей способности". Палитра цветов, используемая в Netscape Navigator, крайне проста — все трехмерное RGB-пространство возможных значений цвета равномерно разделено на равные части по каждой координате, и полученные значения подряд записаны в палитру. Для каждой составляющей R, G и В выбраны 6 значений — 0, 51, 102, 153, 204, 255, все возможные сочетания которых дают 6x6x6 = 216 различных цветов. Дополнительно к 216 цветам используются стандартные цвета Windows. Пакет GIF Construction Set при необходимости выполнит приведение всех возможных цветов к описанным 216. Создание анимации на основе GIF-файлов Как уже было сказано выше, структура файлов формата GIF позволяет хранить несколько изображений (кадров) в одном файле и указывать параметры для их смены при отображении. Этим обстоятельством стали широко пользоваться разработчики Web-страниц для создания наборов сменяющихся (анимированных) изображений. Рассмотрим порядок построения анимированных GIF-файлов. Процесс создания анимации на базе GIF-файлов состоит из трех этапов:
Подготовка отдельных кадров выполняется с помощью любого графического редактора, сохраняющего данные в растровом формате в отдельных GIF-файлах. Простейшим средством является утилита Paint (в Windows 3.1 была утилита Paintbrush), входящий в состав Windows. Подробное обсуждение методов работы с изображениями выходит за рамки данной книги, поскольку здесь в минимальной степени присутствуют особенности сетевых приложений. При создании отдельных кадров анимации следует помнить, что на сегодняшний день далеко не все браузеры могут выполнять смену кадров GIF-файла. Ряд браузеров, не имеющих таких возможностей, покажут лишь первый кадр. Кроме того, при просмотре в браузерах цикл анимации может быть остановлен пользователем в любой момент, при этом на экране может остаться любой из кадров. В некоторых случаях цикл анимации будет выполнен только один раз и закончится показом последнего кадра. Поэтому при разработке последовательности кадров изображения следует уделить внимание всем кадрам, которые не должны оказаться недоработанными. Большинство пакетов для работы с графическими изображениями, таких как CorelDRAW! версий со 2 по 5, PhotoPaint, Adobe Photoshop, Paint Shop Pro и другие, поддерживают формат GIF, однако не могут работать с несколькими изображениями, расположенными в одном файле. Чтение файла формата GIF с несколькими изображениями в любом из перечисленных пакетов позволит редактировать лишь первое изображение, причем дальнейшее сохранение файла приведет к потере всех остальных изображений и управляющих блоков. Пользователь может сразу не заметить этой потери, так как никаких предупреждающих сообщений не появляется. Следует принять за правило иметь копии отдельных изображений в отдельных файлах и редактировать только их при помощи любого пакета. Для сбора в один файл формата GIF с добавлением управляющей информации можно воспользоваться специальными пакетами. Для Windows-платформы одним из наиболее популярных является пакет GIF Construction Set фирмы Alchemy Mindworks Inc. (Beeton, Ontario, Canada), порядок работы с которым будет описан ниже. Информацию о пакете можно получить по адресу: http://www.mindworkshop.com/alchemy/gifcon.html Среди других пакетов можно назвать VideoCraft GIF Animator, доступный по адресу: http://www.andatech.com/vidcraft/demo.html Пакет сочетает в себе средства для работы с множественными изображениями в GIF-файле и типичные средства для обработки отдельных изображений (настройка яркости, контрастности, повороты изображения, изменение размеров и т. п.). Имеются возможности работы с файлами AVI, выполнения морфинга (Morph), стилизации изображений. Обзор вопросов построения GIF-файлов можно найти по адресу: http://members.aol.com/royalef/gifanim/htm Программа GIF Construction Set Пакет GIF Construction Set для Windows является мощным средством для работы с GIF-файлами, содержащими несколько блоков. Пакет позволяет:
Этот программный продукт существует уже очень давно и, как многие программы, многократно видоизменялся. На настоящий момент последней является версия 2.0а, датированная августом 1999 года. Эта версия сохранила все функциональные возможности предыдущих версий, однако имеет несколько отличный интерфейс. Для большинства задач вполне достаточно наличия и более ранних версий. Так, примеры будут даваться для версий от 1.0К до 1.0Р, применение которых вполне допустимо и сегодня, несмотря на то, что появление этих версий относится к 1996 году. Отличительной особенностью программы является простота работы с ней. Освоение типовых действий для создания анимации требует весьма небольших затрат времени. Рассмотрим основные возможности программы и методы работы с ней. После запуска программы GIF Construction Set и считывания GIF-файла на экран выдается список блоков файла (рис. 3.15). 
Рис. 3.15. Список блоков GIF-файла Файл всегда содержит один блок заголовка (HEADER) и один или несколько блоков с отдельными изображениями IMAGE. Остальные блоки могут отсутствовать. В правом верхнем углу окна программы отводится место для быстрого просмотра изображений в уменьшенном виде. Предоставляется возможность удалить, добавить или отредактировать параметры любого из блоков. Блок HEADER (рис. 3.16) содержит информацию о размерах логического экрана в пикселах. Эти параметры не влияют на размеры самих изображений, но для Web-браузеров определяют размеры прямоугольной области, внутри которой будут располагаться все изображения данного GIF-файла. Каждое изображение имеет определенный размер по горизонтали и вертикали и заданное смещение в пикселах от левого верхнего угла логического экрана. В простейшем случае смещение равно нулю, и тогда размер логического экрана должен быть равен максимальному из размеров всех изображений отдельно по горизонтали и по вертикали. При смещении, большем нуля, к размеру изображения добавляется величина смещения. Пользователь может самостоятельно задать размеры логического экрана, однако следует иметь в виду, что отображение картинок, выходящих за пределы логического экрана в Netscape Navigator, вызывает неустранимую ошибку GPF (General Protection Fault). Поэтому программа GIF Construction Set при сохранении файла автоматически вычисляет необходимые размеры логического экрана с учетом размеров отдельных изображений и их смещений независимо от значений, заданных пользователем. 
Рис. 3.16. Задание общих параметров GIF-файла Блок LOOP (рис. 3.17) определяет параметры цикла анимации для Netscape. Блок содержит единственный параметр — число повторений цикла, которое можно изменять в пределах от нуля до 32760. Нулевое значение определяет бесконечный цикл. Выдаваемое сообщение о том, что Netscape игнорирует значение счетчика цикла, уже неактуально для Netscape 3.0 и выше. Блок LOOP может отсутствовать, при этом все изображения будут выданы один раз, и на экране останется последнее. При наличии блока LOOP он всегда располагается вторым в списке блоков после HEADER. 
Рис. 3.17. Задание параметров цикла анимации Перед каждым блоком с описанием изображения IMAGE может располагаться блок CONTROL с управляющими параметрами (рис. 3.18) для последующего блока IMAGE. Задается флаг наличия прозрачного цвета (Transparent colour) и номер этого цвета, который вводится вручную или указывается непосредственно на рисунке при помощи специального маркера, пиктограмма которого представлена в правом верхнем углу. При указании маркером прозрачным становится цвет того пиксела, который был отмечен на изображении. Так как обычно в качестве прозрачного выбирается цвет фона рисунка, занимающего значительную площадь изображения, то проблема попадания в пиксел нужного цвета не возникает. 
Рис. 3.18. Задание параметров блока управления Следующий параметр блока (Wait for user input) задает ожидание нажатия клавиши пользователем перед сменой изображения. Браузеры не поддерживают это свойство, и поэтому значение данного параметра не играет роли. Параметр Delay задает время задержки данного изображения в сотых долях секунды. Заметим, что реальное время задержки при отображении в браузере может быть больше указанного, например, при нескольких файлах GIF со сменяющимися изображениями на экране или при недостаточной скорости процессора и/или возможностей видеокарты. При разработке HTML-документов следует учитывать, что выполнения операций по смене изображений могут потребоваться значительные затраты мощностей процессора, что замедлит выполнение других операций и создаст неудобства в работе. Рекомендуется вставлять задержки в несколько секунд в конец цикла анимации для освобождения процессора для выполнения других операций. Приведем результаты эксперимента по анализу загрузки процессора при выполнении операций такого рода. Был подготовлен GIF-файл, содержащий 5 изображений размером 150x174. Для смены изображений установлен бесконечный цикл. Исследовалась загрузка процессора при отображении этого файла браузером в отсутствии других задач. Результаты исследования определяются большим числом факторов, поэтому приведем все необходимые сведения об условиях проведения эксперимента. Отображение выполнялось браузером Netscape 4.7 в режиме 800x600x256. Процессор Pentium-200 MMX, RAM 64 Мб, видеокарта S3 Virge с 2 Мб памяти. Операционная система Windows 95. Проанализировано два варианта отображения GIF-файла, которые отличаются величинами временных задержек между сменой изображений. Загрузка процессора изучалась с помощью программы "Системный монитор", входящей в состав операционной системы. Результаты анализа показаны на рис. 3.19. Представлена загрузка процессора в процентах при временных отсчетах, равных 5 с. Левая часть графика (примерно одна четверть всего временного интервала) характеризует загрузку процессора при отображении файла с изображениями, сменяющимися без задержек. Видно, что загрузка составляет величину порядка 40%. Скорее всего, при наличии более быстродействующей видеокарты загрузка процессора была бы еще больше. Далее график показывает загрузку процессора при отображении файла с изображениями, при смене которых задана задержка, равная 0,1 с, а в конце цикла смены изображений установлена задержка 2 с. Загрузка процессора составила примерно 10%. В самом конце графика загрузка упала практически до нуля (осталось 2%), что произошло при нажатии кнопки Stop в браузере и прекращении цикла анимации. 
Рис. 3.19. Загрузка процессора при отображении циклически сменяющихся изображений с различными задержками Из этого примера можно сделать вывод, что неразумное задание параметров анимации может привести к значительной трате ресурсов процессора, часто бесполезной. Несколько анимированных GIF-файлов на странице с минимальными задержками, и неудобства при просмотре обеспечены. К сожалению, в браузерах отсутствует возможность настройки режима демонстрации анимированных изображений. Можно либо не загружать изображения вообще, либо вручную останавливать загрузку кнопкой Stop, что приведет, в том числе, и к остановке циклов анимации. Примечание Для браузера Netscape известны хакерские приемы, останавливающие анимацию после прокрутки одного цикла. Для некоторых конкретных версий браузера известно, в каких адресах ЕХЕ-файла браузера нужно внести изменения, в результате которых браузер будет выполнять цикл анимации только один раз независимо от настроек в файле с изображениями. Конечно, подобные приемы нельзя пропагандировать, но раз это делается, значит, актуальность налицо. Параметр Remove by (рис. 3.20) определяет способ восстановления данных на месте изображения после завершения времени задержки изображения. Напомним, что режим Previous image (восстановление предыдущего состояния фрагмента экрана) не реализуется браузерами. Типичным вариантом восстановления является режим Background, обеспечивающий заполнение цветом фона или фоновым изображением, которое в сочетании с прозрачным цветом и изменяющимся смещением внутри логического экрана для отдельных кадров может создать хорошую иллюзию перемещающегося изображения. Если все изображения GIF-файла одинакового размера, имеют одинаковое смещение и не имеют прозрачного цвета, то в качестве режима восстановления достаточно указать Nothing (ничего не делать) или Leave as is (оставить как есть). 
Рис. 3.20. Задание способа восстановления изображения Примечание Хотя для параметра Remove by можно задавать четыре различных значения, по существу предоставляется всего две возможности: режим Background или любой другой режим из трех оставшихся, которые реализуются браузерами одинаково. Блок IMAGE непосредственно содержит информацию об отдельном изображении (рис. 3.21). Размеры изображения (Image width и Image depth) приводятся в качестве справочных, их изменение здесь невозможно, а параметры Image left и Image top определяют смещение в пикселах данного изображения относительно левого верхнего угла логического экрана, которое задается пользователем. В данном блоке также задается тип хранения изображения — с чередованием строк (Interlaced) или без, наличие локальной палитры (Local Palette) и заголовок блока (Block title), который не отражается при выводе и является краткой текстовой характеристикой изображения. Использование локальной палитры для отдельного изображения не рекомендуется. Каждая локальная палитра увеличивает размер файла на 779 байт и может ухудшить отображение цвета при смене кадров. При сохранении файла пакет GIF Construction Set предупреждает о наличии локальной палитры в одном из блоков и предлагает выполнить ее приведение к глобальной. 
Рис. 3.21. Окно редактирования параметров изображения 
Рис. 3.22. Окно выбора способа приведения палитры При добавлении (Insert) изображения в список блоков файла выполняется сравнение глобальной палитры с палитрой добавляемого изображения. Предварительно для 24-битовых изображений выполняется преобразование к 256 цветам. Если какие-либо цвета отсутствуют в глобальной палитре, то предлагается сделать выбор варианта преобразования (рис. 3.22). Не углубляясь в детали, отметим, что для фотореалистичных изображений наилучшим выбором является метод Dither, при котором делается попытка имитировать цвет, отсутствующий в палитре совокупностью нескольких разноцветных пикселов из палитры. Для иных изображений обычно достаточно метода Remap, при котором отсутствующие цвета просто заменяются на ближайшие из палитры. Использование мастера анимации Создание анимации из отдельных кадров может быть осуществлено вручную использованием пунктов меню пакета, описанных выше. Однако можно быстро создать нужную анимацию с использованием мастера анимации Animation Wizard, входящего в состав программы GIF Construction Set. Вся процедура создания заключается в ответе на ряд вопросов, последовательно задаваемых пользователю. Отдельные кадры этой процедуры показаны на рис. 3.23 и рис. 3.24. 
Рис. 3.23. Подготовка анимации с помощью мастера Animation Wizard 
Рис. 3.24. Один из шагов подготовки анимации Ускорить процесс задания параметров кадров анимации можно с использованием пункта меню Manage (рис. 3.25), который позволяет определить ряд общих значений параметров для нескольких кадров за одну операцию. Еще одна возможность, предоставляемая пакетом, заключается в преобразовании анимации в формате AVI в GIF-файл с набором кадров. Преобразование может занять значительное время и создать файл очень большого размера. Для AVI-файлов типичны размеры в единицы и десятки мегабайт, однако GIF-файлы такого размера, как правило, не используются. 
Рис. 3.25. Установка общих свойств блоков В список блоков, составляющих файл GIF, можно добавлять и ряд других (рис. 3.26), но создание и редактирование произвольных блоков, например, специфичных для какого-либо приложения, не предусмотрено. 
Рис. 3.26. Окно вставки блоков Заметим, что сохранение файла программой GIF Construction Set всегда производится с дескриптором GIF89a. Дополнительные возможности пакета GIF Construction Set Современные версии пакета GIF Construction Set обладают некоторыми дополнительными возможностями, которые позволяют создавать GIF-файлы специального содержания. Эти возможности можно найти в пункте меню Edit пакета. Заметим, что реализация описываемых ниже возможностей связана не с какими-либо конкретными особенностями формата файла GIF или браузеров, которые не были использованы до этого, а с некоторыми сервисными инструментами быстрого создания файлов с множественными изображениями. Перечислим эти возможности в порядке их появления в меню. Отметим, что в таком же порядке они появлялись с развитием пакета от версии 1.0К, в которой не было ни одной из них, и до версии 1.0Р, начиная с которой в программу были включены все описываемые ниже пункты. Banner. Создание бегущей строки. В действительности пакет генерирует ряд изображений, содержащий текст или его фрагменты, которые по мере смены отдельных изображений создают иллюзию бегущей строки. Transition. Имитация одного из выбираемых методов появления изображения на экране. Различные методы появления изображений широко используются в ряде пакетов работы с графикой. Одним из примеров является пакет презентационной графики PowerPoint, входящий в состав Microsoft Office. В отличие от таких пакетов Web-браузеры не имеют средств для реализации методов появления изображения (не считая вариантов формата GIF — построчное хранение или чередование строк и вариантов формата JPG — обычный или прогрессивный). Использование данного пункта меню позволяет быстро создать ряд изображений, содержащих отдельные фазы смены изображения с заданными временными задержками и числом кадров. Wide Palette GIF. Использование палитры, содержащей более чем 256 одновременно используемых цветов. Название этого пункта может привести в недоумение, поэтому сразу же еще раз подчеркнем, что структура файла GIF не позволяет хранить изображение, имеющее более 256 цветов. Однако внутри одного GIF-файла может размещаться несколько изображений, каждое из которых имеет свою локальную палитру. Это свойство применяется для искусственного увеличения числа используемых цветов. Все изображение разбивается на ряд отдельных кадров одинакового размера в зависимости от количества используемых цветов. Например, для 510 цветов достаточно двух кадров. Каждый из кадров имеет свою палитру и включает пикселы, цвет которых соответствует локальной палитре данного кадра. Остальные пикселы задаются одним определенным цветом, который объявляется прозрачным. Таким образом, каждый кадр может содержать до 255 уникальных цветов, один цвет отводится под прозрачный. При последовательном выводе нескольких кадров на одно и то же место изменяются лишь те пикселы, цвет которых отличен от прозрачного. Вывод всей последовательности кадров обеспечит требуемое разнообразие цветов. Такие изображения не могут иметь одного прозрачного цвета, поскольку прозрачность используется для специальных целей, как описано выше. Изображения с расширенной палитрой в принципе могут быть анимированными, однако это приведет к медленной смене кадров, так как каждый из них, по существу, состоит из нескольких. Исходное изображение должно содержать 24-битовый цвет, например, это может быть файл формата BMP, PCX или TIFF. Отметим, что данный режим поддерживается только 32-битной версией пакета. Эффект большого количества цветов хорошо смотрится только в режиме монитора HiColor или TrueColor, при просмотре в режиме 256 цветов изображение может оказаться просто ужасным. Все эти особенности заставляют подходить к использованию режима расширенной палитры с большой осторожностью. LED Sign. Создание бегущей строки, напоминающей по характеру световую рекламу или табло электронных приборов. В тексте строки при помощи специальных знаков задается цвет символов. Длина строки с учетом спецзнаков не может превосходить 260 символов. В целом все описанные возможности приводят к созданию файлов с множественными изображениями, что может значительно увеличить их размер. Получаемый при этом эффект следует сопоставлять с дополнительными затратами на его осуществление, состоящими в увеличении времени передачи файлов по сети и общего трафика. Отдельные Web-страницы с излишне большим количеством эффектов часто свидетельствуют только об отсутствии чувства меры у создателей и лишь затрудняют восприятие. ← к предыдущей главе
|
|
|||||||||||||||||||||||
 Обратная@связь | ||||||||||||||||||||||||
