toolz.macrulez.ru: три модуля для работы с изображениями и градиентами

На toolz.macrulez.ru собраны три инструмента: сжатие растровых изображений, оптимизация SVG и конструктор CSS-градиентов. Проект будет расширяться — планируется добавлять новые модули для веб-мастеров. В этом посте — не про техническую реализацию, а про возможности каждого из трёх текущих модулей: какие кодеки и настройки доступны, как устроено превью, что даёт пакетная обработка и как сохранять профили настроек. Цель — дать полную картину «что можно сделать» без углубления в код.

---

Зачем вообще такой набор

Три задачи решаются по-разному:

• Растр — нужен выбор формата (JPEG, WebP, AVIF, PNG и т.д.), тонкая настройка качества и опций кодеков, возможность ресайза и сокращения палитры, пакетная обработка и сохранение профилей под разные сценарии (веб, печать, иконки).
• SVG — важно не «сломать» разметку и анимации, при этом максимально уменьшить размер, нужны гибкие опции SVGO и удобное сравнение до/после в разных режимах превью.
• Градиенты — визуальный конструктор: несколько слоёв, типы linear/radial/conic, цветовые остановки и превью как на весь экран, так и в виде геометрических примитивов (квадрат, круг), чтобы сразу видеть, как градиент будет смотреться в интерфейсе.

Ниже — по каждому модулю подробно: что умеет, какие настройки есть и как этим пользоваться в повседневной работе.

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

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

Какие кодеки доступны

Доступны восемь вариантов кодирования:

Кодек	Назначение
MozJPEG	JPEG с улучшенным сжатием: больше опций, чем у стандартного энкодера.
Oxipng	Оптимизация PNG без потери качества: пересжатие, сокращение глубины и палитры.
WebP	Lossy и lossless WebP с тонкой настройкой под фото и графику.
AVIF	Современный формат с хорошим соотношением качество/размер.
JPEG XL (JXL)	Гибридный формат с поддержкой lossy и lossless, HDR и широкой палитры.
QOI	Быстрый lossless-формат без дополнительных настроек.
Browser JPEG / Browser PNG	Встроенные в браузер энкодеры — запасной вариант, если остальные по какой-то причине недоступны.

Выбор кодеков делается в панели «настройки кодеков», при загрузке файла можно оставить авто-подбор по типу (например, для PNG предложится Oxipng или Browser PNG) или вручную переключить на нужный формат.

Настройки кодеков по форматам

У каждого кодека свой набор опций — ниже кратко, что можно настроить.

MozJPEG: качество (0–100), baseline/progressive, оптимизация кодирования, сглаживание, цветовое пространство (Grayscale, RGB, YCbCr), таблицы квантования, отдельная группа — trellis (multipass, оптимизация нулей и таблиц, число проходов), субдискретизация цветности (авто или фиксированная), отдельное качество для chroma, progressive.

Oxipng: уровень сжатия (0–6), чересстрочность, оптимизация альфа-канала, сокращение битности и типа цвета, палитры, оттенки серого, перекодирование IDAT, быстрая оценка, таймаут, strip метаданных (none / safe / all).

WebP: качество, целевой размер в байтах, целевой PSNR, метод (0–6), сила SNS и фильтров, резкость, тип фильтра (Simple / Strong), предобработка, автофильтр, партиции, сегменты, число проходов, сжатие альфы, фильтрация альфы, качество альфы, lossy/lossless, подсказка типа изображения (default, picture, photo, graph), near-lossless, опции для совместимости и многопоточности.

AVIF: качество и качество альфа-канала, уровень шумоподавления, размер тайлов (строки/столбцы в степенях двойки), скорость энкодера, субсемплирование, chroma delta Q, резкость, tune, sharp YUV.

JPEG XL: качество, усилие сжатия (0–9), progressive, EPF (фильтр краёв), lossy palette, tier скорости декодирования, photon noise ISO, lossy modular. Для JXL отключено сокращение палитры в интерфейсе — формат сам управляет представлением цветов.

QOI и Browser JPEG/PNG: у QOI опций нет, у Browser JPEG — только качество (0–1), у Browser PNG — пустой набор (подходит для быстрого экспорта без тонкой настройки).

Все эти настройки сгруппированы по смыслу (основные, продвинутые, альфа/цвет и т.д.), чтобы не теряться в длинном списке. Изменения применяются автоматически: после смены опций конвертация перезапускается, и в превью сразу виден обновлённый результат и размер файла.

