Как изменить размер gif анимации. Как уменьшить объём файла анимации GIF в Photoshop

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

В конце концов люди начали спрашивать нас: «Как вы создаете GIF анимации?». Пришло время раскрыть секрет.

Дизайн GIF изображений

1. Секретный ингредиент

Вот мой небольшой секрет: все мои GIF анимации сначала были видео-файлами. Обычно я использую ScreenFlow , который я кстати также применяю для создания видео наших продуктов. Это простая программа, которая в то же время содержит множество полезных анимационных инструментов.
После того как я сохраняю анимацию как видео файл, я импортирую его в Photoshop через File > Import > Video Frames As Layers.

Совет: Если ScreenFlow или After Effects вам не по карману, то создайте анимацию в Keynote, и экспортируйте ее как видео. Наконец-то, хоть какое-то применение этой функции в Keynote.

2. Меньше цветов = больше веселья

Если вы хотите делать крутые GIF анимации, то нужно с особым трепетом подойти к выбору цвета. Это повлияет не только на размер файла, но и позволит создать более продолжительные анимации с маленьким размером файла. (Для меня маленький - это менее 1MB)

3. Используйте размытие в движении (motion blur), если возможно

Такие программы как ScreenFlow и After Effects позволяют экспортировать видео с применением размытия в движении. Это не только придаст вашей анимации профессиональный вид, но и упростит процесс уменьшения размера файла в Photoshop.

4. Будьте (отчасти) ленивыми

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

Экспорт GIF анимаций

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

5. Удалите кадры-дубликаты

Скорее всего ваша анимация останавливается или остается неподвижной на какой-то момент времени. Присмотревшись, можно заметить, что этот момет состоит из нескольких одинаковых кадров. Если таких кадров 10 штук, то удалите 9 из них и установите длительность оставшегося кадра на, например, 1 секунду.

Если это не поможет, попробуйте заново импортировать видео, но на этот раз выберите параметр Limit To Every 2 Frames. Это должно значительно уменьшить размер файла.

Совет: Если ваша анимация состоит из более 150 кадров, то возникнут проблемы при попытках уменьшить размер файла.

6. Меньше цветов

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

7. Измените параметр Lossy* (потери)

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

*«Потери» (Lossy) - допустимый уровень потери графической информации в растровом файле, позволяющий уменьшить файловый размер изображения

Ничего не изменилось! Помогите!

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

От переводчика. Со всеми пожеланиями и замечаниями по поводу перевода прошу обращаться ко мне в личку. Спасибо!

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

Как уменьшить размер файла GIF

На сегодняшний день изменение файлов GIF стало потенциальной проблемой для пользователей персональных компьютеров, многие из них считают, что это займет большое количество времени, на самом деле это не так. Вашему вниманию предоставляются два приложения: всем известный Adobe Photoshop и GIMP, который, в отличие от первого, бесплатно распространяется в Интернете.

Способ первый: с помощью программы GIMP

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

Откройте приложение и нажмите на кнопку «Файл».
В появившемся меню кликните по строке «Открыть».
Появится файловый менеджер программы. В нем вам необходимо перейти в директорию, в которой лежит GIF-изображение, выделить его и нажать по кнопке "Открыть".
Сразу после этого картинка будет загружена в программу. Нажмите по кнопке "Изображение", которая находится на верхней панели. Из выпадающего меню выберите пункт "Режим".
Появится дополнительное меню, в котором вам надо выбрать режим отображения изображения. Выбирайте RGB.
Теперь нажмите по кнопке "Фильтр". В открывшемся списке опций выберите "Анимация" и "Разоптимизировать".
После этого появится новая вкладка в программе. Теперь все действия будут проводиться в ней.
Опять кликните по кнопке "Изображение", только теперь выберите пункт "Размер".
Откроется окно с параметрами размера изображения. В нем вам необходимо задать желаемые значения в полях "Высота" и "Ширина".
Сделав это, нажмите кнопку "Изменить".

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

Нажмите по кнопке "Файл".
В появившемся меню выберите опцию "Экспортировать как".
Откроется уже знакомое окно файлового менеджера. В этот раз в нем необходимо перейти в папку, в которую вы желаете сохранить картинку.
Сделав это, в выпадающем меню "Выберите тип файла" найдите пункт "Изображение GIF".
Перепроверьте все заданные параметры и нажмите кнопку "Экспортировать".
Появится окно, в котором необходимо поставить отметку напротив пункта "Сохранить как анимацию".
Нажмите "Экспорт".

Это первый способ, как уменьшить размер GIF-анимации. Теперь перейдем непосредственно ко второму.

Способ второй: с помощью программы Adobe Photoshop

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

