Оптимизация GIF файла

Сидит порой посетитель ждёт загрузки странички, а тем временем думает о плохих линиях и о провайдере. А ведь не только это влияет на скорость загрузки страницы. Одним из факторов является размер GIF файла установленного на странице. Представьте себе кнопку (баннер 31 * 88) размером в 91 КБ. Это не из мира фантастики, такие кнопки иногда встречаются, в основном из-за незнания, или нежелания оптимизировать свой GIF. Примерное время загрузки такой кнопки при скорости:
56 К = 18 сек.
28,8 К = 34 сек.
14,4 К = 1 мин. 7 сек.
А если скорость 14,4 К и таких кнопок на страничке скажем 5 или 10 ………..

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

  • размер файла
  • структура файла
  • направление заливки
  • количество кадров
  • глубина цветовой палитры
  • размытие
  • использование "прозрачности"

    Размер файла
    Если перед Вами не стоят определённые рамки, в которые нужно “вписать” анимированный GIF, то попробуйте представить каким максимальным размером в одном из кадров он будет. Исходя из этого, задавайте размер первого кадра. Возможно и по окончании работы обрезать в рамках каждый кадр анимации, но если анимированный GIF будет состоять, допустим, из 20 кадров, это займёт большего времени в Вашей работе. Ниже приведены два примера анимированного GIF файла, размер первого по ширине и высоте на 4-ре пикс. меньше второго.
    3,65 КБ. 3,73 КБ.
    Структура файла
    Чтобы эффективно оптимизировать, нужно хоть немного представлять, что такое алгоритм сжатия. Сжимается Gif перед сохранением на жёсткий диск методом LZW. Особенность этого сжатия заключается в том, что сжатию лучше поддаются те области, которые заполнены однородным цветом, а хуже области состоящие из набора разноцветных точек. К примеру, возьмём полосу синего цвета шириной в 10 пикселей, в файле после сжатия будет храниться число10 и синий цвет. Что существенно сократит Ваш файл. Для примера создадим два файла 30*30. С одинаковым количеством точек синего и голубого цвета. Но в одном из файлов мы разбили эти точки в шахматном порядке. Обратите внимание на размеры файлов.
    107 байт 121 байт

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

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

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

    4,33 КБ

    8,70 КБ


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

    Использование "прозрачности"
    Если анимация - последовательное преобразование картинки, а в каждом кадре изменяется меньшая часть рисунка, самое время вспомнить о главном преимуществе GIF'89 перед другими форматами (поддержка прозрачности). Во всех кадрах анимации можно вырезать (сделать прозрачной) ту область, которая остаётся неизменной, но первый кадр оставить - он займёт логическую область, и будет служить фоном. Многие программы с GIF анимацией, при оптимизации обрежут повторяющие области и без Вашего участия.

Вот и всё. Если учитывать приведённые примеры, вес GIF файла будет минимальным.

 

 
   
 

E-mail

       Copyright © 2001-2004 Кушнир 100143

Автор идеи, редактор, дизайн - В. Кушнир
Обновление - 01.04.2004.