Ресайз (масштабирование)

Отдельный блок «Настройки изображения» (второй режим панели, рядом с настройками кодеков) позволяет включить изменение размера и задать:

• Ширину и высоту в пикселях. Можно указать только ширину или только высоту — вторая сторона считается по пропорциям исходного изображения. Удобно для подготовки картинок «по ширине 1200px» или «по высоте 800px» без искажений.
• Метод масштабирования:
  • Lanczos3 — качественная интерполяция по умолчанию, хорошо подходит для фотографий и плавных градиентов.
  • Mitchell, Catmull-Rom, Triangle (bilinear) — альтернативы с разным балансом резкости и артефактов, можно подбирать под тип контента.
  • hqx (pixel art) — режим для пиксельной графики с сохранением чётких границ без размытия.

Дополнительно можно включить premultiply и linearRGB для корректной работы с альфа-каналом и цветовым пространством при масштабировании — это важно, если вы готовите изображения с прозрачностью или с точной цветопередачей.

Ресайз применяется к результату после кодирования: сначала картинка сжимается выбранным кодеком, затем масштабируется. В пакетном режиме для каждого файла целевые размеры подставляются с учётом пропорций оригинала (например, «макс. ширина 800» даст для каждого свою высоту), так что можно обработать папку разных кадров одним профилем.

Сокращение палитры (Reduce palette)

Для подходящих форматов (PNG, WebP и др.; для JPEG XL эта опция отключена) доступно сокращение числа цветов:

• Количество цветов — от 2 до 256. Удобно для логотипов, иконок, скриншотов интерфейса с ограниченной палитрой: можно явно задать «оставить 16 цветов» или «64 цвета» и сразу видеть результат в превью.
• Дизеринг — от 0 до 1. Чем выше значение, тем более плавный переход между цветами при малом количестве цветов; при нуле получаются плоские заливки без сглаживания.

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

Превью и сравнение

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

Пакетная обработка

Если загрузить несколько файлов (через выбор в диалоге или перетаскивание на область), интерфейс переключается в режим очереди:

• Список файлов с именами, размерами оригинала и статусом (ожидание / сжатие / готово). Для каждого элемента видно исходный размер и размер после обработки.
• Кнопка «Compress all» — запуск обработки всех изображений в очереди с текущими настройками кодеков, ресайза и палитры. Удобно подготовить десятки превью или иконок одним нажатием.
• Для каждого элемента — отдельная кнопка скачивания одного файла.
• Скачать всё архивом — все обработанные файлы упаковываются в один ZIP, имена сохраняются, можно сразу положить архив в проект или на сервер.

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

Сохранение и загрузка профилей настроек

Чтобы не настраивать кодеки, ресайз и палитру заново для каждого проекта, можно сохранить профиль в JSON и потом загрузить его в один клик:

• В тулбаре есть пункты «Загрузить настройки» и «Сохранить настройки» (иконки загрузки и сохранения).
• При сохранении в файл toolz-settings.json записываются:
  • все настройки всех кодеков (качество, флаги, выбранные пункты в селектах — по каждой группе опций);
  • включён ли ресайз, какой метод выбран, ширина и высота, premultiply, linearRGB;
  • включено ли сокращение палитры, количество цветов и уровень дизеринга.

Загрузка профиля: выбираете ранее сохранённый .json файл — настройки подставляются в панели, конвертация и при необходимости ресайз/палитра перезапускаются. Удобно хранить, например, «профиль для веба: WebP 80%, ресайз по ширине 1200px» или «PNG для печати: Oxipng level 6, без ресайза» и переиспользовать их для новых задач.

Сохранение и загрузка профилей доступны только при одном загруженном изображении, при работе с очередью кнопки отключены.

Оптимизация SVG (Tiny SVG)

Модуль загружает один или несколько SVG-файлов, прогоняет их через SVGO с настраиваемыми опциями и позволяет сравнить размер и вид до/после. Оптимизация выполняется в браузере — никаких внешних сервисов.

Режимы превью (раскладка)

Чтобы удобно смотреть и оригинал, и результат, доступны четыре режима отображения:

