Как уменьшить вес продуктовой анимации в 400 раз (без AI)

Осталось понять, где собственно анимация-то. Вижу кучу статических объектов, положение и ориентация которых изменяются. Это за три минуты накрокодить можно.

GIF? APNG, WEBM, WEBP!

Я тоже умею показывать фокусы со сжатием:

«…текст статьи…» → «Вектор весит меньше растра!»

Четыре слова. Ни одной картинки.

Мне кажется, или уважаемые делали мов там где это не надо было?

Не побоюсь быть токсичным, но кажется тут что то на не профессиональном, из разряда "а вы знали, что если использовать не BMP, а png24, то вес файла СИЛЬНО УМЕНЬШИТСЯ"?

Это похоже на манипулирование фактами. 1) Сколько весит библиотека, которую должен инсталировать каждый пользователь что ваша анимация заиграла? 2) Приведите пример как вы создавали изначальное видео... все размеры параметры и тд... Можно новое видео смотреть на тех же устройствах ?

У вас очень примитивная анимация и её можно б было сделать вообще без библиотек, если б было желание и необходимость... Так что сомнительные выводы...

ПС Я когда-то удалял эту анимацию с сайтов, поскольку они что-то свое на сторонние сервисы шлют... Включите Google Page Speed и вы поймете что там не всё прям так радужно.

Открою секрет: видеофайлы, о которых вы говорите, не предназначены для конечного использования. Это высококачественное видео с только-ключевыми кадрами для максимального сохранения качества картинки и ускорения работы с ней в видеоредакторе, в каком-нибудь ProRes.

А видеокодеки, предназначенные для распространения, определяют векторы движения объектов для вашего случая достаточно хорошо, чтобы не нужно было тратить время на программирование.

Возьмём вашу первую, кхм… гифку размером в 3 мегабайта

На ней почти все элементы только перемещаются, и чуть-чуть появляются новые. Вот так видеокодек видит движение на этом файле:

ffmpeg -flags2 +export_mvs -i input.mp4 -crf 22 -preset slow -vf codecview=mv=pf+bf+bb -movflags faststart -y outv.mp4

Много «невидимых» объектов куда-то двигаются — это из-за шума в оригинальном «видеоряде», не видном невооруженному глазу. Применим денойзер hqdn3d с широким значением подавления. Убедимся, что по-максимуму используются «разностные» (P) кадры, ссылающиеся на предыдущие, и «обратные» (B) кадры, которые могут ссылаться на кадры в будущем (-preset slower разберётся).

ffmpeg -i 1ab22a00dc9cdb7f5d0c6dbaaf1c5b11.gif -crf 19 -pix_fmt yuv420p -preset slower -tune animation -vf hqdn3d=luma_spatial=20.0 -movflags faststart -y out.mp4

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

Что у нас там с размером файла?

$ ls -lh out.mp4 
-rw-r--r--. 1 valdikss valdikss 323K фев 13 02:21 out.mp4

Божечки-кошечки, да мы же уменьшили вес продуктовой анимации в 495 раз (без AI)!

Векторные изображения это хорошо, качественно и правильно, но иногда временны́е усилия не стоят того. Я потратил на кодирование, может быть, полторы минуты. К слову о 60 FPS: видео не обязано иметь фиксированный фреймрейт и может иметь произвольные временные интервалы между кадрами.

Результат:

Вспомнился убитый Flash с оптимизацией растра в png8. Всплакнул.

Спасибо за статью! Только есть нюанс — для корректной работы библиотеке lottie-web нужен eval.

Соответственно, если в компании строгие правила CSP и стоит запрет на unsafe-eval, то либа не сработает, придётся искать другое решение

Честно говоря, я не впечатлен идеей. Кажется, что такие радикальные усовершенствования могут привести к существенной потере качества и реалистичности анимации. Без применения AI, это может означать уменьшение детализации и плавности движения, что отразится на пользовательском опыте. Вместо того, чтобы стремиться к сокращению размера файлов, я бы предпочел улучшение производительности и оптимизацию анимации без ущерба для ее качества."