GIF - Graphics Interchange Format

[Trotil]

GIF — формат хранения графических изображений (англ. Graphics Interchange Format). Формат GIF способен хранить сжатые без потерь изображения в формате до 256 цветов с палитрой, и предназначен, в основном, для чертежей, графиков и т. д. Для большинства изображений, не являющихся фотографиями, это вполне достаточно.
GIF широко используется на страницах всемирной паутины.

Данный обзор по этому графическому формату расчитан на пользователей с разным уровнем подготовки и заинтересованности. Информация дается в кратком изложении и дальше конкретизируется. Таким образом можно всегда выбрать тут уровень, который вам интересен. Подробность материала и расчитаны на то, чтобы пользователь мог максимально эффективно использовать те возможности, которые ему предоставляет формат GIF. Здесь я рассказываю не только о свойствах, а раскладываю все по полочкам, чтобы убрать все вопросы "почему так?".
Существует две спецификации формата GIF — GIF 87a и GIF 89a. Я буду рассказывать про расширенную - GIF 89a.

Статья состоит из четырех блоков:
- общие сведения
- внутреннее устройство формата
- эффективное использование особенностей формата
- практическое пособие по созданию GIF-изображений - будет отдельная тема
- оптимизирующие программы

 

[Trotil]

Общие сведения и свойства

Область применения

Изображение в формате GIF хранится построчно, поддерживается только формат с индексированой палитрой цветов. Стандарт разрабатывался для поддержи 256-цветовой палитры.

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

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

Сжатие

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

Алгоритм сжатия LZW относится к форматам сжатия без потерь. Это означает, что восстановленые из GIF данные будут в точности соответствовать упакованым. Следует отметить, что это верно только для 8-битных изображений с палитрой, для цветной фотографии потери будут обусловлены переводом её к 256 цветам.

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

Черезстрочный GIF

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

----

Кроме того, GIF вляется поточным форматом, т.е. показ картинки начинается во время перекачки.

Анимированные изображения

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

Некоторые общие технические данные:

• Размер картинки - от 1х1 до 65535х65535 пикселов.
• Число цветов палитры - от 2 до 256.
• Каждый цвет палитры имеет глубину 24 бита/пиксел (выбор из 16 миллионов цветов).
• Карта прозрачности - 1-битная (полупрозрачных цветов нет).
• Число повторов анимации - от 1 до 65535, а также бесконечное
• Время показа одного кадра анимации - от 1/100 секунды до 655 секунд.
• Число кадров анимации - неограниченно.
• Число невидимых текстовых комментариев и размер каждого комментария - неограниченны.

 

[Trotil]

Сведения из двоичной арифметики и терминология, которая встречается в данной статье.

1 бит информации - ячейка, может принимать либо 0, либо 1.
1 байт информации - последовательность из 8-ми бит, может принимать одно из 256 значений:
0 - 0000 0000 - 0x00
1 - 0000 0001 - 0x01
2 - 0000 0010 - 0x02
...
15 - 0000 1111 - 0x0F
16 - 0001 0000 - 0x10
...
255 - 1111 1111 - 0xFF
(числа представлены в десятеричном представлении, в двоичном и в шестнадцатиричном)

Флаги: Под флагами обычно подразумевается набор параметров, записанных в один байт.

Двумя байтами можно закодировать 256*256=65536 значений.

 

[Trotil]

Структура

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

1. Комментарии. Скрытый текст, его можно увидеть лишь с помощью специальных программ - например, GIF-аниматоров, таких, как Ulead GIF Animator.
2. Блоки управления графикой, задающие параметры вывода отдельных картинок.
3. Глобальная и локальные цветовые палитры, определяющие, какие именно цвета будут у картинок.
4. Особые блоки, которые могут использоваться лишь теми программами, которые знают об их существовании и назначении - например, блок Netscape, задающий число циклов анимации. Без него анимация после загрузки страницы срабатывает всего один раз. А в блоке Pianygif хранятся названия отдельных картинок для облегчения их редактирования.

Минимально необходимый набор блоков - простейший неанимированный GIF:

[table=50%][tr=alt2][td]Зеленый[/td][td]Текстовые константы[/td][/tr][tr=alt1][td]Желтый[/td][td] Переменные[/td][/tr][tr=alt2][td]Голубой[/td][td]Байты с упакованными в них полями и флагами[/td][/tr][tr=alt1][td]Розовый[/td][td]Шестнадцатиричные константы[/td][/tr][tr=alt2][td]Серый[/td][td]Блоки данных переменной длины[/td][/tr][tr=alt1][td]Белый[/td][td]Зарезервированные байты или биты[/td][/tr][/table]

 

