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

Вне зависимости каким образом вы получили GIF-анимацию, вы можете уменьшить её размер.

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

Все примеры будут основаны на коротком клипе FullHD видео 16 секунд и 30 кадров в секунду.

Немного теории о GIF

Вкратце: GIF - это максимум 256 цветов (8 бит) + сжатие без потерь (LZW).
Как и любое сжатие без потерь - оно не слишком сжимает файл. В итоге - мы уменьшим размер не более чем на 50% (очень сильно зависит от картинки).

Тестовое видео:

Считаем размер одного кадра: 1920 * 1080 * 40%-100% = 0.8-2 мб.

А теперь посчитаем для 16 секунд видео: 16 сек * 30 кадров в секунду * (0.8-2) мб = 384-960 мб!
Наш исходный файл при преобразовании получился 309мб. Меньше расчетного, но тоже большой.
Удивились? А ведь размер исходного видео всего несколько мегабайт! Как такое может?
А просто: GIF - это мамонт, да, он классный, но с ним надо уметь работать.

Шаг 1. Уменьшить GIF. Размер изображения

Обязательно уменьшите размер до адекватного (не более 640 пикселей по большей стороне).
В этом случае размер будет: 640 * 360 * 40%-100% = 90-225 кб.
И размер видео: 16 сек * 30 кадров * 90-225 кб = 42-105 мб.
Наш исходный файл при преобразовании получился 38мб. Меньше расчетного, но тоже большой.
Много? Да. Идем дальше...

Шаг 2. Количество кадров

30 кадров - это круто, но к сожалению для GIF - это очень много.
Уменьшите количество до 10 кадров и вы сократите размер в 3! раза.
Считаем: 16 сек * 10 кадров * 90-255кб = 14-35 мб.

Наш исходный файл при преобразовании получился 14.5 мб. Уже лучше.

Например, если у вас видео 60 кадров в секунду - вы можете уменьшить из ряда: 1, 2, 3, 4, 5, 6, 10, 15, 20, 30.
А если 25 кадров, то ряд будет: 1, 5...
Или 30: 1, 2, 3, 6, 10, 15.

Шаг 3. Уменьшайте длительность анимации

Сокращайте/удаляйте не нужные вам сцены, здесь зависимость простая - сократили в 2 раза - получили размер в 2 раза меньший.

Шаг 4. Оптимизировать GIF. Выбор качества.

Есть специальные утилиты, для сжатия GIF-анимаций, например, GIFsicle .

Специально для вас мы сделали её онлайн . Просто выберите ваш файл и нажмите оптимизировать.

Так же вы можете управлять качеством файла.

Для вас мы сделали три разные версии GIF-анимации для оценки сжатия с помощью уменьшения качества:

• Размер при 100% качества: 13.3 мб
• Размер при 50% качества: 13.3 мб
• Размер при 0% качества: 10.1 мб

У нас в 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 представляет собой последовательность кадров, а не отдельную картинку, изменять размер файлов в таком формате непросто: понадобится продвинутый графический редактор. Самыми популярными на сегодняшний день являются Adobe Photoshop и его свободный аналог GIMP – на их примере мы покажем вам эту процедуру.

Способ 1: GIMP

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

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



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



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



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



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



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

   

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



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



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



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

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

Способ 2: Adobe Photoshop

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

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



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



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



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



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



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

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

7. Проверьте результат в указанной папке при сохранении папке.

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

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

Правда, есть маленький нюанс. Время от времени дизайнеры сталкиваются с необходимостью изменить размеры GIF . Кому-то его нужно уменьшить, другие нуждаются в увеличении. Как отредактировать такой контент? Например, обрезать его или сжать? Был бы у вас обычный файл jpeg , таких бы вопросов не возникало. Сжимайте его в графическом редакторе, даже не имея специальных знаний. Всего пара щелчков мышью – и работа выполнена на «отлично».

Как отредактировать ГИФ

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

GIF Resizer

Уникальный во всех смыслах редактор, позволяющий менять размеры «гифок» всего в несколько кликов. Для этого необходимо выполнить элементарные действия:

• Запустить программу.
• Найти в меню кнопку «Изменения размера» и нажать её.
• Нажав кнопку «Обзор», выбрать интересующий вас файл.
• Ввести требуемые параметры (длина и ширина).
• Нажать «Применить» и подождать несколько секунд.
• Готово – размеры анимированного контента стали такими, как ожидалось.

Интерфейс GIF Resizer

Кроме того, посредством GIF Resizer можно решить такие задачи:

• Изменить формат.
• Убрать логотип с анимашки.
• Уменьшить/увеличить размеры анимированного изображения.
• Конвертировать GIF в JPG , разложить на отдельные кадры.
• Перевести в PNG.

Останавливаться на этом функционале мы не будем, ведь нас с вами интересует исключительно сжатие анимаций в формате ГИФ. Просто знайте, что столкнувшись с разнообразными задачами по редактуре animation , есть смысл воспользоваться Resizer .

Ezgif

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

Как пользоваться Ezgif ? Откройте главную страницу сервиса, нажмите «Обзор». Когда файл выбран, остаётся только нажать Upload . Различные варианты сжатия станут доступны после загрузки. Самый оптимальный вариант в соотношении размер/качество – Medium .

GIF Compressor

По-своему интересна программа GIF Compressor . Она умеет сжимать анимацию всего за 2 простых сжатия. Можно делать это сразу с несколькими файлами. Максимальный размер гиф-файла – 50 Мб.

Какое из приложений вам понравилось больше всего?

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

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

Shrink O’Matic

Это простая программ для Windows для оптимизации gif изображений. Она способна и на простейшие действия с изображениями, такие как поворот, изменение размера, изменение названия файла и его месторасположения, пакетная обработка. Доступные форматы для обработки: GIF, JPEG, PNG.

ImageOptim

Эта программа работает на платформе Mac. Она предназначена для сжатия gif до 60-80% и выше без потери качества.

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

Другие поддерживаемые форматы: JPEG, PNG, SWF, TIFF, BMP, ICO

Работает на платформах: Windows, Mac OS, Linux

FILEminimizer Pictures

Компрессия изображения достигает 98% и выше в результате собственных оптимизационных технологий.Различают 4 уровня сжатия gif-файлов. Кроме того, программа позволяет загружать картинки напрямую в facebook.

Форматы: JPG, BMP, TIFF, PNG, EMF | Платформа: Windows

RIOT

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

GIF Optimizer

Простая программа для оптимизации gif-анимации. Программа имеет всего три кнопки — open — открыть файл, optimize — оптимизировать и Save as — сохранить как. Вы можете управлять сжатием через меню Setting (настройки).