Режим	Описание
Vertical	Панели расположены вертикально: оригинал и оптимизированный вариант друг под другом.
Horizontal	Две области рядом по горизонтали — удобно на широком экране.
Fullscreen	Один вариант (оригинал или оптимизированный) на весь экран — для детального просмотра без отвлечения на вторую панель.
Split	Разделённый вид: слева и справа (или сверху/снизу) оригинал и оптимизированный вариант для прямого сравнения «до и после».

Переключение режима — из тулбара или панели настроек. В каждом режиме доступен зум и при необходимости просмотр исходного кода SVG, чтобы убедиться, что оптимизатор не удалил нужные элементы или атрибуты.

Настройки оптимизации (SVGO)

Опции собраны в группы и соответствуют плагинам SVGO. Можно включать и отключать отдельные преобразования:

• Общие: форматирование вывода (pretty — читаемый отступы и переносы) и многопроходная оптимизация (multipass — несколько проходов для дополнительного сжатия).
• Точность: floatPrecision и transformPrecision (0–8) — сколько знаков после запятой оставлять в числах. Меньше значение — меньше размер файла, но возможна потеря точности визуала, для простых иконок часто хватает 2–3, для сложных путей можно поднять до 5–6.
• Плагины по умолчанию: в интерфейсе доступны переключатели для типичных плагинов SVGO — удаление метаданных, доктайпа, инструкций XML, комментариев, удаление неиспользуемых defs, упрощение атрибутов, очистка ID, числовых значений, списков значений, конвертация цветов, удаление неизвестных и дефолтных атрибутов, удаление пустых групп и контейнеров, объединение путей, сортировка атрибутов и потомков defs, удаление title и desc и т.д. Каждый плагин можно включить или выключить, чтобы, например, сохранить структуру для анимаций или оставить подписи для доступности.

Собранный конфиг передаётся в SVGO, результат сразу пересчитывается и отображается в превью. Удобно подбирать баланс «максимальное сжатие» и «сохранение структуры/анимаций» под конкретный тип SVG (иконка, иллюстрация, экспорт из Figma и т.д.).

Превью и код

Для каждого SVG показывается:

• Визуальное превью (оригинал и оптимизированный) в выбранном режиме раскладки — так сразу видно, не «поплыла» ли графика после агрессивной оптимизации.
• Размеры файла до и после в байтах, при пакетной обработке — ещё и суммарный размер всех файлов до и после, чтобы оценить выигрыш по всей папке.
• При необходимости — исходный код оптимизированного SVG (удобно скопировать в проект или проверить, что не удалилось лишнее).

Пакетная обработка

При загрузке нескольких SVG:

• Список файлов с именами, размерами до/после и статусом оптимизации (ожидание / в процессе / готово).
• Кнопка «Optimize all» — запуск оптимизации всех файлов в очереди с текущими настройками SVGO.
• «Download archive» — скачать все оптимизированные SVG одним ZIP-архивом, с сохранением имён файлов.

Общие настройки (плагины, точность, pretty, multipass) применяются ко всем файлам в очереди. Так можно единообразно обработать набор иконок или иллюстраций для сайта и сразу получить архив, готовый к выкладке.

Конструктор CSS-градиентов (Gradient Fabric)

Визуальный редактор для составления многослойных CSS-градиентов: несколько слоёв с разными типами (linear, radial, conic), цветовыми остановками и превью — как на весь экран, так и в виде геометрических примитивов (квадрат, круг), чтобы сразу видеть, как градиент будет смотреться в реальном интерфейсе.

Слои градиентов

Градиент собирается из нескольких слоёв — по сути, несколько градиентов накладываются друг на друга и в итоге дают одну строку background-image с перечислением через запятую:

• Добавление нового слоя — кнопка в панели слоёв; слой получает имя (например, «Layer 2») и по умолчанию два цветовых остановка с случайными цветами.
• У каждого слоя настраиваются:
  • Тип градиента: linear, radial или conic — переключатель в панели слоя.
  • Видимость — слой можно временно отключить (скрыть), не удаляя, скрытые слои не попадают в итоговый CSS.
  • Порядок — слои можно менять местами (двигать вверх/вниз в списке), итоговый CSS формируется так, что «нижний» в списке слой рисуется первым, «верхний» — поверх. Это соответствует логике наложения в CSS.
  • Удаление слоя — отдельная кнопка у слоя, после удаления активным становится другой слой.

Слои рисуются друг поверх друга, как в графических редакторах, в результате получается одна строка background-image: linear-gradient(...), radial-gradient(...); и т.д., которую можно скопировать или скачать.