Запустите приложение, затем нажмите кнопку «Окно». Следующий шаг - нажмите меню «Рабочая среда» и поставьте галочку напротив пункта «Движение».
Затем выберите файл, масштаб которого вам требуется изменить. Для этого нажмите «Файл», затем «Открыть».
Откроется «Проводник». Выберите папку, в которой ваше изображение, затем вам надо выделить его мышкой и нажать кнопку «Открыть».
Для того чтобы уменьшить размер GIF, воспользуйтесь пунктом «Изображение», в котором выберите вариант «Размер изображения».
Перед вами будет окно коррекции высоты и ширины. Проконтролируйте, чтобы размеры были установлены в положении «Пиксели». Далее в поля «Высота» и «Ширина» необходимо ввести значения, которые вам требуются, остальные настройки остаются в прежнем положении.
Проверьте настройки и жмите «ОК».
Чтобы результат сохранился, жмите на пункт «Файл».
В нем нажимайте на вариант «Экспортировать» затем — «Экспортировать для Web (старая версия)…».
Настройки этого окна также остаются неизменны. После нажмите «Сохранить».
В «Проводнике» будет ваш GIF-файл, который вы изменили. Если есть необходимость переименовать его, то правой кнопкой мыши кликните по файлу. Перед вами будет таблица с вариантами, жмите «Переименовать», после «Сохранить».
Также не забудьте проверить результат проделанной вами работы перед сохранением.

У программы Adobe Photoshop, несмотря на ее удобство и простоту, имеются недостатки: она имеет платный контент, а срок действия истекает за малое количество времени.

Уменьшать размеры GIF-анимации не так сложно и кропотливо, но отличие от обычных картинок все же имеется.

В конце концов люди начали спрашивать нас: «Как вы создаете GIF анимации?». Пришло время раскрыть секрет.

Дизайн GIF изображений

1. Секретный ингредиент

Совет: Если ScreenFlow или After Effects вам не по карману, то создайте анимацию в Keynote, и экспортируйте ее как видео. Наконец-то, хоть какое-то применение этой функции в Keynote.

2. Меньше цветов = больше веселья

3. Используйте размытие в движении (motion blur), если возможно

4. Будьте (отчасти) ленивыми

Экспорт GIF анимаций

5. Удалите кадры-дубликаты

Совет: Если ваша анимация состоит из более 150 кадров, то возникнут проблемы при попытках уменьшить размер файла.

6. Меньше цветов

7. Измените параметр Lossy* (потери)

Ничего не изменилось! Помогите!

В официальных русскоязычных версиях Photoshop с незапамятных времён опция "Dithering" переводится как "Дизеринг", что является, мягко говоря, неточностью. В данном контексте "Dithering" означает "сглаживание", сглаживание переходов от одного цвета к другому.
Поскольку GIF-файлы содержат ограниченное количество цветов, для улучшения вида рисунка может понадобиться создание переходов между отдельными цветами, а для этого нужно имитировать недостающие цвета. Для создания этих цветов и существует опция "Дизеринг". Всего имеется четыре алгоритма для подобной имитации сглаживания - "Без дизеринга", "Случайное", "Регулярный" и "Шум":

Рассмотрим алгоритмы подробнее (надеюсь, с режимом "Без дизеринга" всё понятно).

Используя алгоритм "Случайное" (Diffusion), мы, можем регулировать количество сглаживания.
В алгоритмах "Регулярный" (Pattern) и "Шум" (Noise) настройки отсутствуют, Photoshop всё делает автоматически.

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

4. Другие настройки

"Потери" (Lossy) - управление уровнем потерь визуальной информации при сглаживании, которые могут уменьшить размер файла, но также и ухудшить качество картинки. Доступна при отключенной опции "Чересстрочно" (Interlaced).

"Прозрачность" (Transparency) - имеет смысл включить в том случае, если изображение содержит прозрачные участки. Алгоритмы сглаживания работают по принципу опции "Дизеринг" (Dithering) и называются так же.

5. Сравнение исходной и оптимизированной версий

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

Вы можете просмотреть анимацию, а также задать параметры повторов - один раз, постоянно или задать собственное количество повторов:

Если результат Вас удовлетворил, переходите к следующему действию - сохранению анимации.

6. Подогнать оптимизацию анимации под указанный объём файла

Такая опция тоже имеется при сохранении анимации в Photoshop. Вы можете задать размер выходного файла, и исходя из этого Photoshop сам произведёт оптимизацию, подогнав размер файла под указанный Вами.

Нажимаем на кнопку в правом верхнем углу и выбираем строку "Оптимизировать по размеру файла" (Optimize to File Size)

7. Предварительный просмотр анимации в браузере, сохранение параметров оптимизации

После того, как Вы подобрали нужные настройки, сохраните их в наборе. Кликните по значку в правом верхнем углу окна сохранения для Web и нажмите на строку "Сохранить настройки":