[Trotil]

Дескриптор логического экрана

В начале каждого файла GIF находится заголовок. Поскольку сразу за ним идет дескриптор логического экрана, я считаю заголовок его частью. Он состоит из текста "GIF87a" или "GIF89a", в зависимости от версии.

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

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

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

R - соотношение сторон исходного изображения. В версии GIF87a это поле зарезервировано, и здесь стоят нули. Насколько мне известно, этот параметр никогда и никем не используется. Предполагалось, что пиксел экрана может быть и не квадратным, как было в старых компьютерах и как сейчас бывает при некоторых режимах DOS, и что для вывода таких изображений необходимо изменять разрешение экрана либо растягивать изображение так, чтобы оно выглядело более реалистичным.

CT - наличие глобальной палитры. Если этот флаг установлен, то сразу после дескриптора глобального экрана должна начинаться глобальная палитра. Размер палитры определяется полем Size.

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

​

[table=50%][tr=tcat][td]Число цветов[/td][td]Бит/пиксел[/td][td]Бит/цвет[/td][td]Поле Color[/td][/tr][tr=alt1][td]16777216[/td][td]24[/td][td]8[/td][td]7[/td][/tr][tr=alt2][td]2097152[/td][td]21[/td][td]7[/td][td]6[/td][/tr][tr=alt1][td]262144[/td][td]18[/td][td]6[/td][td]5[/td][/tr][tr=alt2][td]32768[/td][td]15[/td][td]5[/td][td]4[/td][/tr][tr=alt1][td]4096[/td][td]12[/td][td]4[/td][td]3[/td][/tr][tr=alt2][td]512[/td][td]9[/td][td]3[/td][td]2[/td][/tr][tr=alt1][td]64[/td][td]6[/td][td]2[/td][td]1[/td][/tr][tr=alt2][td]8[/td][td]3[/td][td]1[/td][td]0[/td][/tr][/table]

SF - флаг сортировки палитры. В версии GIF87a этот бит зарезервирован, и здесь стоит ноль. Указывает, сортирована ли палитра по значимости цветов, когда первыми идут наиболее значимые цвета. Значимость цвета определяется тем, какую площадь изображения он занимает по отношению к другим цветам.

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

[table=50%][tr=tcat][td]Поле Size[/td][td]Число цветов[/td][td]Размер палитры, байт[/td][/tr][tr=alt1][td]7[/td][td]256[/td][td]768[/td][/tr][tr=alt2][td]6[/td][td]128[/td][td]384[/td][/tr][tr=alt1][td]5[/td][td]64[/td][td]192[/td][/tr][tr=alt2][td]4[/td][td]32[/td][td]96[/td][/tr][tr=alt1][td]3[/td][td]16[/td][td]48[/td][/tr][tr=alt2][td]2[/td][td]8[/td][td]24[/td][/tr][tr=alt1][td]1[/td][td]4[/td][td]12[/td][/tr][tr=alt2][td]0[/td][td]2[/td][td]6[/td][/tr][/table]

 

[Trotil]

Глобальная палитра

Изображения, хранящиеся в файле GIF, индексированы. Картинки состоят не из полноцветных пикселов, а из номеров цветов, а сами цвета находятся в палитре. Палитра составлена из триад, в свою очередь состоящих из байтов красного (R), зеленого (G) и синего (B) основных цветов. Из всего многообразия цветов (современные компьютеры и мониторы могут показывать на экране до 16 миллионов цветов) используется всего лишь от 2 до 256. Сведение числа цветов к минимуму без значительного ухудшения качества изображения и без потери информации - сродни искусству, и автоматизации поддается плохо. Многие графические редакторы - такие как Adobe Photoshop, например - позволяют интерактивно выбрать наилучший вариант индексации картинки "на глаз".

Если она есть, глобальная палитра идет сразу за дескриптором логического экрана. Наличие палитры определяется флагом CT дескриптора, а размер - полем Size. Глобальная палитра действует на все картинки, у которых нет своей локальной палитры. В том аварийном случае, если в файле нет ни глобальной, ни локальных палитр, программа просмотра может поступать по своему усмотрению - например, использовать системную палитру. Однако рекомендуется, чтобы первые два цвета в ней были черным и белым, чтобы в любом случае на экран вывелось хоть что-то.

 

