图片压缩完整教程
从有损与无损的区别，到 JPEG 质量、PNG 调色板、WebP、GIF 与 SVG 各自该怎么调，逐步讲清图片压缩的关键参数与实操流程。
如何使用图片压缩工具
按下面 4 步完成一次压缩：选择图片、启动处理、对比细节、保存结果。教程中的界面截图来自本站当前版本，按钮名称和操作顺序与首页一致。
选择图片并加入处理队列
打开首页的「压缩」模式，点击「选择」，或直接把图片拖到虚线框中。一次可以加入多张图片；教程示例使用森林风景照片，方便观察不同格式下的体积和画质变化。
图片加入队列后不会自动上传，也不会立即覆盖原文件。检查森林风景照片的缩略图和文件名无误后，再点击「压缩」。
示例图片的处理全程在浏览器中完成，文件不会上传到服务器。
图 1：以森林风景照片为例，选择或拖放图片后，确认文件卡出现在队列中，再开始处理。 点击「压缩」，查看第一次结果
点击队列下方的「压缩」按钮，工具会根据格式选择合适的默认策略：JPEG、WebP 主要调整质量，PNG 主要分析颜色数，GIF 也会使用调色板压缩。
完成后先看文件卡上的原始体积、结果体积和减少比例。如果重新编码反而变大，工具会保留原文件并明确说明，不会把更大的结果当成优化结果。
图 2：森林风景照片压缩完成后，文件卡会显示前后体积和减少比例。 打开对比视图，调整参数并检查细节
点击已处理的文件卡，页面会打开对比视图。拖动中间分割线，分别观察树叶、枝干、雾气和明暗过渡；不要只看缩小后的整张图。
右侧参数取决于文件格式：JPEG、WebP、AVIF 调整质量；PNG、GIF 调整颜色数；SVG 调整坐标精度。修改参数后先看预览，确认画质满意再点击「应用」。
需要更小体积时，优先先调整图片尺寸，再降低质量或颜色数；过度压缩会让树叶纹理、雾气和明暗过渡出现明显瑕疵。
图 3：森林风景照片以 PNG 格式处理后，可拖动分割线检查细节，并调整颜色数。 保存单张结果，或一次保存全部图片
确认对比结果后，点击文件卡上的「保存」下载当前图片；如果队列中有多张已处理图片，点击「保存全部」可以一次下载全部结果，批量结果会打包成 ZIP。
保存前建议保留原图，并把压缩结果作为发布或上传版本。不要在已经有损压缩的文件上反复编辑再保存，以免损失叠加。
图 4：点击文件卡下方的「保存」下载单张结果；批量文件可在工具区点击「保存全部」。
按文件格式调整参数
完成首次压缩后，再根据图片格式调整对应控件。下面的截图均来自本站当前工具：JPEG 和 WebP 调整质量，PNG 和 GIF 调整颜色数，SVG 调整精度。
压缩 JPEG：用“质量”平衡体积与细节
加入 JPEG 后点击「压缩」。工具会读取图像的量化表来估算原始质量：高质量图片默认会压到更适合网页使用的范围；已经压得较低的 JPEG 则不会在默认流程中继续明显降质，避免无意义地叠加损失。
在对比面板右侧输入数值或拖动「质量」滑杆。数值越高，通常保留更多细节、文件也越大；数值越低，文件会更小，但要特别检查文字边缘、脸部和渐变。参数改变后会先生成预览，满意后再点「应用」。
压缩 PNG：先看结果，再降低颜色数
PNG 没有 JPEG 那样的“质量”参数。工具会分析图像并使用调色板压缩；完成后先看文件卡中的原始体积、结果体积和减少比例。图标、界面截图和颜色较少的插画通常能获得较明显的缩减。
想继续减小时，取消「无损」并调整右侧的「颜色数」。从 256 逐步降低到 128、64 或更低，每次都在分割线附近检查文字边缘和渐变区域。颜色数越少，文件通常越小，但色带、杂色或透明边缘变硬的风险也越高。
压缩 WebP：同样调质量，先确认观看场景
静态 WebP 的操作与 JPEG 相同：压缩完成后，在右侧调整「质量」，工具会生成预览供你对照。WebP 在相近观感下常能得到较小体积，但最终结果仍取决于原图的细节、尺寸与原有压缩程度。
把分割线拖到人物轮廓、产品纹理或文字处，并在最终会使用的显示尺寸下判断。只在缩小后的整图上看，很容易忽略过度压缩造成的细节损失。需要改变文件格式时，使用首页的「转换」模式；压缩模式会保持 WebP 格式。
压缩 GIF：调颜色数，并逐帧检查动图
GIF 使用调色板，因此右侧显示的是「颜色数」而不是质量。完成压缩后可降低颜色数来换取更小体积，但动画内容不能只看第一帧：不同帧中的文字、细线和渐变都可能受影响。
对比面板底部会出现帧选择器。用“−1 / +1”逐帧查看，或用“−10 / +10”快速跳转；确认开头、中间和结尾帧都正常后再保存。工具会保留动图的多帧结构，压缩时仍应以实际播放效果为准。
压缩 SVG：降低坐标精度，放大检查边缘
SVG 不是像素图片，压缩时右侧显示的是「精度」。精度代表路径和坐标小数的保留程度：数值越低，文件中的数字通常越短，图标和简单插画往往可以在肉眼无感的情况下减少体积。
从默认值开始逐步降低精度，观察细线、圆角、文字路径和复杂曲线。参数变化后先产生预览；如果轮廓开始抖动、细节缺失或图形位置偏移，提高精度，然后点击「应用」保存当前满意的结果。
完成压缩后的最后检查
- 先按最终使用尺寸查看图片，再决定是否需要继续减小文件。
- 把分割线拖到文字、脸部、产品边缘或透明区域，检查是否出现糊边、色带和杂色。
- 如果图片需要继续编辑，保留原图；压缩结果适合作为上传、发布或发送版本。
深入理解压缩原理
已经完成一次压缩后，再阅读下面的格式原理和选择建议，可以更有针对性地调整质量、颜色数与输出格式。
先判断你的图属于哪一类
图片压缩没有一种通用做法。选错方向，可能白忙一场：把照片压成 PNG 会越压越大，给图标调 JPEG 质量则是在破坏它。所以第一步不是打开工具，而是先看清这张图是什么。
判断标准只有一条：它主要靠连续色块构成，还是靠清晰边缘与少量颜色构成？照片、插画、渐变背景属于前者；图标、界面截图、图表、Logo、二维码属于后者。
| 图像特征 | 典型例子 | 推荐格式 | 压缩方向 |
|---|---|---|---|
| 大量连续色调 | 实拍照片、风景、人像 | JPEG 或 WebP | 调质量 |
| 平滑渐变 + 少颜色 | 扁平插画、矢量风格图 | PNG8 或 WebP | 减色或调质量 |
| 清晰边缘 + 少量颜色 | 图标、Logo、UI 素材 | SVG 或 PNG8 | 降精度或减色 |
| 含文字 | 界面截图、文档扫描、图表 | PNG（必要时 WebP） | 减色但慎用有损 |
| 动画 | 表情包、演示动图 | WebP 动图或视频 | 减色 + 减帧 + 减尺寸 |
| 矢量图形 | Logo、图标集、数据图表 | SVG | 降低坐标精度 |
记住这条分界线：图像越接近「照片」，越该用有损压缩；越接近「图形」，越该用减色或降精度。
搞懂有损与无损：这是所有取舍的根源
有损压缩会永久丢弃信息以换取体积下降，典型代表是 JPEG 与 WebP 的有损模式。它的依据是人眼对某些信息不敏感——对亮度比色彩敏感、对低频大色块比高频细节敏感。压缩算法就针对这些不敏感的部分下刀。
无损压缩保留全部像素信息，解码后能逐位还原。PNG 的 DEFLATE、GIF 的 LZW、SVG 的精简都属于这一类。代价是压缩率有天花板，通常只能省下百分之几十，而不像有损那样能省到只剩零头。
关键区别在于「能不能后悔」。无损压缩后可以反复解码编辑再保存，不会有任何损失；有损压缩则是不可逆的，每一次重新保存都会再损失一次，这就是老照片越传越糊的原因。
- 有损：体积收益大，不可逆，适合作为最终交付版本
- 无损：体积收益小，可逆，适合需要反复编辑的中间产物
- 工作流建议：原图留一份无损存档，发布用的有损版本从原图一次性生成
JPEG：调质量，但要先看原图质量
JPEG 的质量参数并不是「原图的属性」，而是「这次编码的设定」。一张图被保存为质量 60 之后，文件里并不会写着「60」这个数字——它只留下量化表，而量化表是按质量值缩放标准表得到的。
所以工具可以反推：读取文件里的量化表，枚举 1–100 的每个质量生成对应的理论表，找差异最小的那个。这就是「原始质量」的来源。
知道原图质量有什么用？避免无意义的二次损失。如果一张图已经被压到质量 55，你按 80 重压，体积会明显变大而画质不会变好（丢失的信息回不来）；你按 40 重压，体积小了但画质会进一步恶化。正确的做法是：原图低于 80 就沿用原质量，高于 80 才降到 80。
| 质量 | 体积趋势 | 观感 | 建议用途 |
|---|---|---|---|
| 92–100 | 最大 | 与原图几乎一致 | 打印、后续还要编辑、作品交付 |
| 85–91 | 较大 | 难以分辨 | 电商商品图、需要细节的展示图 |
| 78–84 | 中等 | 正常距离难辨 | 网页配图（最常用区间） |
| 65–77 | 较小 | 轻微可见 | 正文内嵌图、缩略图 |
| 50–64 | 很小 | 明显可见 | 邮件附件、仅需看清内容 |
| 低于 50 | 极小 | 严重劣化 | 不建议，除非体积是唯一约束 |
PNG：只能减色，别找质量滑杆
如果你在 PNG 上找不到质量调节，那不是工具缺功能，而是这个参数对无损格式根本不存在。PNG 的每一个像素都无损保存，压缩只发生在「怎么把数据写得更紧凑」这一层。
要让 PNG 显著变小，唯一的办法是改变数据的表示方式：从每像素 3–4 字节的真彩色，换成每像素 1 字节的调色板索引色（PNG8）。做法是把图里成百上千种颜色聚成最多 256 个代表色。
这个操作对图标、界面截图、扁平插画几乎无损——因为它们本来就没几种颜色。但对照片是灾难：照片的颜色远超 256 种，量化后会出现明显的色带与断层。看到色带，说明选错了格式，应该改用 JPEG 或 WebP。
| 图片类型 | 建议颜色数 | 放大后需要检查的地方 |
|---|---|---|
| 单色图标、纯色 Logo | 2–16 色 | 边缘是否仍平滑 |
| 彩色图标、扁平插画 | 32–64 色 | 渐变过渡是否出现色带 |
| 界面截图、含中文字 | 64–128 色 | 文字笔画边缘是否发虚或出现杂色 |
| 图表、数据可视化 | 128–256 色 | 细小图例与网格线是否断裂 |
透明通道要特别注意：PNG8 会把 8 位 Alpha 降成 1 位，半透明的羽化边缘会变成硬边。需要平滑透明时请改用 WebP。
WebP：网页配图的首选
WebP 把 JPEG、PNG、GIF 三种格式的能力合到了一起：既有有损模式（基于 VP8 帧内编码，比 JPEG 多用方向性预测，因此斜线与渐变表现更好），也支持无损、8 位透明与动画。
在同等观感下，WebP 通常比 JPEG 小 25%–35%。这个数字值得重视：如果你有一个图片较多的页面，把配图全部换成 WebP，往往比调整缓存策略带来的收益还大。
现代浏览器对 WebP 的支持已经完备，可以放心用于生产环境。如果必须兼容极老的环境，用 <picture> 元素准备 WebP 与 JPEG 两份即可。
- 原图是 PNG 且带透明：转 WebP 通常能省一半以上体积，且透明效果更细腻
- 原图是高质量 JPEG：转 WebP 收益明显
- 原图是被压得很狠的 JPEG（质量 60 以下）：转 WebP 收益有限，因为损失已经造成
- 原图是极简纯色图：PNG 减色后可能更小，值得两种都比一遍
GIF 与 SVG：两个特殊场景
GIF 的压缩逻辑和 PNG 类似（减色），但它多了时间维度。一个 10MB 的动图，减色可能只省 30%，而把尺寸从 800px 减到 400px 能直接省掉 75%。所以对 GIF 来说，压缩的优先级是：减帧率 → 减尺寸 → 减颜色数。
更值得考虑的是换格式：GIF 没有帧间预测，每一帧都要独立存储，而 WebP 动图或 MP4 视频可以只记录帧间差异。同一段内容，转成 WebP 动图通常能省掉一半以上，转成视频能省一个数量级。
SVG 则是另一套逻辑：它是用数学指令描述的矢量图形，文件里全是坐标数字。压缩的方式是降低这些数字的精度——导出工具常写出 6 位以上无意义的小数，降到 2 位通常能省 20%–50% 而肉眼无感。切记不要删掉 viewBox，它决定图形能否响应式缩放。