Типы градиентов и параметры

• Linear — угол в градусах (0 = снизу вверх, 90 = слева направо) и список цветовых остановок. Каждая остановка: цвет (hex/rgb), позиция в процентах (0–100), при необходимости — прозрачность (opacity). Остановки можно добавлять и удалять, перетаскивать позицию, между соседними цветами строится плавный переход.
• Radial — центр градиента (X и Y в процентах от размеров элемента), размер эллипса (ширина и высота в процентах), затем те же остановки по цвету и позиции. Удобно для «пятна света» или фоновых бликов.
• Conic — угол начала (в градусах), центр (X, Y в %), остановки: позиция задаётся углом по кругу (0% — начало, 100% — полный оборот). Подходит для круговых градиентов и цветовых колец.

В каждом слое можно добавлять и удалять остановки, менять цвет (например, через пикер) и позицию, при необходимости задавать opacity. Угол linear/conic и центр/размер radial настраиваются в панели выбранного слоя. Итоговый CSS генерируется в стандартном синтаксисе и отображается в блоке экспорта.

Превью: полный экран и геометрические примитивы

Превью градиента можно переключать в три режима — в зависимости от того, как вы хотите оценить результат:

Режим	Описание
Full-screen	Градиент растягивается на всю область превью — как будет выглядеть фон страницы или блока на весь экран. Никаких рамок и ограничений по форме.
Square	Прямоугольник с градиентом; его можно перетаскивать по области и менять размер за углы (маркеры в углах). Удобно проверить, как градиент смотрится в ограниченной области — карточка, баннер, кнопка.
Circle	Круг с градиентом; также перетаскивается по области и ресайзится за верхний/нижний/левый/правый маркеры (диаметр меняется по осям). Полезно для аватаров, круглых кнопок, декоративных элементов.

В режимах Square и Circle позиция и размер примитива сохраняются — можно подстроить превью под нужную композицию и смотреть результат без копирования в вёрстку. Панель слоёв при желании можно свернуть, чтобы освободить место под превью.

Экспорт и сброс

• Копировать CSS — итоговая строка background-image: ... копируется в буфер обмена, можно сразу вставить в стили в редакторе или в инструментах разработчика.
• Скачать — сохранение в файл gradient.css (одна строка с правилом) для переноса в проект.
• Сброс — очистка всех слоёв и возврат к одному слою по умолчанию, сброс режима превью и позиции/размера примитивов (Square/Circle), чтобы начать новый градиент с чистого листа.

Панель слоёв можно свернуть/развернуть кнопкой в тулбаре, чтобы освободить место под превью или, наоборот, больше места под список слоёв и настройки.

---

Итог

Если коротко, по возможностям трёх модулей:

• Image Compressor: восемь кодеков (MozJPEG, Oxipng, WebP, AVIF, JPEG XL, QOI, Browser JPEG/PNG) с детальными настройками под каждый формат, ресайз с выбором алгоритма (Lanczos3, Mitchell, Catmull-Rom, Triangle, hqx для pixel art) и опциями premultiply/linearRGB, сокращение палитры от 2 до 256 цветов с дизерингом, пакетная обработка с кнопкой «Compress all» и выгрузкой в ZIP, сохранение и загрузка профилей настроек в JSON (кодеки, ресайз, палитра) для повторного использования.
• Tiny SVG: четыре режима превью (vertical, horizontal, fullscreen, split), настраиваемый SVGO (плагины по умолчанию плюс точность float/transform, pretty, multipass), отображение размера до/после и исходного кода, пакетная оптимизация с «Optimize all» и скачиванием архива.
• Gradient Fabric: многослойные градиенты (linear, radial, conic) с цветовыми остановками и прозрачностью, видимость и порядок слоёв, превью в трёх режимах — на весь экран или в виде перетаскиваемого и ресайзируемого квадрата/круга, экспорт CSS в буфер и в файл, сброс к одному слою по умолчанию.

Всё это доступно на toolz.macrulez.ru без установки, обработка выполняется локально в браузере. Проект будет расширяться — планируется добавлять новые модули, связанные с инструментами для веб-мастеров, так что набор утилит со временем пополнится. Если понадобится разобрать техническую сторону — как подключаются кодеки, как устроен конвейер ресайз → кодирование → палитра или как собирается конфиг SVGO — можно оформить это отдельным постом.