[Trotil]

Дескриптор изображения

Действует на следующий за ним графический блок (картинку). Без него картинка выводится не будет, так что его можно считать неотъемлемой частью графического блока. Между дескриптором и блоком графики может находиться только локальная палитра.

W, H - ширина и высота картинки в пикселах.

Left, Top - положение картинки на логическом экране.

CT - наличие локальной палитры. Если этот флаг установлен, то сразу после дескриптора изображения должна начинаться локальная палитра. Размер палитры определяется полем Size.

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

SF - флаг сортировки палитры. В версии GIF87a этот бит зарезервирован, и здесь стоит ноль. Указывает, сортирована ли палитра по значимости цветов, когда первыми идут наиболее значимые цвета. Значимость цвета определяется тем, какую площадь изображения он занимает по отношению к другим цветам.

Size - размер локальной палитры и число цветов картинки (см. выше). Если флаг локальной палитры CT сброшен, то здесь должны стоять нули.

 

[Trotil]

Локальная палитра

Если она есть, должна идти сразу за дескриптором изображения Наличие палитры определяется флагом CT дескриптора, а размер - полем Size. Действует она только на следующий сразу за ней графический блок (картинку).

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

Графический блок

Картинка, сжатая по методу LZW. Она разбита на отдельные субблоки по 255 байт. Число картинок в файле, как и размер каждой картинки, ничем не ограниченны. Анимированным GIF становится в том случае, если в нем больше одной картинки. Тогда при просмотре файла в браузере автоматически включается анимация.

MC - Начальный размер LZW-кода. Равен глубине цвета картинки, за исключением двухцветных, когда MC равен не 1, а 2.

[table=50%][tr=tcat][td]Число цветов[/td][td]Глубина цвета, бит/пиксел[/td][td]Поле MC[/td][td]Размер LZW-кода[/td][/tr][tr=alt1][td]256[/td][td]8[/td][td]8[/td][td]9[/td][/tr][tr=alt2][td]128[/td][td]7[/td][td]7[/td][td]8[/td][/tr][tr=alt1][td]64[/td][td]6[/td][td]6[/td][td]7[/td][/tr][tr=alt2][td]32[/td][td]5[/td][td]5[/td][td]6[/td][/tr][tr=alt1][td]16[/td][td]4[/td][td]4[/td][td]5[/td][/tr][tr=alt2][td]8[/td][td]3[/td][td]3[/td][td]4[/td][/tr][tr=alt1][td]4[/td][td]2[/td][td]2[/td][td]3[/td][/tr][tr=alt2][td]2[/td][td]1[/td][td]2[/td][td]3[/td][/tr][/table]

 

[Trotil]

Расширение управления графикой

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

Delay - время задержки, в 1/100 сек. Время, в течение которого данная картинка остается на экране. Минимальное значение - 1/100 секунды, максимальное - примерно 655 секунд. Таймер начинает отсчет лишь после того, как картинка выведена на экран, поэтому у разных программ просмотра время задержки может существенно различаться. Например, если попытаться сделать анимированный GIF - часы, то они могут, в зависимости от браузера, за минуту спешить или отставать более чем на секунду.

Tr - номер прозрачного цвета. Если есть локальная палитра, это номер цвета в ней, если же локальной палитры нет, то это номер цвета в глобальной палитре.

Disp - способ замены картинки после показа:


[table=50%][tr=tcat][td]Поле Disp[/td][td]Способ замены[/td][td]Примечание[/td][/tr][tr=alt1][td]0[/td][td]На усмотрение браузера[/td][td]Обычно результат такой же, как при 1[/td][/tr][tr=alt2][td]1[/td][td]Оставить как есть[/td][td]Наложение следующей картинки поверх данной[/td][/tr][tr=alt1][td]2[/td][td]Восстановить цвет фона[/td][td]Стирание картинки перед выводом следующей[/td][/tr][tr=alt2][td]3[/td][td] Восстановить предыдущую картинку[/td][td]Поддерживается не всеми программами просмотра, исп[/td][/tr][tr=alt1][td]4..7[/td][td][/td][td]Зарезервированы[/td][/tr][/table]

Расширение комментария

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

S - размер субблока данных, не включая сам байт S. У всех субблоков, кроме последнего, размер должен быть равен 255 байтам. У последнего субблока (или если он вообще один) размер может быть любым - от 1 до 255 байт.

 

