1. Гифка 1.5мб/ Видео источник 49 кадров 32кб
/info text
2. Гифка 2мб/ Видео источник 35 кадров 82кб. Большая + прозрачный фон
ПРОЗРАЧНЫЙ ФОН /info text
Для mp4 нужен видеопроигрыватель, куча настроек, не юзабельно.
webp плохо поддерживаеся, jpg/png спрайты-сетка 7*7 больше мп4 в 2-10 раз + нужна правильная CSS,
а гифки - проблем ноль, но весят тонну.
Это замена. 1. ffmpeg подготовка 2. подключить эту либу, там всё есть/ источник видео: FPS=35 7*5, FPS=49 7*7.
Форматы от 2*2 до 9*9 можно и варианты img+transform/bg+position, оптимально для плавной анимации: fps=10, 49 кадров это 4,9сек. 81 это 8,1 сек, но размер спрайта ограничен видеобуфером, он должен быть максимально квадратным и меньше 4096*4096. Можно также грузить сетку jpg/webp напрямую, это быстрее, но размер будет больше в 5 раз. Локально тоже работает! Надо сделать js base64 строку через base64.htm Но с сервера грузится исходник и js образ не нужен, только локально из-за CORS. Хотя для универсальности и обхода фильтров на видео, и чтобы одна копия видео была, можно делать всегда в js, размер немного больше (base64 +30%) или (base112 +7% затем в blob+url) но для 50-70кб это немного. Данные в js передавать опасно, но локально json+fetch не работают из за CORS!
Вобщем немножко сложнее, но размер анимашки будет в 20раз МЕНЬШЕ!! 1000->200->50 кб
Название mp49 от mp4 + 49 кадров (оптимально для 5 сек анимации + исправление ошибок)
Если размер критичен и анимашка статичная, то этот формат лучше гифки, но для анимации фона не подходит, ещё иногда сбивается размер и шаги анимации и картинка "плывёт" а не меняет кадры.