Динамический GIF можно определить, как стандарт графического файла, позволяющий размещать в одном файле несколько изображений, для их последовательного вывода на экран с целью создания эффекта мультипликации. Первым таким стандартом явился GIF87a, который предусматривал следующие возможности GIF-файла:
Чередование (interlacing). Вначале загружается только "остов" изображения, потом, по мере загрузки, оно детализируется. Это позволяет на медленных линиях не грузить весь графический файл целиком для того, чтобы получить о нем представление.
Сжатие (compression) по алгоритму LZW. Эта черта GIF-файлов держит их в лидерах по наименьшему объему файла.

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

В дальнейшем, этот стандарт был раширен спецификацией GIF89a, которая добавила следующие возможности:

- Включение в графический файл комментариев (не отображаются на экране, но могут быть прочитаны программой, поддерживающей GIF89a).
- Управление задержкой перед сменой кадров (задается в 1/100 секунды, или ожидание ввода пользователя).
- Управление удалением предыдущего изображения. Предыдущее изображение может быть оставлено, заменено на цвет фона или на то, что было перед ним.
- Определение прозрачного цвета.
- Вывод текста.
- Создание управляющих блоков прикладными программами (application-specific extensions). Внутри GIF-файла вы можете создать блок, который буде игнорироваться всеми программами, кроме той, для которой он предназначен.

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

Структура файла GIF89a

Файл GIF89a состоит из болков, расположенных в определенной последовательности. Выделяют блоки трех типов:
- Управляющие блоки: заголовок, описание логического экрана, управление графическими расширениями, признак конца - определяют, как будут обрабатываться изображения;
- Блоки изображения: изображение, текст, описание палитры - содержат данные для самого изображения;
- Специальные блоки: комментарии, прикладные расширения - никак не влияют на изображение, но могут обрабатываться прикладными программами по их усмотрению.

Среди подобных блоков особо следует выделить прикладной блок Netscape Loop - он присутствует практически в каждой анимации (при этом, это единственный блок прикладной программы, в данном случае Netscape, который я встречал). Если браузер (теперь уже не только Netscape) видит этот блок, он проигрывает анимацию не один раз, а столько, сколько в нем указано раз, или бесконечно).

Общая схема следования этих блоков вприблизительно такова:
- Заголовок - GIF87a или GIF89a - определяет формат файла.
- Описание логического экрана (задаются размер экрана, на который "претендует" данный файл).
- Описание глобальной палитры (необязательно, но крайне желательно).
- Произвольное количество блоков изображения (в том числе текстовых), или пар блоков <управление графическими расширениями - изображение>. Блок управления графическим расширением может содержать в себе указание на локальную палитру, расположение на логическом экране, задержку и способ удаления изображения, и оказывает влияние только на следующий непосредственно за ним блок изображения.
Завершитель (признак конца).

Комментарии и специальные блоки могут распологаться где угодно, кроме как:
До описания глобальной палитры (если оно есть) или до описания логического экрана.
Между блоком управления и соответствующим ему блоком изображения (то есть, они могут там находиться, но тогда блок управления уже не будет ничем управлять).
После признака конца.
Также, если Вы хотите поместить в ваш файл расширение Netscape Loop, то этот блок должен следовать непосредственно за глобальной палитрой.

Создание анимаций

