Онлайн учебник по WEB-графике

Графика на вашей интернет-странице

Оптимизация анимированных GIF-ов

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

Создать живой GIF с помощью последних программ может каждый, достаточно иметь хотя бы первоначальные навыки владения мышкой.

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

Структура файла
Чтобы эффективно оптимизировать, да и вообще "чувствовать" GIF, необходимо иметь хотя бы примерное представление об его алгоритме сжатия. Работает он по принципу устранения избыточной информации в изображении. Например, если в строке расположено подряд двадцать пикселей красного цвета, то в файле можно хранить число 20 и красный цвет, а не все красные пиксели по отдельности. Такой способ сжатия имеет аббревиатуру LZW и экономит удивительно много места на диске.

Количество цветов
Исторически сложилось так, что основной единицей измерения бинарной информации стал бит. Байт - единица хранения цифровых данных более высокого уровня. В байте содержится 8 бит. Такой размер байта очень удобен для хранения информации в компьютере. Поскольку каждый байт может представлять одну из 256 возможных комбинаций нулей и единиц, неудивительно, что для изображений обычно используется не более 256 цветов. Если для хранения одного пикселя изображения использовать один байт, то каждый пиксель может иметь одно из 256 возможных значений цвета.

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

Необходимо помнить, что для хранения изображений с 256 цветами в файле на каждый пиксель отводится по одному байту (8 бит). Поэтому 256-цветные изображения часто называют 8-битовыми.

Преимущество 8-битовых изображений состоит в том, что размер файла таких изображений существенно меньше размера файла 16-битовых (по 2 байт на пиксель) или 24-битовых (по 3 байта на пиксель). За счет сжатия в формате GIF размер файла становится еще меньше.

Таким образом, чем меньше цветов используется в изображении, тем меньше оно будет "весить".

На этом изобажении показано, как имея в распоряжении только два цвета - синий и красный - Photoshop имитирует пурпурный. Он как бы смешивает пиксели в местах, где это необходимо, тем самым добиваясь нужного эффекта. Кто работал на БК или ZX Spectrum - тот помнит, что все оттенки достигались там похожим способом из исходных цветов.

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

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

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

Как видно, анимированными объектами являются два сердца, которые, в свою очередь, занимают сравнительно небольшую площадь всего изображения. Так зачем в каждом кадре помимо них показывать все остальные элементы,остающиеся неизменными на протяжении всего ролика? Все статичные пиксели заложены в первый кадр, а два последующих изображения содержат лишь изменяющиеся области. Белый цвет задан как прозрачный, что позволяет в кадрах 2 и 3 просвечивать неизменные части Купидона. Таким образом можно добиться весьма (и даже очень) существенного сокращения размера файла, да к тому же большинство программ для работы с GIF-анимацией обрежет похожим способом каждый кадр и без вашего вмешательства.

Практика
Используя все эти приемы, попробуем оптимизировать анимацию в одной из наиболее популярных программ для работы с WEB-анимацией   - Ulead Gif Animator 2.
Загрузив соответствующий файл, выбирите в меню File модуль Optimization Wizard.
Вышедшее меню предложит вам создать общую паллитру (super-palette) для всех кадров анимации. В подавляющем большинстве случаев это именно то, что Вам надо. После положительного ответа программа предложит ввести количество цветов (Number of colors), а ниже спросит хотите-ли вы использовать размытие. После нажатия NEXT> вы увидите новую пару вопросов. В первом вам предложат удалить повторяющиеся пиксели(создать кадры с прозрачностью), а второй при положительном ответе уничтожит все комментарии к файлу. Вот и все. Если вы с умом подошли к процессу - оптимизация закончена.