за счет чего изображение в gif формате имеет маленький размер
Всем привет! Сегодня мы рассмотрим графический формат GIF, его описание, достоинства и недостатки.
изображение с горизонтальными линиями сжимается лучше, чем с вертикальными.
Формат GIF может на первый взгляд показаться довольно сложным. В отличие от JPEG, где нужно было установить степень сжатия, в GIF необходимо указать ряд параметров. Однако это только на первый взгляд, потому что графический формат GIF тоже может сделать гораздо больше и местами использует другой метод хранения (палитра цветов и разложение).
Черно-белые фотографии, GIF может хранить без какой-либо потери качества. Если вы выбираете палитру 256 цветов, способ подавления цвета «оттенки серого», «без разложения», то возможности GIF формата будут равны JPEG. Формат JPEG тоже сохраняет черно-белые изображения только в 256 оттенках серого. Больше серых оттенков с 24 разрядной глубиной цвета (8 бит/канал) JPEG использовать не умеет. GIF-файл будет больше, потому что он использует сжатие без потерь LZW, в отличие от JPEG, который использует сжатие с потерями.
Сжатие в графическом формате GIF. Сам факт, что GIF формат сохраняет цвет, используя значительно меньшее количество цветов в палитре, приводит к резкому уменьшению размера файла. Таким образом, полученные данные в графическом GIF формате, до сих пор реализуются с помощью сжатия без потерь LZW. Это приводит к сохранению полной палитры и не приводит к появлению каких-либо дефектов.
Используемое LZW сжатие в GIF формате, однако, довольно просто и обрабатывает изображение по строкам. Сначала сжимаются пиксели первой строки изображения, затем второй, третьей и так далее, таким образом, изображения, содержащие горизонтальные мотивы более подвергаются сжатию, чем те, у которых вертикальные темы.
Хотя графический формат GIF использует сжатие без потерь, однако, Adobe Photoshop позволяет установить и сжатие с потерями. Сумма «потерь» указывается в процентах и вызывает достаточно выраженную деградацию изображения. Поэтому целесообразно ставить ползунок потерь в 0 % или максимум до 40 %. Кроме того, уменьшение размера файла не столь критично.
Графический формат GIF и анимация
Графический GIF формат позволяет хранить даже простую анимацию, что делает его очень популярным в интернете. Более сложные анимации типа «кино» в GIF формате также можно создать, но размер файла будет уже значительно увеличен. Таким образом, для более сложной анимации используется, например, Flash, который может создавать и векторную анимацию и, следовательно, является намного более экономичным. GIF формат, в принципе, может сохранить даже реальный фильм, но это слишком расточительное решение, чаще применяется такой формат как MPEG. Простая анимация, по-прежнему является прерогативой GIF формата, потому что она очень простая и данные вполне приемлемы.
При создании анимации процесс происходит так, что отдельные фазы анимации создаются, как обычные изображения (в любом редакторе), и вы тогда в соответствующей программе (например, Adobe Image Ready) их добавляете в своеобразную ленту. Иногда тот факт, что GIF содержит анимации, подчеркивается словами «анимированный GIF».
Преимущества и недостатки GIF формата
Преимущества графического формата GIF:
Недостатки графического формата GIF:
Спасибо за внимание. Автор блога Владимир Баталий
Советую ещё почитать:
Особенности изображений GIF формата.
Файлы формата GIF (Graphic Interchange Format — формат для обмена изображениями) чаще всего используются для веб-страниц. Несмотря на то что он не был создан специально для Всемирной паутины, этот формат быстро приняли за его универсальность, небольшой размер файлов и межплатформенную совместимость. Также GIF предполагает прозрачность и способен содержать простую анимацию. Прошло более двадцати лет, но он, бесспорно, остается наиболее широко используемым форматом изображений для Всемирной паутины.
Поскольку алгоритм сжатия GIF отличается сжатием однотонных цветов, то это лучший формат файла для сохранения логотипов, штриховых рисунков, графических текстовых надписей, значков и т. д. Вы также можете сохранять фотографии или текстурные изображения в формате GIF, но это будет не столь эффективно, поскольку в результате получатся файлы большего размера. Тем не менее GIF отлично подходит для изображений с комбинацией небольших фрагментов фото и больших областей однотонного цвета.
Чтобы правильно сохранить файл в формате GIF, важно знать, как он работает и что он может сделать.
8 бит, индексированный цвет.
Говоря техническим языком, файлы в формате GIF — это изображения с индексированным цветами, которые содержат 8-битную информацию о цвете (их также можно сохранить с более низкой разрядностью цвета). Расшифруем эти термины. 8 бит означает, что файл GIF может содержать до 256 цветов — максимальное количество, которое могут описать 8 бит информации (28=256). Использование меньшей глубины цвета ведет к меньшему количеству воспроизводимых цветов, а также сокращает размер файла.
Индексированный цвет означает, что набор цветов изображения, его палитра, хранится в таблице цветов (которую также называют картой цвета). Каждый пиксел в изображении содержит цифровую ссылку (или «индекс») на позицию в таблице цветов.
Когда открываете файл формата GIF в программе Photoshop, вы способны видеть (и даже редактировать) его таблицу цвета, выбрав команду меню Изображение > Режим > Таблица цветов (Image > Mode > Color Table). Вы сможете просмотреть таблицу цветов изображения, если в программе Photoshop выберете команду меню Файл > Сохранить для Web и устройств (File > Save for Web & Devices), чтобы экспортировать изображение в формат GIF. В программе Fireworks таблица цветов находится на панели Оптимизировать (Optimize).
Большинство исходных изображений (отсканированные, иллюстрации, фотографии и т. д.) имеют исходный формат RGB, поэтому их нужно конвертировать в режим индексированного цвета, чтобы потом можно было сохранить в формате GIF. Когда изображение переходит из формата RGB в индексированный режим, количество цветов в изображении сокращается до 256 или меньшего. В программах Photoshop и Fireworks конверсия имеет место, когда вы сохраняете или экспортируете документ в формат GIF. Другие программы для редактирования изображений могут потребовать, чтобы вы сначала конвертировали его вручную в индексированный цвет, а затем, в качестве второго шага, экспортировали в формат GIF.
В любом случае вам нужно будет выбрать палитру для изображения с индексированным цветом. Я рекомендую вам использовать селективную или перцепционную палитру в программе Photoshop, адаптивную — в программе Fireworks, и режим Оптимизированный медианный вырез (Optimized Median Cut) в программе PaintShop Pro для получения лучшего результата для большинства изображений.
Сжатие файлов формата GIF.
Сжатие файлов формата GIF осуществляется без потерь, это означает, что никакая информация об изображении при этом не теряется (хотя некоторая информация об изображении все же может быть потеряна, если изображение формата RGB конвертируется в файл с индексированным цветом). Кроме того, этот формат использует схему сжатия (называемую LZW — алгоритм Лемпеля-Зива-Велча), применяющую повторение данных. При обнаружении строки пикселов идентичного цвета строка сжимается в одно описание данных. Вот почему изображения с большими областями равномерного цвета легче поддаются сжатию, чем текстурные.
Объясню это на упрощенном примере: когда при сжатии находится ряд из 14 идентичных пикселов синего цвета, выполняется сокращенная запись «14 синих пикселов». В следующий раз, когда встречаются 14 синих пикселов, используется только кодовое сокращение. И наоборот, если встречается ряд с плавным переходом от синего к голубому и зеленому, необходимо сохранить описание каждого пиксела, для чего требуется больше данных. То, что происходит, в технических терминах объяснить сложнее, но этот пример представляет собой рекомендацию, о которой нужно помнить, когда вы создаете изображения в формате GIF и хотите добиться максимального сжатия.
Прозрачность.
Вы можете сделать некоторые области изображения формата GIF прозрачными, так, чтобы фоновое изображение или цвет страницы были видны. Хотя вся растровая графика является прямоугольной от природы, при помощи прозрачности вы можете создавать иллюзию, что ваше изображение имеет более интересную форму.
Чересстрочная загрузка.
Чересстрочная загрузка заставляет файл в формате GIF загружаться в несколько стадий. Каждая демонстрирует более ясное изображение, чем предыдущее, до того момента, пока изображение полностью не загрузится в окне браузера. Без чересстрочной загрузки некоторые браузеры могут ожидать окончания загрузки изображения до того, как покажут его. Другие могут выводить по несколько строк изображения за раз, сверху вниз, до того момента, пока оно не появится полностью.
При высокоскоростном соединении эти эффекты (чересстрочная загрузка или задержка появления изображения) могут быть вообще незаметны. Однако при медленных коммутируемых соединениях чересстрочная загрузка больших изображений может быть намеком, что постепенно проявляющееся изображение скоро будет получено.
Используете ли вы чересстрочную загрузку или нет — это ваше решение. Я никогда не использую, но если у вас особенно большое изображение и аудитория со значительным процентом коммутируемых соединений, чересстрочная загрузка может оказаться полезной.
Анимация.
Еще одной особенностью, которой обладает файл формата GIF, является способность демонстрировать простую анимацию. Многие из крутящихся, мигающих, исчезающих или как-то иначе двигающихся рекламных баннеров, которые вы видите, являются анимированными файлами GIF (хотя ролики в формате Flash становятся все более популярными).
Анимированные файлы GIF содержат определенное количество кадров анимации, представляющих собой отдельные изображения, которые, когда их просматривают друг за другом на большой скорости, создают иллюзию движения или изменения с течением времени. Все эти изображения хранятся внутри одного GIF-файла наряду с параметрами, которые описывают, как они должны проигрываться в окне браузера. Настройки описывают, как и сколько раз должна повторяться последовательность, как долго каждый кадр остается видимым (задержка кадра), способ, которым один кадр заменяет другой (метод удаления), является ли изображение прозрачным и используется ли чересстрочная загрузка.
Программы Adobe Photoshop и Fireworks имеют инструменты для создания анимированных GIF-файлов. В программе Photoshop CS5 и более ранних версиях используйте окно Анимация (Animation). В CS6 используйте окно Шкала времени (Timeline) и выберите команду Создать анимацию кадра (Create Frame Animation). Во Всемирной паутине для работы с анимированными файлами GIF можно найти множество специализированных инструментов, многие из которых бесплатные.
Для оплаты необходимо пройти быструю регистрацию с правильным указанием своего Email адреса. На него будет выслан оплаченный товар.
Автор: Саков | Просмотров: 5 337 | 2016-05-22
Формат GIF
GIF (Graphics Interchange Format — формат обмена графикой) — растровый графический формат, во многом уступающий другим популярным в интернете форматам. GIF до сих пор применяется благодаря поддержке анимации.
Содержание
Как создать изображение в формате GIF?
Сделать GIF-картинку можно с помощью любого графического редактора (в том числе Paint и Photoshop).
Как сохранить картинку в формате GIF в Paint?
Процесс сохранения изображения в формат GIF с помощью редактора Paint в Windows 10:
Откроется контекстное меню.
Откроется модальное окно выбора папки и названия для файла.
Как сохранить файл в формате GIF в Photoshop?
Процесс сохранения изображений в формате GIF с помощью редактора Adobe Photoshop CC 2015:
Программа поддерживает изображения в самых разных графических форматах.
Откроется контекстное меню.
Откроется модальное окно сохранения.
Откроются дополнительные настройки формата GIF :
Изменение изображения в зависимости от выставленных настроек можно контролировать в левой части окна.
Откроется модальное окно выбора папки и названия для файла.
Как сохранить GIF-файл в Illustrator?
Программа Illustrator является графическим редактором компании Adobe, предназначенным для работы с векторной графикой. Функционал программы схож с функционалом Photoshop: для сохранения изображений в GIF-формате в «иллюстраторе» используйте аналогичную функцию «Сохранить для Web»:
Программа поддерживает изображения в самых разных графических форматах.
Откроется контекстное меню.
Откроется модальное окно сохранения.
Откроются дополнительные настройки формата GIF (описаны выше в процессе сохранения GIF в «фотошопе»).
Изменение изображения в зависимости от выставленных настроек можно контролировать в левой части окна.
Откроется модальное окно выбора папки и названия для файла.
GIF-анимация для сайта
Каждый кадр GIF-анимации является отдельным изображением, и с ростом числа кадров размер файла сильно увеличивается.
Настройки GIF-анимации
Для анимированных изображений в формате GIF применяются следующие настройки:
Скорость смены кадра Устанавливается для каждого кадра в отдельности. Количество повторов воспроизведения Можно установить определённое количество повторов воспроизведения анимации или сделать её цикличной (бесконечной).
Как сохранить GIF-анимацию на компьютер в браузере?
Как сохранить GIF-анимацию в «фотошопе»?
Для создания и сохранения анимированного изображения в формате GIF с помощью Photoshop:
Сжатие картинок в формате GIF
Формат GIF использует алгоритм сжатия без потерь, который по эффективности уступает сжатию в формате PNG : файлы на выходе весят больше, чем в других растровых форматах. Это невыгодно выделяет данный графический формат из ряда других:
Оптимизация размера изображений в формате GIF
Уменьшить размер GIF-файла можно с помощью уменьшения количества индексированных цветов в палитре.
GIF-изображения могут использовать не более 256 цветов в палитре (глубина цвета 8 бит), что является вторым «камнем в огород» данного формата. Тем не менее, влиять на итоговый размер файла можно с помощью уменьшения и без того сильно ограниченного количества цветов.
Существуют всевозможные онлайн-компрессоры, позволяющие сжимать GIF-изображения (как статичные, так и анимированные), но следует иметь ввиду, что сжать файл в формате GIF без видимых искажений в детализации практически невозможно.
Всегда проверяйте качество детализации GIF-изображений на выходе после компрессии.
Преимущества формата GIF
Форматы JPG и PNG не могут похвастаться такой возможностью.
Только полная прозрачность: GIF не поддерживает 8-битный альфа-канал (полупрозрачные пиксели).
Недостатки формата GIF
Изображения в формате GIF используют только 8-битную цветовую палитру (индксированные цвета).
Только полностью прозрачные пиксели.
Рекомендации по применению
Из всего вышесказанного можно сделать следующий вывод: растровый графический формат GIF уступает своим конкурентам почти во всём и в скором времени применять его на сайтах будет нецелесообразно.
Часто задаваемые вопросы
Чем открыть файл в формате GIF на компьютере?
Открыть файлы в формате GIF можно с помощью всех современных интернет-обозревателей (браузеров), а также векторных и растровых графических редакторов.
Какой программой можно открыть файл GIF?
Список наиболее популярных программ для открытия и редактирования GIF-файлов (а также других графических файлов):
Как открыть файл GIF в «фотошопе»?
Чтобы открыть любое изображение в формате GIF (а также в любом другом графическом формате) в Photoshop откройте программу и воспользуйтесь функцией Файл → Открыть. (клавиши Ctrl + O ). Таким же способом это можно сделать в любом другом графическом редакторе.
Как сохранить (создать) файл в формате GIF?
Как сохранить (создать) GIF-анимацию?
Создавать и сохранять GIF-анимацию можно с помощью специальных онлайн-сервисов, а также графических редакторов, оснащенных соответствующим функционалом (например, Photoshop).
Как изменить формат изображения на GIF?
Изменить формат картинки (фотографии или рисунка) можно с помощью функции экспорта в графических редакторах или через онлайн-конвертеры.
Как сжать изображение в формате GIF?
Сжатие GIF происходит при сохранении картинки в данном формате. Если файл необходимо сжать в большей степени, можно уменьшить количество цветов в палитре или воспользоваться онлайн-компрессором. Всегда проверяйте качество изображения после сжатия и помните, что существенно сжать GIF без потери качества невозможно.
Как уменьшить (изменить) размер файла в формате GIF?
Уменьшить размер GIF-файла можно следующими способами:
Объявление
Всё, что вы хотели знать о формате GIF, но стеснялись спросить 🙂
Аббревиатура GIF расшифровывается как «Graphics Interchange Format (Формат для обмена изображениями)». Картинки в этом формате бывают статичные (неподвижные), и анимированные (подвижные). Поскольку форум наш посвящен анимации, упор в этой статье я буду делать именно на анимированный GIF. Сразу хочу предупредить, что статья рассчитана не на совсем новичков, а на тех, кто уже сделал первые шаги в закулисный мир анимации, и стремится расширить свой кругозор.
2. Что же из себя представляет анимированный GIF?
Для просмотра GIF нужна программа
Поддержка GIF в интернет-браузерах
3. Скорость проигрывания
Поскольку формат GIF является картинкой, а не видео-файлом, у него напрочь отсутствует понятие fps (скорость кадров в секунду). Вместо этого, у гифа существует индивидуальная длительность показа (задержки) каждого кадра, которая измеряется в сотых долях секунды.
Вот смотрите: когда на вашем экране идет видео с частотой 25 fps, это означает, что за каждую секунду картинка на экране сменяется 25 раз, то есть получается, что каждый кадр задерживается на экране 1/25 секунды – что в десятичном эквиваленте будет 0.04 (четыре сотых доли) секунды.
Если частота видео равна 12 fps, то время задержки каждого кадра составляет 0.08 секунды (округленно до сотых долей).
Так вот, GIF – совсем не такой. В этом формате любой кадр имеет свою собственную длительность! То есть, например, можно сделать анимашку из трех кадров, в которой первый кадр будет задержан на 0.04 секунды, второй – на 0.08 секунды, а третий и вовсе на все 10 секунд!
Однако многие аниматоры об этом даже не догадываются, поскольку большинство анимационных программ (из тех, что не заточены специально под GIF-анимацию) при экспорте в GIF просто-напросто автоматически переводят fps проекта в соответствующую задержку для каждого кадра.
И хотя в большинстве случаев такой подход вполне справляется с поставленной задачей, но всё-таки не стоит забывать об индивидуальной длительности кадров. Это очень полезное свойство, помогающее сократить объем файла, что всегда важно для веб-графики.
Поясню на простом примере:
В видео «застывшие» моменты передаются повторением нескольких одинаковых кадров. В гифе же для этого можно обойтись всего лишь одним кадром, с увеличенной задержкой. Эта анимашка сделана при условной скорости 10 fps, то есть задержка кадров составляет 0.10 сек., но не всех. За счет увеличенной задержки некоторых кадров, цикл длительностью 3.4 секунды занимает не 34 кадра, а 18 – а ведь это почти двойная экономия!
Скорость проигрывания в разных браузерах
На практике это выглядит так: вы делаете гиф-анимашку в каком-нибудь редакторе, подгоняете тайминг, добавляете-убавляете промежуточные кадры – в итоге в конце концов всё выглядит классно и здорово, вы размещаете анимашку в интернете, и вдруг начинается катавасия – у одних пользователей ваша анимашка проигрывается очень медленно, а у других – наоборот, слишком быстро! А происходит это вот из-за чего – помните, в начале статьи я написал о том, что GIF мы всегда смотрим какой-то программой? Так вот – вы то в процессе изготовления просматривали свою гифку анимационным редактором – программой, для которой мультики это «самое главное в жизни», но зрители из Интернета смотрят вашу анимашку браузерами! А любой браузер предназначен, прежде всего, для обработки и вывода гипертекстовой разметки, и гифка для него – это всего лишь один из прочих элементов веб-страницы. Поэтому разработчики браузеров не особенно заботятся о такой незначительной (на их взгляд) вещи, как правильное отображение паузы гифа.
Хотя, если пауза составляет дольше, чем 0.10 сек, то все браузеры справляются с ней довольно таки одинаково. Почему именно 0.10 является пороговым значением? Да просто так уж исторически сложилось из-за всякой там древней совместимости с Netscape 2.0, и бороться с этим мы не в силах. Довольно долгое время вообще ни один браузер не мог проигрывать задержку короче 0.10 сек. – и, хотя сейчас некоторые из них всё-таки «научились» этому – как видите, проблему это не решило, а даже наоборот, несколько усложнило.
4. Цвета, палитры, и эффекты
Каждый GIF-файл хранит в себе свою собственную палитру – таблицу цифр, обозначающих цвета, из которых строится кадр (то есть при прорисовке каждого пикселя, программа назначает ему цвет по номеру (индексу), который указан для него в таблице). Анимированный GIF может содержать либо одну глобальную палитру – для всех кадров сразу, либо же несколько отдельных, локальных палитр – по одной на каждый кадр. Для большинства случаев, глобальная палитра подходит лучше локальных – во-первых, места меньше занимает, а во-вторых, это гарантия того, что цвета будут одинаковы на всем протяжении анимации (не будет нежелательного мерцания). Палитра GIF устроена таким образом, что не может одновременно хранить в себе больше чем 256 индексов.
Как создавать палитру GIF, откуда она берется? Не волнуйтесь, создавать палитру вручную вам вовсе не обязательно – большинство программ просто генерируют ее автоматически из ваших рисунков, или из импортированных картинок. Более продвинутые редакторы предоставляют дополнительные возможности управления – например, импорт/экспорт палитр, или добавление/удаление выборочных цветов вручную.
Путаница с «веб-безопасной» палитрой
Довольно часто возникает путаница палитры GIF с палитрой «веб-безопасных» цветов, поэтому стоит немного остановиться на этом поподробнее. Давным-давно, на заре Интернета, в эпоху 8-битных мониторов, возникла необходимость определить некий стандартный набор цветов, которые выглядели бы максимально одинаково в разных браузерах и на разных мониторах. Так была рассчитана палитра, состоящая из 216 цветов, названных «безопасными». На основе этих цветов дизайнеры старались разрабатывать элементы и фоны веб-страниц. В ту же эпоху возник и формат GIF, и вполне логично, что «безопасную» палитру часто использовали как палитру для картинок этого формата. Но палитра GIF – это вовсе не то же самое, что «веб-безопасная» палитра (которая состоит из четко определенных цветов). GIF может содержать не более 256 цветов в одном кадре, но это могут быть любые цвета из более чем 16 миллионов. К слову сказать, «безопасная» палитра уже давно утратила свою актуальность, ведь нынче даже мобильные телефоны оснащены 16-битными дисплеями. Хотя и по сей день некоторые программы при экспорте в GIF настойчиво предлагают выбрать палитру «Web 216»…
Один из цветов палитры GIF может быть объявлен полностью прозрачным – в таком случае сквозь пиксели этого цвета будет виден находящийся под ними фон. Частичная прозрачность цветов («полупрозрачность», или «альфа-канал») форматом GIF не поддерживается. Пожалуй, здесь стоит немного отвлечься, и сказать пару слов о том, что такое вообще альфа-канал.
Существует несколько ошибочное мнение, что «альфа-канал» это и есть «прозрачность». Это не совсем так. Альфа-канал это не сама прозрачность, это ее значение (величина). Проведем аналогию с форматом PNG. В нём цвет каждого пикселя составляется из значений трех цветовых каналов – красного (Red), зеленого (Green), и синего (Blue) – это называется «Цветовая модель RGB». К этим трем каналам можно добавить еще один, содержащий значение прозрачности пикселя – это и есть Альфа-канал (такая разновидность модели RGB имеет название RGBA). Значение альфы «0» означает, что пиксель полностью прозрачен, то есть совсем невидимый. Альфа «255», в свою очередь, означает полностью непрозрачный пиксель. Промежуточные значения определяют, насколько из-под цвета RGB будет «просвечиваться» находящийся за ним фон. Так вот, в GIF ничего подобного нет – там дела обстоят по-другому. При прорисовке кадра, когда программа встречает цвет, объявленный прозрачным – она просто пропускает его, и берет значение цвета из предыдущего кадра.
Сглаживание краев (anti-aliasing)
Давайте попробуем ответить на вопрос: что собой представляет сглаживание краев, что оно делает? Казалось бы, ответ очевиден – ну конечно же, оно сглаживает края! Но как именно? Посмотрите на следующую иллюстрацию. Это одна и та же картинка, представленная в двух вариантах – без сглаживания и со сглаживанием:
Несглаженная картинка слева состоит всего лишь из двух цветов – черного и белого. На первый взгляд может показаться, что сглаженная картинка тоже состоит из двух цветов, но это не так. Давайте-ка рассмотрим ее поближе:
Посмотрите, сколько переходных оттенков создало сглаживание! Благодаря этому эффекту, теперь наша картинка состоит не из двух, а из 102 цветов, и это не шутка! А ведь это всего лишь сглаживание между двумя цветами, что же делать, когда наша картинка будет состоять из более сложных комбинаций цветов? Ведь каждый оттенок должен быть занесен в палитру, а там количество «посадочных мест» весьма ограничено – 256, и не больше… А вот так вот, ничего не поделаешь – как ни крути, а формат GIF штука древняя, и разрабатывался он в те времена, когда страшно было даже представить, что когда-нибудь появятся мониторы, способные воспроизводить более 256 цветов одновременно! Свят, свят, свят…
Впрочем, всё не так уж плохо – всё-таки веб-графика это веб-графика, и сногсшибательное качество ей ни к чему. К тому же, есть такая хитрая технология перемешивания разноцветных пикселей, благодаря которой картинки, состоящие из весьма скромного количества цветов, могут выглядеть довольно качественно. Называется эта технология «дитеринг» (или «дизеринг»), и сейчас мы поговорим о ней поподробнее.
Дитеринг (dithering, дизеринг)
Дитеринг в GIF – это довольно сложный эффект, общий смысл которого сводится к тому, что компьютер смешивает пиксели разных цветов, составляя из них «шум», имитирующий промежуточные оттенки. Например, имея только два цвета, красный и желтый, можно путем их перемешивания в разных пропорциях создать имитацию различных оттенков оранжевого цвета.
Графические и анимационные программы предлагают на выбор различные алгоритмы дитеринга (Floyd-Steinberg, Pattern, Random, Diffusion, Nearest Color, и т.д. и т.п.). Какой из них лучше или хуже – сказать невозможно, потому что всё зависит от каждого конкретного случая, и оптимальное качество обычно подбирается опытным путем. В общих чертах можно сказать, что чем больше цветов в палитре, тем больше шумовых комбинаций можно из них составить, и тем лучше будет выглядеть результат дитеринга. И наоборот, если палитра вашей анимашки содержит небольшое количество цветов, то зачастую лучше дитеринг вовсе отключить, поскольку в такой ситуации он будет лишь мешать, создавая некрасивые разбросанные точки. Учтите, что в некоторых программах дитеринг по умолчанию включен, и чтобы его отключить, иногда приходится покопаться довольно глубоко в настройках.
Стоит также сказать, что применение дитеринга может здорово увеличивать размер файла, за счет того, что неоднородно закрашенные области хуже поддаются компрессии, чем однотонные. И вот мы плавно подошли к еще одному важному аспекту создания GIF-анимашек – оптимизации.
Посмотрите на следующий пример:
Никаких явных отличий между этими двумя картинками нет. Между тем, та, что слева, имеет объем 149.1 килобайт, а та, что справа – всего лишь 6.6 килобайт, то есть за счет оптимизации размер файла был сокращен более чем в 22 раза!
Многие программы предоставляют различные средства оптимизации – ручные и автоматические, но чтобы ими правильно пользоваться, нужно знать принципы их работы. Мы не будем здесь подробно рассматривать каждый возможный прием оптимизации – такая обширная тема требует отдельной статьи. Собственно, такие статьи в Сети уже имеются, и довольно много, а у нас тут и так материал вышел уже объемистый, поэтому ограничимся пониманием только самых важных основ.
Сокращение количества кадров
Чем меньше количество кадров – тем меньше объем файла. Самой распространенной ошибкой новичков является повторение нескольких одинаковых кадров подряд. В GIF-анимации никогда не должно быть такого повторения – вместо этого нужно ставить один кадр с увеличенной задержкой.
Сокращение количества цветов
Чем меньше цветов – тем меньше объем файла. Помните, что многие эффекты, такие как сглаживание, размытие, и градиенты, создают множество дополнительных цветов, поэтому используйте их с осторожностью.
Кроме того, как уже упоминалось выше, однотонные области картинки лучше поддаются компрессии, поэтому, чем больше на рисунке таких областей (в сравнении с «пестрыми» областями) – тем лучше для оптимизации.
В тех случаях, когда это возможно, стоит учитывать еще одну хитрость – горизонтальные линии занимают гораздо меньший объем памяти, чем вертикальные (это тоже особенность компрессии гифа).
Никогда не стоит злоупотреблять большими разрешениями картинки, если речь идет об анимированном гифе. Всегда старайтесь найти оптимальную ширину и высоту, ведь веб-анимашки вовсе не должны занимать целый экран монитора.
Обрезка неподвижных частей картинки
Большинство видео форматов имеют все кадры одинакового размера, и при показе очередного кадра он полностью замещает собой предыдущий. Но GIF хитер – он может как бы содержать в себе кадры разного размера, и показывать новый кадр, накладывая его поверх предыдущего. Таким образом, если на вашей анимашке есть большие неподвижные участки, то их можно показать только в первом кадре, а в остальных обрезать – такая возможность предоставляется в некоторых GIF-редакторах. Например, маленький прыгающий мячик на фоне большой неподвижной стены:
6. Программы для работы с GIF
Для работы с GIF-анимашками служат специализированные программы – GIF-редакторы. Как правило, они имеют небольшой размер, и продаются по недорогой цене. Здесь искушенный читатель может воскликнуть: «Зачем мне нужен какой-то небольшой GIF-редактор, когда у меня уже установлена крутая анимационная программа, которая может экспортировать в любые форматы, в том числе и GIF!». Нет, с этим никто не спорит – конечно, ни один GIF редактор не сравнится своими возможностями создания графики с мощными анимационными программами. Но дело в том, что мощные программы экспорт в GIF поддерживают лишь «постольку поскольку», не располагая инструментами подробного управления выходным файлом. Поэтому уважающий себя (и других) аниматор всё-таки обязательно должен иметь в своем арсенале GIF-редактор.
Самый оптимальный способ изготовления GIF-анимашек выглядит так: вначале анимация создается в какой-нибудь серьезной анимационной программе (2D или 3D), а затем экспортируется в серию картинок (секвенцию), и дорабатывается в GIF-редакторе.
GIF-редакторы представлены в огромном ассортименте, и здорово различаются набором функций и инструментов. Какой из них лучше? Да все по-своему хороши! Одни из них имеют уклон на инструменты рисования, другие – на работу с импортированной графикой, третьи – на средства оптимизации, и так далее. Выбирая себе GIF-редактор, нужно исходить, прежде всего, из своих собственных нужд и предпочтений.
7. Перспективы на будущее
Другой альтернативой могли бы стать различные видео-форматы, но встраивание их в браузеры является на порядок более сложным процессом, чем работа с анимашками-картинками, и к тому же развитие этого направления сопряжено с проблемами, связанными с проприетарностью видео форматов.
Вобщем, несмотря на все недостатки формата GIF, в области веб-анимашек ему равных нет, и в ближайшее время не предвидится. Ведь кроме недостатков, этот формат имеет и явные достоинства: простота использования, поддержка браузерами, малый объем занимаемой памяти (при надлежащем подходе), и бесплатность. Так что, если хотите сделать себе уникальную анимированную аватарку, послать друзьям анимированную открытку электронным письмом, или вставлять анимашки в сообщения на форумах – придется любить и жаловать GIF еще долго!
8. Любопытные факты
• Создатели формата GIF произносили его название как «джиф», но произношение «гиф» тоже получило широкое распространение, и поэтому два влиятельных словаря – Oxford English Dictionary и American Heritage Dictionary, признали оба варианта произношения правильными.
• Было время (до появления формата JPG), когда GIF являлся самым популярным форматом хранения фотографий в Интернете.
• Изначально GIF был платным форматом – то есть, например, для того, чтобы сделать программу для работы с ним, нужно было покупать дорогую лицензию. Сейчас сроки действия всех патентов на GIF истекли, и формат является бесплатным для всех. Но именно платность гифа в свое время подстегнула развитие формата PNG, как бесплатной и лучшей альтернативы.
• Палитра формата PNG может содержать гораздо больше цветов, чем гифовские 256, но она тоже не безразмерна, и имеет своё ограничение – оно составляет 281 474 977 000 000 цветов.
Подробнее о дитеринге и его алгоритмах (Wikipedia, English): http://en.wikipedia.org/wiki/Ditheri. age_processing
За помощь в подготовке статьи, хочу поблагодарить наших форумчан: