.

Анимированные GIF-изображения остаются самым популярным способом "оживления" Web-страницы. Практически они стали стандартом де-факто для рекламных заставок в Интернете. Причина этого вполне понятна: большинство посетителей Web-страниц реально могут увидеть GIF-анимацию полностью, независимо от типа имеющегося у них компьютера или применяемого браузера. В этом и состоит отличие GIF от Flash, Java и Dynamic HTML – весьма эффективных и все более популярных форматов, для работы с которыми требуются, однако, специальные дополнительные модули, загружаемые апплеты или новейшие браузеры.

Формирование анимированных GIF-изображений основано на одном из старейших принципов анимации – быстрой смене картин, слегка отличающихся друг от друга. Как правило, все анимированные GIF-файлы содержат ряд отдельных кадров, при последовательном просмотре которых создается иллюзия движения. Главная проблема состоит в том, что необходимость сохранения последовательности изображений может привести к созданию файлов очень большого размера. При работе в WWW большие размеры файлов крайне нежелательны, поскольку из-за них увеличивается продолжительность загрузки. Рекламодатели хотят, чтобы их сообщение увидели полностью, а это означает необходимость быстрого отображения анимированной рекламной заставки. Скорость загрузки зависит от длины файла и она настолько важна, что большинство крупных Web-узлов жестко ограничивают размер файлов. Эмпирически установлено, что размер рекламного баннера ни в коем случае не должен превышать 12 Кбайт.

Есть несколько стандартных приемов, позволяющих уменьшить размер GIF-изображения. К ним относятся сокращение числа цветов в изображении, числа и размеров кадров, а также отказ от полутонов.

В основе всех этих приемов лежит принцип: "чем меньше, тем лучше". Чем меньше цветов, кадров и изменений при переходе от одного кадра к другому, тем короче полученные файлы. Однако такое уменьшение влечет за собой ухудшение качества. В конце концов, внешне непривлекательный рекламный баннер не выполнит свою задачу. Здесь мы покажем, как создавать динамические анимированные GIF-баннеры, которые быстро загружаются и эффектно воспроизводятся.

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

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

