Как сжимать изображения без потери качества в Фигме: плагин Сжиматор

Придумали, как сжимать JPG и PNG, чтобы не шакалило, оптимизировать GIF, задавать гибкие настройки по весу и качеству. И всё это прямо в Фигме за 0 рублей вместо 20$ с человека.

Все, кто работает с ресайзами и большими рекламными кампаниями знает, что у каждой площадки свои требования к весу изображения. Где-то нужно уложиться в 500 кБ, а лимит других только 150. Экспортируешь, проверяешь, не влезло — пережимаешь, снова экспортируешь. И так в нескольких десятках баннеров одновременно.

Мы честно пробовали разные инструменты. Где-то функций не хватает, где-то интерфейс азиатский (и в прямом, и в переносном смыслах), где-то всё работает, но так медленно, что проще руками. Какое-то время пользовались TinyImage, но 1) он не на 100% устраивал по функционалу, 2) стоил 20 баксов в месяц с человека.

Тогда мы решили: берём лучшее из того, что видели, выкидываем всё ненужное и делаем под себя. И спустя почти 4000 строк кода появился плагин Сжиматор. Подробнее о его разработке и фишках — ниже.

Учитывали лучшие практики и ошибки других решений. В итоге сформировали список главных ориентиров:

Различные параметры сжатия проверяли на нескольких тестовых картинках. Это позволило быстрее находить рабочие решения и тут же сравнивать результаты.

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

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

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

А чтобы было проще управлять всеми агентами и отслеживать ошибки, в рабочий черновой билд плагина с самого начала ввели лог — оцифрованный набор операций, который совершает плагин. Его легко копировать и передавать агенту, дополняя своими комментариями о том, что именно сломалось. По логу (то есть по цепочке выполненных действий) агент может сопоставлять причины и устранять ошибки.

В процессе осознали, насколько разные эти форматы технически. Сжатие изображений в формате JPEG оказалось относительно простым в реализации: алгоритмы быстрее поддались настройке и требовали меньше итераций.

Чтобы сжать JPEG, плагин добавляет очень слабой контролируемой зернистости в яркостный канал, но бережнее обрабатывает телесные цвета, чтобы не шакалить лица.

А с PNG пришлось повозиться. Анализ существующих решений показал, что PNG-сжатие — это фактически разложение изображения на пиксели. Этот формат использует меньшее количество цветовых переходов, из-за чего градиенты могут ломаться и превращаться в дискретные участки.

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

Главное в PNG-сжатии — контролируемое упрощение изображения с сохранением качества восприятия. И нам постепенно удалось выработать набор параметров, при котором сохраняется баланс между качеством и степенью сжатия.

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

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

Когда меняешь качество с 95% до 90%, в изображении запускается целая цепочка изменений: например, сокращается цветовая палитра и растёт зернистость, которая маскирует уменьшение цвета. И всё это затрагивает каждый пиксель по всей плоскости изображения. А так как изменения в каждом пикселе имеют вес, шаг даже в пять процентов может уменьшить изображение сразу на двадцать килобайт: 95% — 150 кБ, 90% — уже 130 кБ. Из-за этого размер всегда будет колебаться в диапазоне около целевого значения. Вместо ровно 150кБ может получиться 140.

Поэтому мы внедрили в Сжиматор подход с допустимым порогом. Он позволяет попадать в нужный диапазон и не подгонять ничего вручную.

Суть простая, а процесс производства мудрёный: надо выгрузить кадры из Фигмы, открыть Фотошоп или Афтер Эффекст, загрузить туда картинки, вручную выставить тайминги на неудобном таймлайне и молиться, чтобы итоговый файл вписывался в допустимый размер. Если не впишется, придётся сжимать каждый кадр отдельно и начинать всё заново. Альтернативой могли бы стать онлайн-агрегаторы, но они работают по той же схеме.

В Сжиматоре весь этот процесс сворачивается до нескольких шагов:

Отдельным преимуществом стала превью-функция. Из-за того что моментально рендерить GIF прямо в плагине долго и муторно, мы реализовали предпросмотр через последовательную смену PNG-кадров с заданными таймингами. Так система не перегружается, но при этом в реальном времени видно, сколько показывается каждый кадр. А если анимация слишком быстрая или, наоборот, затянутая, можно тут же скорректировать тайминги.

И уже на этапе финальной генерации GIF все анимации собираются точно и без упрощений.

Мы создали плагин, который позволяет не выходя из Фигмы:

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

P. S. А заодно можете затестить другой наш плагин Текстомер, о котором мы уже писали.