Анимацию с нашими настройками мы можем предварительно просмотреть в браузере, нажав на кнопку в левом нижнем углу окна:

Будет показана не только анимация, но и все данные по файлу GIF - объём, линейные размеры и т.д., а также HTML-код. Для примера я взял анимацию из этого урока :

Если всё нравится, то сохраняем файл. Для этого нажимаем кнопку "Сохранить" в правом нижнем углу диалогового окна. Открывается новое окно, где выбираем путь, ставим настройки, как показано на рисунке (это настройки по умолчанию), нажимаем кнопку "Сохранить":

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

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

Поскольку GIF представляет собой последовательность кадров, а не отдельную картинку, изменять размер файлов в таком формате непросто: понадобится продвинутый графический редактор. Самыми популярными на сегодняшний день являются Adobe Photoshop и его свободный аналог GIMP – на их примере мы покажем вам эту процедуру.

Способ 1: GIMP

Свободный редактор графики отличается обширным функционалом, который мало чем уступает платному конкуренту. Среди опций программы есть и возможность изменения размера «гифок». Это делается так:

Запустите программу и выберите вкладку «Файл» , затем используйте опцию «Открыть» .

С помощью встроенного в GIMP файлового менеджера доберитесь до каталога с нужным изображением, выделите его мышкой и воспользуйтесь кнопкой «Открыть» .

Когда файл будет загружен в программу, выберите вкладку «Изображение» , затем — пункт «Режим» , в котором отметьте вариант «RGB» .

Далее зайдите во вкладку «Фильтры» , щелкните по опции «Анимация» и выберите вариант «Разоптимизировать» .

Обратите внимание, что появилось новая открытая вкладка в рабочем окне GIMP. Все последующие манипуляции следует проводить только в ней!

Снова используйте пункт «Изображение» , но на этот раз выберите опцию «Размер изображения» .

Появится всплывающее окно с настройками высоты и ширины кадров анимации. Введите нужные значение (вручную или с помощью переключателей) и нажмите на кнопку «Изменить» .

Чтобы сохранить результаты, перейдите по пунктам «Файл» – «Экспортировать как…» .

Появится окно выбора места хранения, имени и расширения файла. Проследуйте к каталогу, куда хотите сохранить изменённый файл и переименуйте его, если потребуется. Затем щёлкните «Выберите тип файла» и отметьте в появившемся списке вариант «Изображение GIF» . Проверьте настройки, после чего нажмите на кнопку «Экспортировать» .

Появится окно настроек экспорта. Обязательно отметьте пункт «Сохранить как анимацию» , остальные параметры можете оставить без изменений. Воспользуйтесь кнопкой «Экспорт» , чтобы сохранить изображение.

Проверьте результат работы – изображение уменьшилось до выбранных размеров.

Как видим, с задачей изменения размеров GIF-анимации GIMP справляется великолепно. Единственным недостатком можно назвать сложность процесса для неопытных пользователей и тормоза в работе с объёмными изображениями.

Способ 2: Adobe Photoshop

Является самым функциональным графическим редактором среди представленных на рынке. Естественно, в нём присутствует возможность изменения размеров GIF-анимаций.

Откройте программу. Первым делом выберите пункт «Окно» . В нём зайдите в меню «Рабочая среда» и активируйте пункт «Движение» .

Далее откройте файл, размеры которого хотите изменить. Для этого выберите пункты «Файл» — «Открыть» .

Запустится «Проводник» . Проследуйте к папке, в которой хранится целевое изображение, выделите его мышкой и нажмите на кнопку «Открыть» .

Анимация будет загружена в программу. Обратите внимание на панель «Шкала времени» — на ней отображены все кадры редактируемого файла.

Для изменения размера используйте пункт «Изображение» , в котором выберите вариант «Размер изображения» .

Откроется окошко настройки ширины и высоты картинки. Убедитесь, что единицы измерения установлены в положение «Пиксели» , затем введите в поля «Ширина» и «Высота» нужные вам значения. Остальные настройки можно не трогать. Проверьте параметры и нажимайте «ОК» .

Чтобы сохранить полученный результат, воспользуйтесь пунктом «Файл» , в котором выберите вариант «Экспортировать» , а далее — «Экспортировать для Web (старая версия)…» .

Настройки в этом окне тоже лучше не менять, потому сразу нажимайте на кнопку «Сохранить» внизу рабочей области утилиты экспорта.

Выберите в «Проводнике» местоположение изменённого GIF, переименуйте при необходимости и нажмите «Сохранить» .

После этого Photoshop можно закрывать.
Проверьте результат в указанной папке при сохранении папке.

Фотошоп представляет собой более быстрый и удобный способ изменения размера GIF-анимации, но недостатки тоже имеются: программа платная, а срок действия пробной версии слишком короткий.

Тематические материалы: