Оптимизация SVG, экспорт кода и сжатие изображений

Изображения составляют больше половины веса большинства сайтов. Оптимизация картинок — это не украшательство, а скорость загрузки, метрики Core Web Vitals и реальные деньги.

Краткая история сжатия

1980 — CCITT стандартизирует факс-протокол Group 3, использующий производную от кодирования Хаффмана схему (Modified Huffman) для сжатия чёрно-белых изображений. Первый массовый алгоритм сжатия.

1987 — CompuServe выпускает GIF (Graphics Interchange Format). Использует LZW-сжатие без потерь, ограничен 256 цветами.

1992 — Joint Photographic Experts Group публикует JPEG. Первый формат с потерями, который отбрасывает незаметные глазу детали. Революция в фотографии и вебе.

1996 — PNG (Portable Network Graphics) создан как бесплатная замена GIF (патентный спор с Unisys по LZW). Сжатие без потерь, поддержка 16,7 млн цветов и альфа-канала.

2010 — Google выпускает WebP. Основан на технологиях видеокодека VP8. Сжимает на 25–34% лучше JPEG при том же качестве.

2019 — AVIF на основе видеокодека AV1. Ещё на 50% меньше WebP при том же PSNR. Поддержка HDR и 12-битного цвета.

SVG: мусор, который можно просто выкинуть

SVG — особый случай. Это не сжатие пикселей, а разметка. Проблема: инструменты (Figma, Adobe Illustrator, Inkscape) добавляют в SVG массу служебной информации:

• Метаданные (автор, время создания, версия)
• Пустые <g> группы
• Координаты с точностью до 10 знаков («0.0000000001»)
• Скрытые слои
• Неиспользуемые определения (<defs>)
• Комментарии

Библиотека SVGO (Node.js), вышедшая в 2012 году, стала стандартом для автоматической чистки SVG. Она может уменьшить файл Figma на 80–90% без каких-либо видимых изменений.

Что делают два оптимизатора

Оптимизатор SVG очищает, трансформирует и экспортирует векторную графику. Оптимизатор изображений отвечает за ресайз, сжатие и подготовку PNG, JPEG и WebP.

Загрузка и оптимизация SVG

Разметку можно вставить, выбрать .svg-файл, перетащить его в исходную панель или отправить текущий рисунок прямо из Pixel Painter. Для оптимизации используется локальная сборка SVGO и три стартовых пресета:

• Safe выполняет консервативную очистку.
• Balanced подходит как основной режим для production-файлов.
• Maximum включает дополнительные преобразования и несколько проходов оптимизации.

В сворачиваемом разделе Advanced настраиваются удаление метаданных и комментариев, схлопывание групп, размеры (dimensions), преобразование фигур в контуры (path), объединение path, сохранение <title> и <desc>, точность чисел, короткие теги и префикс для ID. viewBox сохраняется. Перед предпросмотром удаляются потенциально опасные теги <script>, обработчики событий (event handlers), встроенные документы и внешние ссылки.

Предпросмотр, форматирование и трансформации

Во вкладке Preview результат можно проверить на шахматном, светлом, тёмном или собственном фоне. Этот фон нужен только для просмотра и не добавляется в файл.

Весь SVG можно повернуть на 90 градусов влево или вправо, отразить по горизонтали или вертикали и сбросить к оптимизированному состоянию. При повороте геометрия и размеры корректно меняются местами. Вкладка SVG показывает минифицированную разметку или отформатированную (prettified) версию с двумя пробелами, четырьмя пробелами либо табами.

Экспорт кода и форматов

Все варианты создаются из одного и того же трансформированного SVG:

• оптимизированный SVG;
• React JSX с настраиваемым именем компонента;
• React Native JSX для react-native-svg с предупреждениями о неподдерживаемых элементах;
• Vue single-file component;
• PNG с заданной шириной, прозрачностью или собственным фоном;
• варианты Data URI (percent-encoded и Base64).

Текстовые форматы можно скопировать или скачать. PNG создаётся в браузере, а временные Blob-URL освобождаются автоматически.

Пакетное сжатие растровых изображений

Режим Image Compressor принимает до десяти PNG, JPEG, WebP и других поддерживаемых браузером изображений через окно выбора файлов или перетаскиванием (drag-and-drop). Для всей очереди задаются общие параметры: сохранить исходный формат каждого файла либо конвертировать всё в JPEG, WebP или PNG, выбрать качество lossy-форматов и фон для преобразования прозрачности в JPEG.

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

Быстрый старт: откройте Оптимизатор SVG → вставьте или перетащите SVG → выберите Balanced → проверьте предпросмотр и уменьшение размера → при необходимости примените трансформацию → скопируйте компонент или скачайте SVG/PNG. Для растровых изображений откройте Оптимизатор изображений, перетащите до десяти файлов, выберите общие настройки и скачайте отдельные результаты или один ZIP-архив.

Похожие инструменты

Оптимизатор изображенийПакетно сжимайте до 10 PNG, JPEG или WebP, задавайте максимальные размеры или целевой вес, сравнивайте до и после, скачивайте по одному либо ZIP-архивом — полностью локально.Оптимизатор SVGОптимизируйте и трансформируйте SVG, затем экспортируйте чистый SVG, React, React Native, Vue, Svelte, PNG, Data URI или Canvas-код — полностью локально.CSS & HTML BeautifierФорматируйте или минифицируйте HTML и CSS с автоопределением языка, настраиваемым отступом и безопасной обработкой pre, textarea и вложенных @media.Color ToolboxКонвертируйте HEX, RGB и HSL, смотрите значение OKLCH, собирайте палитры, извлекайте цвета и проверяйте контраст WCAG.Pixel PainterРисуйте по пикселям, редактируйте и клонируйте выделения, трансформируйте весь холст, управляйте палитрами и экспортируйте SVG или PNG.OG Image GeneratorПеретаскивайте, масштабируйте и вращайте элементы прямо на холсте, чтобы собрать карточку с несколькими языками (включая автоматический RTL) в одном макете, сохраняйте свои шаблоны локально и экспортируйте PNG.