[Trotil]

Расширение приложения

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

ID - идентификатор приложения. Текст из 8 символов, по которому программа просмотра определяет, сможет ли она прочесть данные, и какого они типа.

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

S - размер субблока данных, не включая сам байт S. У всех субблоков, кроме последнего, размер должен быть равен 255 байтам. У последнего субблока (или если он вообще один) размер может быть любым - от 1 до 255 байт.

Расширение приложения Netscape

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

? - здесь стоит 0x01, но что это означает, мне неизвестно. Возможно, первоначально этот байт предполагалось использовать, но затем он оказался ненужным.

Loop - Число циклов анимации, от 0 до 65535. Здесь есть некоторые странности. Во-первых, без расширения Netscape цикл анимации срабатывает, но только один раз. Если же вставить расширение Netscape в файл и установить Loop = 1, то цикл будет прокручиваться дважды, как и при Loop = 2. А при Loop = 0 анимация крутится бесконечно, так что ее отключение, для того, чтобы выводилась только одна первая картинка, в любом случае оказывается невозможным.

Расширение приложения Pianygif

Судя по его названию, должна быть программа с названием "Pianygif", но таковой на просторах сети не обнаружилось - возможно, она уже давно канула в Лету. Однако польза от этого расширения есть. В нем хранятся названия отдельных графических блоков (или "слоев") картинки, что помогает различать их при редактировании анимации. Так, например, это расширение использует редактор GIF-анимации Ulead GIF Animator, входящий в набор Ulead Web Razor.

Названия хранятся разбитыми на субблоки данных, которые, после объединения и удаления байтов размера представляют из себя одну строку неограниченной длины, где названия отделены друг от друга разделителем 0x01. Последовательность названий соответствует последовательности картинок в файле. Заканчивается строка терминатором 0x0101 или 0x010F. От чего зависит выбор терминатора, определить пока не удалось.

S - размер субблока данных, не включая сам байт S. У всех субблоков, кроме последнего, размер должен быть равен 255 байтам. У последнего субблока (или если он вообще один) размер может быть любым - от 1 до 255 байт.

 

[Trotil]

Пример N1

Внутри он представляет собой следующий набор байт:

[B]47 49 46 38 39 61 14 00 11 00 91 00 00[/B] 00 00 00
ff ff ff 00 00 00 00 00 00 [B]21 f9 04 01 00 00 02
00 [/B]2c 00 00 00 00 14 00 11 00 40 [B]02 39 94 8f a9
06 01 0f 61 70 6e d9 7b 5a d4 aa cd 0f 7e 9c b5
45 98 86 56 5d 59 4e 4f 16 с6 2a 46 2f 5e 0c 9c
72 4e de e1 cb 83 с9 44 2e с6 d0 71 1b 09 58 ad
60 86 09 49 14 00 00[/B] Зb

Заголовок:
47 49 46 38 39 61 14 00 11 00 91 00 00

47 49 46 38 39 61 - "GIF89a" в шестнадцатеричном виде
14 00 - width - ширина - 1*16+4 = 20 пикселей
11 00 - heidth - высота - 1*16+1 = 17 пикселей
91 = 10010001 - флаги:
Наличие глобальной палитры: 1 - да
Цветовое разрешение: 001 - 2 бита на пиксель
Сортировка глобальной палитры: 0 - Нет
Размер палитры: 001 - 4 цвета, 12 байт
00 - номер цвета фона - 0
00 - разрешение - не указано

00 00 00 ff ff ff 00 00 00 00 00 00

В палитре 4 цвета, размер палитры - 12 байт. Все понятно.

21 f9 04 01 00 00 02 00 - следующие восемь байт - Расширение управления графикой

21 f9 04 - константы
01 = 00000001
Disp: 000 - на усмотрение браузера
UI: 0 - реакция пользователя не используется
TF - 1 - флаг прозрачности включен
00 00 - Delay - задержка бесконечна (анимации нет)
02 - нормер цвета в палитре, который будет иметь прозрачный фон
00 - константа.

2c 00 00 00 00 14 00 11 00 40 - дескриптор изображений

Константа, смещения нет, высота и ширина совпадают с размером всех картинки. Остался флаг 40 = 01000000.
0 - локальной палитры нет
1 - чересстрочная или обычная развертка
0 - палитра не сортирована
00 - зарезервированно
000 - размер локальной палитры - 0, потому что ее нету.

