SVG Optimization, Code Export, and Image Compression

Images make up more than half the weight of most websites. Image optimization isn't decoration — it's load speed, Core Web Vitals, and real money.

A short history of compression

1980 — CCITT standardizes Fax Group 3, using a Huffman-derived scheme (Modified Huffman) for black-and-white images. The first mass-market compression algorithm.

1987 — CompuServe releases GIF. Uses LZW lossless compression, limited to 256 colors.

1992 — JPEG standard published. The first lossy format that discards imperceptible details. A revolution for photography and the web.

1996 — PNG created as a free GIF replacement (Unisys LZW patent dispute). Lossless, 16.7M colors, alpha channel.

2010 — Google releases WebP, based on VP8 video codec technology. 25-34% smaller than JPEG at the same quality.

2019 — AVIF based on the AV1 video codec. 50% smaller than WebP at the same PSNR. HDR and 12-bit color support.

SVG: trash you can just delete

SVG is a special case. It's not pixel compression but markup. The problem: tools (Figma, Adobe Illustrator, Inkscape) dump tons of boilerplate data into SVG:

• Metadata (author, creation time, tool version)
• Empty <g> groups
• 10-decimal-place coordinates
• Hidden layers
• Unused <defs>
• Comments

SVGO (Node.js, 2012) became the standard SVG cleaner. It can shrink a Figma-exported file by 80-90% with no visible change.

What the two optimizers do

SVG Optimizer cleans, transforms and exports vector artwork. Image Optimizer handles PNG, JPEG and WebP resizing, compression and delivery files.

SVG input and optimization

Paste markup, choose an .svg file, drop it into the source panel, or send the current drawing directly from Pixel Painter. Optimization uses a local SVGO build and offers three starting points:

• Safe performs conservative cleanup.
• Balanced is the default for normal production assets.
• Maximum runs additional transformations and multiple optimization passes.

The Advanced section controls metadata and comment removal, group collapsing, dimensions, shape-to-path conversion, path merging, <title> and <desc> preservation, numeric precision, short tags, and ID prefixes. The output keeps its viewBox, and potentially unsafe preview content such as scripts, event handlers, embedded documents, and external references is removed before display.

Preview, formatting, and transforms

The Preview tab shows the optimized file on a checkerboard, light, dark, or custom background. This background is only for inspection and is never added to the asset.

The whole SVG can be rotated left or right by 90 degrees, flipped horizontally or vertically, and reset to its optimized state. Rotation swaps the output geometry when required. The SVG tab can show minified markup or prettified output with two spaces, four spaces, or tabs.

Code and transport exports

All outputs are generated from the same transformed SVG:

• optimized SVG;
• React JSX with a configurable component name;
• React Native JSX for react-native-svg, with warnings for unsupported nodes;
• a Vue single-file component;
• PNG at a chosen width, with transparency or a custom background;
• percent-encoded and Base64 Data URI variants.

Each text format can be copied or downloaded. PNG is rasterized in the browser, and Blob URLs are temporary.

Batch raster compression

The Image Compressor accepts up to ten PNG, JPEG, WebP, or other browser-supported images through the file picker or drag-and-drop. Use one set of options for the whole queue: keep each source format or convert everything to JPEG, WebP, or PNG, adjust lossy quality, and choose the background used when transparency is converted to JPEG.

Every row shows its dimensions and before/after size and has an individual Download action. Completed files can also be packaged into one ZIP directly in the browser. Because image data is already compressed, the ZIP stores the generated files without an unnecessary second compression pass.

Quick start: open SVG Optimizer → paste or drop an SVG → choose Balanced → inspect the preview and size reduction → apply a transform if needed → copy a framework component or download SVG/PNG. For raster files, open Image Optimizer, drop up to ten images, choose the output settings, then download selected results or one ZIP.

Related tools

Image OptimizerBatch-compress up to 10 PNG, JPEG or WebP images, set maximum dimensions or a target size, compare before and after, then download individually or as a ZIP — fully client-side.SVG OptimizerOptimize and transform SVG, then export clean SVG, React, React Native, Vue, Svelte, PNG, Data URI or Canvas code — fully client-side.CSS & HTML BeautifierBeautify or minify HTML and CSS with auto-detection between the two, adjustable indent, and safe handling of pre, textarea and nested @media blocks.Color ToolboxConvert HEX, RGB and HSL, inspect the OKLCH value, generate palettes, extract image colors and verify WCAG contrast.Pixel PainterDraw pixel by pixel, edit and clone selections, transform the full canvas, manage palettes, and export crisp SVG or PNG assets.OG Image GeneratorDrag, resize and rotate elements straight on the canvas to build Open Graph cards that hold several languages (with automatic RTL) on one layout, save templates locally, and export PNG.