图片压缩转换工具

输出结果

操作说明

本工具使用 SVGO 优化 SVG、使用 UPNG.js 做 PNG 有损压缩（调色板量化），支持批量处理。

SVGO 说明

SVGO 用于压缩/优化 SVG 源码（去掉冗余属性、简化路径等），不改变矢量外观。浏览器中引入后，只需两步：

拿到 SVG 的字符串（例如 await file.text() 或 element.outerHTML）。
调用 optimize(svgString, options)，从返回值的 data 里取优化后的 SVG 字符串。

import { optimize } from 'svgo/browser';  // 或本页的 /tools/svgo.browser.js

const svgString = await file.text();      // 或从 DOM 读取
const result = optimize(svgString, { multipass: true });  // multipass：多轮优化，体积更小
const optimizedSvg = result.data;          // 优化后的 SVG 字符串

// 可写入 Blob 供下载或展示
const blob = new Blob([optimizedSvg], { type: 'image/svg+xml' });

如需自定义插件或关闭某些优化，可查 SVGO 文档的配置说明。

UPNG.js 说明

UPNG.js 用于 PNG 的解码和编码。编码时可指定颜色数，实现有损的调色板 PNG（颜色数越少，体积越小、画质越有损）。

解码 PNG（读文件 → 像素）：

const buffer = await file.arrayBuffer();
const img = UPNG.decode(buffer);           // 得到 { width, height, data, frames, ... }
const rgbaFrames = UPNG.toRGBA8(img);    // 转成 RGBA  ArrayBuffer 数组，每帧一个

编码 PNG（像素 → 文件）：

// 单帧：imgs 为 [ RGBA_ArrayBuffer ]，w/h 为宽高，cnum 为颜色数
const pngBuffer = UPNG.encode([rgbaBuffer], width, height, colors);
// colors：0 = 无损真彩；2–256 = 调色板颜色数（有损，越小体积越小）
const blob = new Blob([pngBuffer], { type: 'image/png' });

用 Canvas 画出图片后 getImageData() 得到 RGBA，再 UPNG.encode([imgData.data.buffer], w, h, colors)，其中 colors 按“较高/中等/一般”对应 256、128、64。

工具流

图片压缩转换工具

输出结果

操作说明

SVGO 说明

UPNG.js 说明

更多说明