Последним идет графический блок: 02 39 ... 00 3b
MC - 02 (глубина палитры)
39 - S - 57 - субблок длиной 57 байт
Далее идут 57 байт сжатого изображения, на конце - константа-ноль и
3b - символ ";" - концевик файла.

C LZW - сжатием я пока не разобрался, это будет отдельным дополнением к статье.

 

[Trotil]

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

Для большинства изображений, не являющихся фотографиями, количество необходимых для воспроизведения цветов часто меньше 256. Лишние цвета можно убрать из изображения, тем самым уменьшив его размер. Это возможно потому, что GIF поддерживает размер палитры меньше 256 цветов. Теоретически, мы можем задать любое число цветов палитры в диапазоне 2-256, например, 37 цветов или 101. Практически же, количество цветов в изображении выбирается из ряда: 2, 4, 8, 16, 32, 64, 128, 256. Это связано с тем, что для представления цвета используется всегда целое число бит, а приведенный выше ряд является рядом максимального количества цветов при использовании от 1 до 8 бит на пиксель (1bpp-8bpp). В случае, если мы используем, допустим, только 101 цвет в рисунке, для сохранения пикселя все равно будет использовано 7 бит. Поэтому при оптимизации количества цветов нужно ориентироваться на приведенный выше ряд. Это позволит получить более качественную картинку. Сравните два изображения - они не очень-то и отличаются, но левое использует полную палитру в 256 цветов, а правое - палитру, состоящую только из 32 цветов. И, соответственно, различаются размеры файлов (примерно в 2 раза).
Полная палитра (256 цветов) - 7.88KB

----

 

[Trotil]

Оптимизация палитры изображения

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

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

-----

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