Что необходимо для создания анимаций? В первую очередь необходимо иметь набор картинок - кадров для будущей анимации, или, по крайней мере, представление о них. Далее необходима программа, поддерживающая GIF89a. С сожалением приходится отметить, что Photoshop, хоть и поддерживает палитры, чередование, сжатие и прозрачный цвет, для этой цели не подходит, так как несколько картинок в одном файле в нем не сохранишь, зато его можно использовать для создания каждого кадра в отдельности. Из программ, создающих GIF89a, были испробованы следующие: Ulead GIF Animator v2.0, GIFFY v1.2, GIF Construction Set 32, Microsoft GIF Animator v1.0. Подробно рассказывать про интерфейс этих программ не имеет смысла, поэтому будут рассмотрены только основные принцыпы работы с этими, и им подобными программами. Процесс создания анимации можно разделить на две важные составляющие - собственно ее создание и, затем, оптимизация. Процесс создания прост - вы берете поочереди кадры и добавляете их к своему GIF-файлу. При этом программы Ulead, Alchemy Mindworks и Microsoft имеют приятную особенность - они позволяют добавлять кадры не из файла, а из буфера обмена, т.е. если вы постепенно трансформируете свою картинку по мере следования кадров, вы лишены необходимости каждое изменение завершать командой "Save As...", достаточно , , и . Кроме того, хочется особо выделить программу Ulead Gif Animator, которая позволяет по начальному и конечному изображению построить анимацию с помощью одного из целого ряда эффектов, например, наплыв новой картинки поверх старой, смена листа бумаги и многое, многое другое, что позволяет создавать небольшие презентации в одном файле. После того, как кадры забиты в файл, начинается расстановка управляющих блоков. Важно понимать, что все-таки GIF89a файл состоит из блоков, хотя все из вышеперечиленных программ, кроме Gif Construction Set, их не показывают непосредственно. В них глобальные управляющие блоки интерпретируются как свойства файла, а локальные - как свойство картинки. Может, это и к лучшему - меньше возможностей совершить ошибку. Итак, вам нужно для каждого кадра задать задержку, если надо, то локальную палитру, положение на логическом экране и способ удаления. Программы Microsoft и Alcemy позволяют выделить произвольно несколько блоков, и задать для них все параметры. В остальных вы можете изменять только каждый блок в отдельности, или все сразу. Посмотреть, что у вас получается, можно с помощью кнопки Preview. Однако, это не всегда удачная идея из-за уже упоминавшихся проблем совместимости, поэтому убедиться в том, что все работает, можно только запустив ваш любимый браузер. По поводу совместимости можно посоветовать следующее:

- Желательно не использовать локальных палитр - такие картинки читаются, но в некоторых случаях это приводит к неправильному изображению цветов.
- Задавайте прозрачный цвет глобально - локальный прозрачный цвет не поддерживается.
- Ожидание ввода пользователя не поддерживается.
- Не поддерживается замена картинки на то, что было перед ней при удалении.
- Если картинка не умещается на логическом экране, это может привести даже к аварийному завершению работы браузера, в лучшем случае - последствия непредсказуемы.
- В некоторых версиях браузеров кадры не проигрываются быстрее, чем с задержкой в 34/100 секунды
- После того, как анимация готова, начинается самый интересный этап - оптимизация.

Оптимизация анимаций

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

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

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

Хорошее известие - вы можете найти программу, которая выполнит практически всю работу по оптимизации за вас. Такой возможностью обладают Ulead GIF Animator и GIF Construction Set. Рассмотрен на примере простого gif-файла. Каждый кадр целиком помещался в Ulead GIF animator, и размер итогового файла составил 140Кb. Результат автоматической оптимизации - файл размером 4Кb. Аналогичного результата можно добиться и с помощью GIF Construction Set, однако эта программа создает не полностью совместимые файлы, которые нуждаются в последующей ручной обработке.

Использование анимаций

Итак, у вас есть готовая GIF-анимация. Процедура помещения ее на web-сайт ничем не отличается от помещения туда же ее не анимированного собрата - простого GIFа. Когда стоит использовать динамические GIFы, а когда предпочесть другие способы оживления содержания? К достоинствам динамических GIFов можно отнести:
1) не требуется никаких plug-in для их просмотра.
2) небольшой объем файла за счет сжатия.
3) может быть помещен в кэш, не требует повторного обращения к серверу.
4) не требует для работы постоянной связи с сервером.
5) просто поместить на страницу, не требуется никакого программирования.

Как и у всякой медали, у динамических GIFов есть и обратная сторона:
1) палитра не превышает 256 цветов.
2) сжатие фотографий хуже, чем в JPEG.
3) не поддерживается браузерами в полном объеме.
4) любой может легко "позаимствовать" результат ваших многочасовых трудов.

Источник: http://web-support.ru/graphics_design/to_des_40.shtml