Оптимизация GIF — настройте палитру, дизеринг и кадры вручную

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

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

Сокращайте цвета и удаляйте кадры постепенно, проверяя результат в предпросмотре «после» и останавливаясь до появления артефактов. Логотип терпит крошечную палитру в 32 цвета без дизеринга; видеоролику нужно больше цветов и дизеринг Флойда–Стейнберга, чтобы оставаться плавным. Вид «до/после» подскажет, какой порог выдержит каждый GIF.

Фокус в том, что потеря качества неравномерна — плоские цветовые полосы ломаются первыми, поэтому давите на палитру, пока не покажутся полосы, и отступайте на шаг назад. Удаление каждого второго кадра вдвое уменьшает файл, но может заставить быстрое движение дёргаться, так что прореживайте частоту кадров лишь до тех пор, пока цикл читается. Поскольку каждый рычаг отдельный, можно сохранить богатую палитру и вместо неё урезать FPS — или наоборот, подстраиваясь под то, что нужно ролику.

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

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

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

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