При оптимизации конкретного изображения задача состоит в том, чтобы выбрать наиболее оптимальное количество цветов в палитре. Тут уместно сказать о способе увеличения количества используемых цветов при их недостатке, т.н. дизеринг (Dithering). Например, у нас есть 16 стандартных чистых цветов, а нам нужен отсутствующий оранжевый цвет. В таком случае, мы можем составить его из красных и желтых точек, разместив их в шахматном порядке. Издалека нашим глазам покажется, что это сплошной оранжевый цвет. Это классический пример дизеринга; его использование при преобразовании изображений может дать очень хорошие результаты. Но с точки зрения оптимизации размеров файла происходит совсем обратное. Дизеринг может увеличить размер файла, причем довольно существенно (он может стать больше, чем до оптимизации . А все дело в методе хранения изображения форматом GIF. Изображение перед сохранением на диске подвергается сжатию методом LZW, а основная особенность этого метода заключается в том, что сжатию лучше всего поддаются области, заполненные однородным цветом, и хуже всего - области, состоящие из набора разноцветных точек. Дизеринг же как раз и основан на том, что получает недостающие цвета путем "перемешивания" точек разных цветов. Поэтому к оптимизации при помощи дизеринга нужно относиться очень аккуратно и по-возможности не использовать. Ниже приведены две картинки: обе используют фиксированную палитру, но к правой применен дизеринг, а к левой - нет. Посмотрите, как изменилось изображение, а заодно обратите внимание на размеры файлов.

-----

 

[Trotil]

Стилизация изображения

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

Фрагментарная оптимизация

Фрагментарная оптимизация применяется в случае, если у нас есть некоторое большое изображение, содержащее сильно отличающиеся по количеству цветов области. В этом случае изображение можно разрезать на фрагменты и поместить их в таблицу, тогда в броузере оно будет выглядеть как единое целое. Теперь каждый фрагмент исходного рисунка мы оптимизируем отдельно. Для фрагментов, содержащих мало цветов, вполне может хватить палитры в 8 или 16 цветов, а для богатых цветами фрагментов можно использовать полную палитру в 256 цветов или сохранить в формате JPG. Этот способ позволяет уменьшить объем, занимаемый исходным файлом, примерно раза в 2-3 (в зависимости от конкретного изображения); кроме того, изображение будет загружаться более равномерно, т.к. все фрагменты будут качаться параллельно. Хотя, если количество фрагментов превысит 10, то возможного выигрыша и не получится, т.к. каждый фрагмент должен будет хранить свою копию палитры и служебной информации.

 

[Trotil]

Оптимизация "прозрачных" изображений

Формат GIF позволяет сохранять т.н. "прозрачные" изображения. На самом деле, GIF не поддерживает прозрачность в изображениях (т.н. альфа-канал), он лишь позволяет назначить одному любому цвету в палитре атрибут прозрачности. Когда броузер рисует на экране такой GIF, то, встречая "прозрачный" пиксель, он просто игнорирует его и не печатает на экране. Само по себе это хорошо, но в случае использования метода сглаживания краев изображения (anti-aliasing) и последующего сохранения в формате GIF возникает проблема появления ореола вокруг прозрачного изображения в случае, если GIF показывается на фоне, отличном от того, на котором происходил anti-aliasing. Это прямое следствие отсутствия поддержки канала прозрачности форматом GIF. Единственным способом уменьшения проявления этого эффекта является назначение прозрачным пикселя по цвету, близкому к фону, на котором будет использоваться GIF, и проведение anti-aliasing'а на этом же фоне. Ниже приведены два изображения: на левом anti-aliasing проведен на белом фоне, и поэтому ореол не заметен, а на правом - на контрастном синем, и ореол хорошо виден.

----

 

[Trotil]

Оптимизирующие программы
Trout's GIF Optimizer
Advanced GIF Optimizer

(статья будет модифицироваться)

 

[Trotil]

Размер файла

Если перед Вами не стоят определённые рамки, в которые нужно “вписать” анимированный GIF, то попробуйте представить каким максимальным размером в одном из кадров он будет. Исходя из этого, задавайте размер первого кадра. Возможно, и по окончании работы обрезать в рамках каждый кадр анимации, но если анимированный GIF будет состоять, допустим, из 20 кадров, это займёт большего времени в Вашей работе. Ниже приведены два примера анимированного GIF файла, размер первого по ширине и высоте на 4-ре пикс. меньше второго.

[table=50%][tr=alt2][td]

3,65 КБ.[/td][td]

3,73 КБ.[/td][/tr][/table]


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

Чтобы эффективно оптимизировать, нужно хоть немного представлять, что такое алгоритм сжатия. Сжимается GIF перед сохранением на жёсткий диск методом LZW. Особенность этого сжатия заключается в том, что сжатию лучше поддаются те области, которые заполнены однородным цветом, а хуже области состоящие из набора разноцветных точек. К примеру, возьмём полосу синего цвета шириной в 10 пикселей, в файле после сжатия будет храниться число10 и синий цвет. Что существенно сократит Ваш файл. Для примера создадим два файла 30*30. С одинаковым количеством точек синего и голубого цвета. Но в одном из файлов мы разбили эти точки в шахматном порядке. Обратите внимание на размеры файлов.

[table=50%][tr=alt2][td]

107 байт[/td][td]

121 байт[/td][/tr][/table]


Направление заливки

От направления градиентной заливки цвета тоже зависит размер файла. Сканирование при LZW сжатии рисунка производится построчно. Пример создания GIF файла смотрите ниже. Для примера приведены два рисунка, при равных условиях сжатия.

[table=50%][tr=alt2][td]

240 байт[/td][td]

293 байт[/td][/tr][/table]


Количество кадров

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

[table=50%][tr=alt2][td]

4,74 КБ.[/td][td]

5,90 КБ.[/td][/tr][/table]

Глубина цветовой палитры

Большое влияние на размер файла оказывает глубина цветовой палитры. Как известно GIF содержит от 2 до 256 цветов. Если возможно, обойтись 32 цветами не используйте 256 цветов, т. к. при равных условиях сжатия, но при меньшем содержании цветов (глубины цветовой палитры) Размер файла будет гораздо меньше. По возможности не пользуйтесь локальными палитрами, а старайтесь использовать глобальную. Сравните два изображения - они фактически не отличаются, но левое использует палитру из 32 цветов, а правое использует полную палитру в 256 цветов. А при создании анимации разницу в качестве будет совсем незаметно, даже при использовании 16 цветов.

[table=50%][tr=alt2][td]

[/td][td]

[/td][/tr][tr=alt2][td]4,33 КБ[/td][td]8,70 КБ[/td][/tr][/table]


Размытие

Старайтесь не использовать размытие цветов. Если анимированный GIF уже содержит палитру из 128 цветов, при этом пытаться оптимизировать его с 16 цветами. Программа просмотрит каждую точку, и будет смешивать имеющие цвета, чтобы добавить недостающие оттенки. Тем самым обеспечить плавный переход от цвета к цвету. В качестве изображения Вы выиграете, но не получите ожидаемого результата сжатия.