Большинство современных полнофункциональных программ для построения графических Web-страниц, например, Fireworks фирмы Macromedia (http://www.macromedia.com/) и ImageReady компании Adobe (http://www.adobe.com/), предоставляют доступ к таким функциям. Образцы анимации для этой статьи мы сгенерировали с помощью пакета Fireworks.

Замедление (или ускорение) анимации

Формат GIF 89A позволяет определять задержку между отдельными кадрами (указывается с шагом в 0,01 с), что дает возможность управлять темпом анимации. Без учета эстетических соображений во многих случаях оказывается, что замедление анимации (или ее ускорение) позволяет снизить общее число кадров в файле.

Например, анимация, содержащая текст, должна оставаться на экране достаточно долго, чтобы зритель без труда смог прочесть его. Можно либо сформировать четыре идентичных кадра, каждый из которых отображается в течение заданного по умолчанию времени (0,2 с), либо сделать один кадр и задать для него точное время задержки 0,8 с. Исключение трех кадров из четырехкадровой анимации приводит к уменьшению размера GIF-файла на 75% без применения других способов оптимизации.

Аналогичный прием может быть применен и в обратном направлении. Зачастую можно создать более правдоподобный эффект движения, снизив для нескольких кадров время задержки до 0,1 с или менее. Чтобы увидеть эту теорию в действии, посмотрите на анимацию со словами "Иллюзия движения", в которой первый кадр отображается в течение 0,6 с, а остальные три – в течение 0,1 с каждый.

С помощью визуальных трюков, которые традиционно применяют мультипликаторы, движение имитируется минимальным числом кадров. В данном примере на нескольких последовательных кадрах для создания иллюзии движения применяются размывка движением и наклон.

Отсечение избыточных частей изображения

На первом кадре GIF-анимации обычно определяются полные размеры изображения, а последующие кадры могут быть меньше. Более того, их можно размещать в любом месте в пределах границ первого кадра, задавая относительные координаты Х и Y. Таким образом удается отсечь избыточные данные об изображении и уменьшить полный размер файла. Сам процесс может показаться сложным, однако для его осуществления достаточно просто применить функцию экспорта. Например, в программе Macromedia Fireworks есть флажок Auto Crop (Автокадрирование) в диалоговом окне Export (Экспорт). В редких случаях можно более точно вручную обрезать кадр (и сэкономить дополнительно 1-2 Кбайт, а то и больше) с помощью специализированной утилиты, такой как Alchemy Mindworks GIF Construction Set Professional.

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

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

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

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

Слои в анимации

Можно получать GIF-файлы поразительно малых размеров, если воспользоваться двумя другими возможностями данного формата: в GIF-файлах допускается наличие прозрачных участков и задание способа перерисовки или очистки каждого кадра анимации. Если создавать анимацию, просто накладывая слои с новым изображением поверх старого, причем допускать просвечивание фрагментов предыдущего кадра, можно формировать кадры с протяженными прозрачными участками. Прозрачные области хорошо упаковываются, поскольку в алгоритме сжатия они рассматриваются как участки сплошного однородного цвета. Кроме того, можно выбрать наиболее эффективный режим – полное отсутствие очистки, или None. Если применяется программа, автоматически оптимизирующая GIF-анимации, убедитесь, что включена функция Auto Differencing (Автоматическое определение отличий), и укажите, какие участки кадра должны быть прозрачными.

Интересные анимации можно создавать, накладывая небольшие изображения на статичный фон. В данном примере три желтые линии появляются на кадрах 13, 15 и 17 для проведения черты вдоль экрана.

В нашем простом примере анимации с наложением текста, который состоит из 17 кадров, происходит много действий, тем не менее размер файла составляет менее 6 Кбайт. На приводимой здесь иллюстрации выбрано несколько кадров анимации, чтобы продемонстрировать, как мало данных добавляется с каждым новым кадром.

Уменьшение числа цветов в палитре

Формат GIF 89A предусматривает хранение информации обо всех цветах анимации либо в единой глобальной палитре, либо в последовательности локальных палитр. Важнейшая задача разработчика – исключение локальных палитр. Применение единой глобальной палитры для всей анимации означает, что цвета согласованы между кадрами, а это приводит к большей степени избыточности данных об изображении, которые можно либо отсечь, либо преобразовать в прозрачный слой. Напротив, в GIF-анимации, составленной из ряда изображений с различными палитрами, цветовая гамма может изменяться от кадра к кадру, что увеличивает размер кадрированных прямоугольников и прерывает прозрачные области.

К тому же, чем меньше цветов в палитре, тем короче файлы. Для хранения небольших палитр требуется меньше места. Так для палитры из 16 цветов требуется только 4 бита, тогда как для палитры из 128 цветов уже 7 битов. Не удивительно, что изображения, составленные из однородно окрашенных участков (особенно текст, логотипы и компьютерная графика), лучше работают с небольшими палитрами. При создании анимированных GIF-изображений не стоит применять фотографии или файлы с градиентной заливкой, поскольку они содержат множество различных цветов, что увеличивает размер палитры.

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

Зачастую можно создавать намного меньшие анимированные GIF-файлы с помощью приемов, заменяющих эффекты с использованием полосы пропускания. Например, вместо затенения, при котором цвет объекта изменяется от кадра к кадру, воспользуйтесь старомодным приемом смены кадров наплывом, при котором изображение закрашивается произвольным однородным напылением. Аналогично, вместо пульсирующей мягко очерченной вспышки можно анимировать только неоновые контуры объекта. Сравните иллюстрации с примерами анимации вспышки. Эффект с прозрачным ореолом выглядит более утонченным, однако размер файла получается в два раза больше, чем в случае более простого примера с выделением контуров.

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

Создание иллюзии движения

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

Размывка движением (motion blur), которую можно применить в качестве фильтра в большинстве программ редактирования графики, ловко вводит в заблуждение глаз, имитируя несуществующее движение. Еще один замечательный визуальный трюк для показа движения – изменение наклона изображения вперед или назад. Объект с наклоном в направлении движения, выглядит, как ускоряющийся, а наклоненный назад похож на тормозящий. К другим примерам относятся штрихи, способные во многих случаях заменить размывку движением, или прозрачные следы, подразумевающие так быстро движущийся объект, что его можно видеть в двух местах одновременно.

Применение таких приемов поможет резко снизить число кадров. Например, в нашей анимации применяются эффекты, благодаря которым для создания иллюзии движения потребовалось лишь четыре кадра. Мы добились этого с помощью наклона изображения и наложения фильтра "размывка движением". Размер получившегося файла менее 4 Кбайт.