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

В этом уроке мы внимательно рассмотрим все доступные варианты для преобразования видео в GIF-анимацию, и как оптимизировать размер файла.

Формат GIF (Graphics Interchange Format) - формат сохранения изображений, поддерживающий до 256 цветов и в настоящее время применяется, в основном, для показа изображений на страничках сайтов интернета.

Это довольно-таки старый формат, практически вытесненный более современными, например, PNG, но, тем не менее, он используется до сих пор из-за одной свой особенности - он поддерживает анимацию.

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

Соответственно, при сохранении GIF-анимации, пользователь Photoshop должен оптимизировать анимацию так, чтобы объём готового файла минимальным при максимальном качестве.

В этом материале я дам несколько советов по уменьшению веса выходного GIF-файла с минимальными потерями качества.

1. Обрезка исходного видеоролика

Если Вы создаёте анимацию из видеоролика, то для начала его необходимо открыть в Photoshop и посмотреть его длину на панели Окно --> Шкала времени (Window --> TimeLine). Как правило, большая часть кадров ролика для анимации не нужна, поэтому нужно выбрать необходимый участок, обрезав ролик сначала и с конца:

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

2. Уменьшение линейного размера изображения

Уменьшение ширины и высоты кадра анимации существенно уменьшает объём выходного файла. Это можно сделать в последнюю очередь, в окне "Сохранить для Web" (Save for Web), но я рекомендую уменьшать размер кадра с помощью команды Изображение --> Размер изображения (Image --> Image Size), особенно, если Вы работfте с версией выше CS6, у обновлённого инструмента появилось несколько дополнительных опций, в т.ч. окно предварительного просмотра. Подробнее о новшествах команды "Размер изображения" здесь.

Подробнее о сохранении для Web здесь, подробнее об уменьшении линейного размера изображения для публикации в Web здесь.

3. Уменьшение количества кадров при сохранении продолжительности и скорости воспроизведения

Уменьшить количество кадров можно только на шкале покадровой анимации. Если Вы делаете анимацию из видео, Вы должны сначала сохранить видео как GIF, затем заново открыть его в Photoshop и преобразовать шкалу времени в покадровую анимацию:

оптимизация GIF

Внимание! Перед преобразованием запомните время продолжительности показа!

Затем вручную выделяем и удаляем, к примеру, каждый третий кадр (выделяем с зажатой Ctrl, затем нажимаем Delete).

уменьшение размера анимации

Затем выделяем все кадры на шкале (клик по первому кадру, зажать Shift, клик по последнему), клик по треугольничку в правом нижнем углу любого кадра, выбираем "Другое", откроется окно, где вводим старую продолжительность клипа делённую на новое количество кадров:

уменьшение количества кадров анимации

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

Одним из наиболее действенных способов для уменьшения объёма файла анимации, поле уменьшения линейных размеров, является уменьшение количества цветов, используемых во всех кадрах. Максимальное количество цветов в 8-ми битном GIF`е - 256.
Для начала можно уменьшить количество цветов до 64, а затем, в зависимости от результата, добавить цвета, если полученное изображение стало заметно хуже, либо уменьшить ещё, если качество визуально не ухудшилось.
Предлагаемые Photoshop`ом количества цветов - 2, 4, 8, 16, 32, 64, 128, 256. Это не обязательные значения, Вы можете самостоятельно ввести произвольное количество цветов от 2 до 256:

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

5. Отключение опции "Чересстрочно" (Interlaced)

Включенная опция "Чересстрочно" даёт указание браузеру загружать изображение за несколько проходов. И при этом увеличивает объём файла примерно на 10 процентов!
Что это значит? При медленном соединении и/или большом объёме файла полная загрузка изображения происходит медленно, т.е. пользователь после открытия веб-странички вначале лицезреет пустое место там, где должно быть изображение. Если же изображение загружается за несколько проходов, сначала подгружается "облегчённая" низкокачественная версия картинки, где рисунок состоит из крупных квадратов (низкое разрешение), и по мере подгрузки картинка приобретает свой обычный вид.

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

чересстрочность

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

Теги:

Помощь сайту

Понравился сайт? Уроки оказались полезными? Вы можете поддержать проект, просто если скачаете и установите приложение "Фонарик" для Андроид. Приложение написал автор сайта и рассчитывает в дальнейшем публиковать свои приложения. Фонарик управляет светодиодом вспышки фотокамеры телефона, а также включает подсветку экраном на полной яркости.

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

Если приложение наберёт популярность, это даст стимул автору на создание новых приложений с учётом пожеланий посетителей сайта.

Установить с Google Play.

Заранее благодарен, Дмитрий.

QR-код для установки:

Если Вам понравился материал, скажите свое "спасибо", поделитесь ссылками с друзьями в социальных сетях! Спасибо!

Похожие материалы:

Реалистичная анимация падающего снега в Photoshop
В первой части этого урока я рассказал о создании анимации движения снежинок из стороны в сторону при падении. В этом материале мы сделаем так, чтобы...
как быстро вставить изображение из интернет браузера в Photoshop
Достаточно часто для работы в Photoshop мы используем изображения, взятые из интернета. Традиционный способ копирования таких картинок в Photoshop не...
быстрая смена цвета кисти
Смена цвета инструмента "Кисть" (Brush Tool) в Photoshop задаётся с помощью изменения цвета переднего плана в цветовой панели. Кроме того, образец...
различие опций Заливка и Непрозрачность
В Photoshop, в панели слоёв, имеются две опции с , казалось бы, одинаковыми функциями - это "Заливка" (Fill) и "Непрозрачность" (Opacity). Если,к...