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

Моя цель - предложение широкого ассортимента товаров и услуг на постоянно высоком качестве обслуживания по самым выгодным ценам.

Прежде чем перейти к статье, хочу вам представить, экономическую онлайн игру Brave Knights, в которой вы можете играть и зарабатывать. Регистируйтесь, играйте и зарабатывайте!

Все любят красивую и качественную графику, но обычно такая графика весит много и влечёт проблемы с её добавлением в дистрибутив проекта. А, возможно, и доработки по внешней загрузке или самое частое — сжатие с потерей качества. Каждый дизайнер хоть раз, да говорил «Вот бы можно было и качество сохранить, и отдать разработчикам легкие файлы…». Сегодня нет классных AI-решений для этой задачи, но в этой статье мы расскажем о том, как нам удаётся значительно ужимать графику с использованием растровых и векторных элементов, содержащей альфа-канал.

Ниже мы ответим на следующие вопросы: Какой формат анимации с растровыми элементами выбрать для использования в мобильном приложении? Как уменьшить вес файла и не потерять качество картинки? И как со всем этим связаны Lottie-анимации?


Красиво и чётко, но 160МБ

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

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

Анимация в интерфейсе и ее растровые составляющие
Анимация в интерфейсе и ее растровые составляющие

Обычно, если анимация содержит фон, она передается разработчикам в .mp4. Но в этот раз и фона нет, и многие из элементов имеют скругления. Подбирать и подстраивать цвет — «костыльно», да и нам этот вариант не подходил из-за размытого заднего фона. Поэтому без альфа канала не обойтись.

Итого, растр и альфа в наборе анимированной видео графики. Собрав предварительные файлы, мы немного испугались. Каждый из малышей весил 25-40МБ в формате .mov, что в сумме  давало плюс 160МБ к дистрибутиву. Начали думать, что делать.

Какие были варианты?

  1. Оставить в .mov, а разработчикам придумать, как подгружать объемные файлы, но это не самое рациональное решение — долгая загрузка, зависимость от интернет-соединения

  2. Сконвертировать видео в AVI, MP4? Не подходит, ведь у этих форматов нет возможности экспортировать видео с прозрачным фоном

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

  4. Верстать всё руками разработчиков


Должны же быть ещё варианты…


Всё ещё неплохо, но вес в 400 раз меньше, Карл!

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

Lottie-анимация — это формат файла анимации на основе JSON, состоит из кода. Для подробностей можно посетить сайт lottiefiles, или airbnb.design (кстати, это именно их библиотека), да и просто погуглить множество других статей на тему Lottie-анимаций.

Если кратко, это удобный формат, который позволяет делать качественную анимацию, главным образом векторную, без особых заморочек, и с прекрасной адаптивностью под любой формат и плавным воспроизведением (до 60fps). 

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

Совет: Возьмите растровый элемент в наибольшем размере с учётом плотности пикселей на предполагаемых девайсах


Lottie с растровыми элементами: инструкция по применению

Сразу скажу, мы делали анимированную графику в Adobe AE. Поэтому способ создания Lottie анимации был очевиден — с использованием плагина Bodymovin. Есть и другие варианты создания подобных анимаций, например через Figma, но работает ли там схема с растром мы не проверяли.

Итак, для создания Lottie-файла нам понадобился Adobe AE и плагин Bodymovin. Lottie-файлы созданные через AE имеют множество ограничений на поддержку функций и плагинов используемых в процессе создания анимации, поэтому будьте осторожны и сверяйтесь с официальными ограничениями размещенными на lottiefiles

Совет: Делайте максимально простые композиции и используйте базовые элементы и функции при создании Lottie анимации

После отрисовки анимации мы экспортировали файл через bodymovin. Параметры дефолтные, ничего нового не проставляли. В результате получили *.zip архив в котором лежит наша графика и сам *.json.

Успешный экспорт анимации в .zip архив, его содержимое и вес элементов
Успешный экспорт анимации в .zip архив, его содержимое и вес элементов

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

Проверка анимации в пространстве Lottie на корректность отрисовки
Проверка анимации в пространстве Lottie на корректность отрисовки

В принципе, на этом всё, можно отдать архив разработке, рассказать им о библиотеке Lottie и вместе радоваться кратно меньшему весу графики. 

В нашем кейсе мы смогли изменить вес четырех видео со 160 МБ до 392КБ.

Мы же пошли немного дальше и нашли простой способ конвертации .zip в привычный *.json. Для этого экспортировали повторно нашу анимацию, теперь уже из пространства Lottie. При экспорте выбрали формат .json, и волшебным образом архив сконвертировался в обычный *.json (уж не знаем, какая магия там зашита). Именно такой формат файла мы и использовали в приложении, разработчикам не пришлось ничего модифицировать и дописывать, а графика вела себя корректно и качественно. 

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

Готовые экраны с анимациями
Готовые экраны с анимациями

Вес анимаций уменьшали: 

Наташа Сысоева, Lead product designer
Маша Синельникова, Product designer
Вадим Трофименко, Motion designer

Писать статью заставил Макс Симонов


Испытать удачу и попасть в наш А/В тест нового онбординга:

Источник: https://habr.com/ru/articles/793260/


Интересные статьи

Интересные статьи

Одна из главных проблем при работе с нейросетями – их склонность выдумывать недостоверные ответы. Это называется "галлюцинациями". Чтобы их избегать, нужно понимать, как составлять промты. В этой стат...
Привет, я Вика Строгонова, руководитель проектного офиса KTS. В идеальном мире проекты выполняются в срок, в соответствии с бюджетом, с заранее определенными ресурсами и с должным уровнем качеств...
Хороший интерактивный дизайн формирует позитивный пользовательский опыт. Многие компании, которые создают библиотеки компонентов, также пишут документацию с разделами по анимации и даже поставляют гот...
Беспилотное роботакси AutoX останавливается у пункта посадки, водителя для подстраховки в машине нет. AutoX, китайский стартап по производству беспилотных автомобилей, финансируемы...
Не секрет, что реализация механизмов безопасности IoT-устройств далека от совершенства. Известные категории уязвимостей умных устройств хорошо описаны в Top IoT Vulnerabilities от 201...