Почему GIF-файлы выходят из строя на этапе извлечения

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

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

Итак, последовательность действий такова: сначала определите количество кадров, затем палитру, и только потом беспокойтесь о сжатии.

Шаг 1. Выберите интервал выборки

Вопрос не в том, "сколько кадров в источнике", а в том, "сколько на самом деле нужно движению". Несколько приблизительных отправных точек:

  • 10–12 кадров в секунду  – рабочая лошадка. Достаточно плавный для жестов, демонстраций пользовательского интерфейса и большинства видеороликов с реакциями. Для источника с частотой 30 кадров в секунду это каждый третий кадр; при 60 кадрах в секунду, каждый пятый.
  • 15 кадров в секунду  — для непрерывного движения, при котором цифра 12 начинает мигать, например панорамирование камеры или подпрыгивающий объект.
  • 5–8 кадров в секунду  — для слайд-содержимого: построение диаграммы, до/после, медленное масштабирование. Часто выглядит продуманно, а не дешево.
  • 24+ кадров в секунду — редко того стоит. Размер файла увеличивается примерно вдвое по сравнению со скоростью 12 кадров в секунду, и большинство зрителей не могут этого понять по небольшому зацикленному изображению.

В Frame Extractor воспользуйтесь режимом «Частота кадров (FPS)» и введите делитель: 3 для каждого третьего кадра, 5 для каждого пятого. Количество кадров обновляется по мере ввода, и это число фактически определяет размер вашего файла.

Проверка работоспособности перед извлечением: умножает предполагаемое количество кадров примерно на 30–60 КБ. Это реалистичный пример для кадра GIF шириной 480 пикселей после уменьшения палитры. Шестьдесят кадров занимают где-то 2–3 МБ. Если это превышает ваш бюджет, обрежьте кадры сейчас — это гораздо эффективнее, чем сжимать их позже.

Шаг 2. Соблюдайте короткую продолжительность

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

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

Шаг 3. Поймите ограничение в 256 цветов

Это ограничение, которое удивляет людей, и его стоит понять, а не бороться.

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

Две стратегии, и правильная полностью зависит от контента:

  • Сглаживание рассеивает пиксели соседних цветов палитры, чтобы имитировать недостающие. Градиенты — небо, мягкое освещение, тени на лице — с ним сохраняются гораздо лучше. Ценой является видимый пятнистый узор и файл заметно большего размера, поскольку этот шум подавляет сжатие.
  • Никакого размытия дает ровные, чистые цветные области и файлы гораздо меньшего размера. Идеально подходит для записей экрана, демонстраций пользовательского интерфейса, штриховой графики и всего, что имеет большие однородные области. На фотографических градиентах он создает жёсткие полосы.

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

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

Шаг 4. Сопоставьте задержку кадра с извлеченным интервалом.

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

Арифметика проста: задержка = 100 ÷ ваш целевой кадр в секунду.

  • 12 кадров в секунду → задержка 8 (0,08 с)
  • 10 кадров в секунду → задержка 10 (0,10 с)
  • 15 кадров в секунду → задержка 7 (округление до 6,67)
  • 5 кадров в секунду → задержка 20 (0,20 с)

Две вещи, которые нужно знать. Во-первых, округление реальное: 15 кадров в секунду невозможно выразить точно, поэтому цикл слегка смещается. Если время имеет значение, выбирайте частоту 10, 12,5, 20 или 25 кадров в секунду, которая разделяется четко. Во-вторых, большинство браузеров автоматически ограничивают задержку от значения ниже 2 (0,02 с) до 10 — поэтому GIF, созданный со скоростью 50 кадров в секунду, для большинства зрителей будет воспроизводиться со скоростью 10 кадров в секунду, что в пять раз превышает размер файла и не обеспечивает плавности.

Шаг 5. Уменьшите размер в том порядке, который работает

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

  1. Уменьшите размеры. Уменьшение ширины вдвое уменьшает количество пикселей вчетверо. GIF-файл шириной 480 пикселей подходит для большинства контекстов встраивания; 800+ редко требуется.
  2. Отбрасывайте кадры. При переходе от 15 к 10 кадрам в секунду удаляется треть данных, поскольку большинство зрителей не заметят изменения.
  3. Сократите клип. Безжалостно. Почти в каждом GIF-файле есть секунда в начале или в конце, ничего не делающая.
  4. Уменьшите палитру ниже 256. 128 или даже 64 цвета часто невидимы на экране и значительно меньше.
  5. Отключить сглаживание если он у вас включен и контент выдерживает это.

Обратите внимание, что «сжимать сильнее» нет в списке. Сжатие GIF осуществляется без потерь LZW — нет шкалы качества. Все, что вы можете сделать, — это решить, какие данные включить в первую очередь.

Когда вообще не следует создавать GIF

Стоит сказать прямо, потому что это экономит много усилий:

  • Все, что длится около пяти секунд. MP4 или WebM будет меньше по размеру при лучшем качестве. Большинство платформ, которые принимают GIF-файлы, теперь в любом случае преобразуют их в видео.
  • Фотоконтент с большим количеством градиентов. 256 цветов просто недостаточно, и нет палитры хитрость исправляет это.
  • Все, что требует звука. GIF его не имеет, и цикл будет восприниматься неправильно, если в источнике есть бит.
  • Все, что превышает 800 пикселей в ширину. К тому времени штраф за размер становится настолько серьезным, что видео становится правильным ответом.

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

Работающий пример

Скажем, вам нужен GIF-изображение трехсекундное взаимодействие с пользовательским интерфейсом из записи экрана со скоростью 60 кадров в секунду, размером менее 1 МБ.

  1. Обрезать до 3,2 секунды, в которых содержится взаимодействие, причем последний кадр близок к первому.
  2. Извлечение в режиме FPS с N = 5 — каждый пятый кадр со скоростью 60 кадров в секунду дает 12 кадров в секунду, около 38 кадров. Вывод PNG.
  3. Собрать при задержке 8 сглаживание отключается (это экранный контент с плоскими цветами).
  4. Масштабировать до 600 пикселей в ширину, если источник был больше.
  5. Проверьте результат. Около 38 кадров плоского содержимого пользовательского интерфейса обычно занимают значительно меньше 1 МБ. Если нет, уменьшите палитру до 128 цветов, прежде чем трогать что-либо еще.

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