Оптимизация размера JSON-файла

Lottie Web использует JSON-описание анимации, где каждая трансформация, ключевой кадр и векторная кривая сериализуются в структуру данных. Основной вклад в размер файла дают:

  • координаты контуров (paths) с высокой точностью
  • избыточное количество ключевых кадров
  • неупрощённые векторные формы из графических редакторов
  • дублирование свойств между слоями
  • встроенные изображения и base64-ресурсы
  • метаданные экспорта

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

Снижение точности чисел в ключевых данных

Большая часть JSON-файла состоит из числовых значений: координат, временных меток, параметров трансформаций. После экспорта значения часто имеют избыточную точность:

"x": 120.00000000003,
"y": 540.99999999987

Оптимизация заключается в округлении значений до минимально достаточной точности:

  • координаты: 1–2 знака после запятой
  • opacity: целые числа или один знак после запятой
  • временные значения: без дробной избыточности

Снижение точности уменьшает размер JSON без визуально заметных изменений, особенно при веб-воспроизведении.

Удаление избыточных ключевых кадров

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

Типичные случаи удаления:

  • линейные движения, описанные множеством промежуточных ключей
  • статические участки с повторяющимися значениями
  • плавные кривые, заменяемые Bezier-интерполяцией

Сокращение keyframes приводит к уменьшению массивов вида:

"ks": {
  "p": {
    "k": [
      {"t": 0, "s": [0,0]},
      {"t": 1, "s": [10,10]},
      {"t": 2, "s": [20,20]}
    ]
  }
}

до минимально необходимых точек начала и конца.

Упрощение векторных контуров

Paths являются наиболее тяжёлой частью JSON. После экспорта из Adobe After Effects или аналогичных редакторов контуры часто содержат чрезмерное количество вершин.

Методы оптимизации:

  • упрощение Bezier-кривых
  • уменьшение количества точек сегментов
  • удаление микроскопических изгибов
  • объединение близких точек

Чрезмерно детализированные кривые могут увеличивать файл в несколько раз без улучшения визуального качества на экране.

Сведение слоёв и устранение дублирования

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

  • идентичные эффекты на нескольких слоях
  • дублирующиеся маски
  • одинаковые transform-параметры

Слияние слоёв позволяет:

  • уменьшить количество объектов JSON
  • устранить повторяющиеся блоки ks
  • сократить структуру layers[]

Особенно эффективно при группах декоративных элементов.

Оптимизация изображений и растровых ресурсов

Встроенные изображения в Lottie могут храниться как:

  • base64 строки
  • ссылки на внешние ресурсы

Base64 существенно увеличивает размер файла. Для оптимизации применяется:

  • вынесение изображений в отдельные файлы
  • переход на внешние CDN-ресурсы
  • замена растровых элементов векторными аналогами

Удаление base64-данных часто даёт наибольший выигрыш по размеру.

Удаление скрытых и неиспользуемых элементов

Экспортированные сцены часто содержат:

  • отключённые слои (visibility = false)
  • тестовые элементы
  • резервные композиции
  • неиспользуемые эффекты

Их присутствие увеличивает JSON без влияния на результат. Очистка включает:

  • удаление скрытых layers
  • устранение orphan keyframes
  • удаление неиспользуемых assets

Минификация JSON-структуры

После структурной оптимизации применяется текстовая минификация:

  • удаление пробелов и переносов строк
  • сокращение ключей (где допустимо)
  • агрегация повторяющихся структур

Минифицированный JSON:

{"v":"5.7.4","fr":30,"ip":0,"op":60,"w":500,"h":500}

по сравнению с форматированным вариантом может занимать на 20–40% меньше места.

Использование gzip и Brotli на стороне доставки

Даже после оптимизации структуры JSON остаётся текстовым форматом, хорошо сжимаемым алгоритмами:

  • gzip снижает размер на 60–80%
  • Brotli обеспечивает ещё более высокую степень сжатия

Для Lottie-анимаций в веб-среде включение серверного сжатия часто эффективнее всех микроправок в JSON.

Оптимизация выражений и эффектов

Expression-based свойства и эффекты After Effects могут значительно раздувать JSON:

  • сложные математические выражения
  • дублирующиеся эффекты
  • неразрешённые ссылки на параметры

Упрощение включает:

  • запекание (baking) выражений в ключевые кадры
  • удаление избыточных эффектов
  • замена процедурной анимации на статические ключи

Контроль precision при экспорте из редакторов

Генераторы Lottie часто имеют параметры экспорта:

  • precision (точность чисел)
  • sampling rate (частота семплирования)
  • curve tolerance (допуск кривых)

Снижение precision до оптимального уровня уменьшает размер без визуальных потерь. Особенно критично при экспортировании сложных motion-дизайнов.

Оптимизация структуры assets и референсов

JSON Lottie использует массив assets, где хранятся:

  • изображения
  • вложенные композиции
  • предустановленные элементы

Частые проблемы:

  • дублирование одинаковых assets
  • неиспользуемые ресурсы
  • избыточные идентификаторы

Сведение ресурсов к минимальному набору снижает общий вес структуры и ускоряет парсинг.

Преобразование сложных сцен в упрощённые композиции

Сложные сцены с большим количеством взаимодействующих слоёв часто заменяются:

  • предрендеренными анимациями
  • объединёнными композициями
  • статическими кадрами с минимальной анимацией

Это снижает не только размер JSON, но и вычислительную нагрузку при рендеринге в Lottie Web.

Баланс между качеством и размером

Оптимизация JSON-файла требует сохранения баланса:

  • чрезмерное упрощение приводит к визуальным артефактам
  • недостаточная оптимизация увеличивает нагрузку на сеть и парсер
  • сложные сцены требуют индивидуального подхода к каждому слою

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

Оглавление