2026-10-30
矢量图和位图的区别，是在打开压缩工具之前就该弄清楚的事，因为它决定了压缩到底有没有用。位图存的是像素网格，有固定的宽高，尺寸越大文件越大。矢量图存的是绘制指令，没有分辨率，文件大小跟着图形数量和锚点数走。所以同一个 logo 可以是 SVG 40KB、PNG 2.4MB，而压缩这两种文件的思路完全是两回事。
位图压缩操作的是像素网格。无损方法（去掉元数据、合并重复调色板、重新打包 deflate 流）不动任何一个像素，一般能省 10% 到 30%。有损方法走得更远：JPEG 丢掉高频细节和色度分辨率，WebP 和 AVIF 在上面加了更好的预测，减色则直接降低颜色数。但它们都没法把细节变回来。把 400px 宽的照片压到 1600px 输出，只会得到一个更大但仍然模糊的文件。分辨率是天花板，压缩只决定你在这个天花板下面装得多紧。
矢量文件该不该压，主要看它带着什么。从 Figma 或 Illustrator 导出的 SVG 常常塞了编辑器元数据、隐藏图层、没用到的渐变定义、十位小数精度，还有一张没人会渲染的 base64 预览位图。把这些清掉，120KB 的图标可以落到 25KB 左右，画面没有变化。如果 SVG 已经清理过了，服务端的 gzip 或 brotli 会处理剩下的部分，本地这一遍可以跳过。
SVG 和 PNG 的压缩走的是两条路，谁占优取决于图本身。六个颜色的扁平 logo 在任何尺寸下都清晰，做成矢量常常不到 10KB。照片没有形状可以描述，硬转成矢量只会得到一个巨大而且更难看的文件。下面是我们在工具里跑出来的大致区间。
只要问一句这张图是由什么构成的，矢量和位图的体积问题就不难了。硬边、纯色填充和文字是形状，形状该放进矢量文件。渐变、阴影、噪点，以及一切相机拍出来的东西是像素，像素该放进位图文件。真实项目大多是混合的：SVG logo 叠在 JPEG 背景上。各自用自己的方式压缩，总量比只压一遍降得更多。
先判断这个文件是像素网格还是形状列表。位图对质量和尺寸敏感，所以先定输出宽度，再选质量值，反过来做是浪费时间。矢量文件吃清理，所以删掉编辑器加进去的东西，剩下的交给服务端压缩文本。两种都建议最后在真实背景上、按实际发布的尺寸看一眼。
SVG 清理的完整步骤在 /blog/compress-svg-without-breaking，位图那部分的细节在 /blog/compress-png-without-losing-quality。如果要比较位图格式，/blog/png-vs-jpg-differences 列了各自的取舍；照片为什么缩尺寸比降质量更有效，/blog/image-resolution-vs-file-size 里有解释。
不能。照片压缩操作的是像素，用细节换字节。矢量文件是文本，有用的操作是删掉编辑器元数据、降低坐标精度、清掉没用到的定义。把照片压缩器套在 SVG 上不会有任何效果。
通常是内嵌了位图预览，或者描摹把每个像素都变成了形状。照片描摹成矢量路径会产生上千个锚点，文件比原图大好几倍。先检查里面有没有 base64 块。
清理类的操作不会。坐标保留两位小数可能让路径偏移不到一个像素，把文字转成轮廓会改变渲染方式，所以能保留活字就尽量保留。
不该。照片是连续色调，用形状去描述会得到一个体积巨大、瑕疵明显的文件。设定好尺寸之后用 WebP 或 AVIF，结果小得多。