图片压缩

图片压缩完整教程

从有损与无损的区别，到 JPEG 质量、PNG 调色板、WebP、GIF 与 SVG 各自该怎么调，逐步讲清图片压缩的关键参数与实操流程。

如何使用图片压缩工具

按下面 4 步完成一次压缩：选择图片、启动处理、对比细节、保存结果。教程中的界面截图来自本站当前版本，按钮名称和操作顺序与首页一致。

  1. 选择图片并加入处理队列

    打开首页的「压缩」模式，点击「选择」，或直接把图片拖到虚线框中。一次可以加入多张图片；教程示例使用森林风景照片，方便观察不同格式下的体积和画质变化。

    图片加入队列后不会自动上传，也不会立即覆盖原文件。检查森林风景照片的缩略图和文件名无误后，再点击「压缩」。

    示例图片的处理全程在浏览器中完成，文件不会上传到服务器。

    森林风景照片加入 tobeimage 压缩队列后的界面，显示照片缩略图和压缩按钮
    图 1：以森林风景照片为例，选择或拖放图片后，确认文件卡出现在队列中，再开始处理。

  2. 点击「压缩」，查看第一次结果

    点击队列下方的「压缩」按钮，工具会根据格式选择合适的默认策略：JPEG、WebP 主要调整质量，PNG 主要分析颜色数，GIF 也会使用调色板压缩。

    完成后先看文件卡上的原始体积、结果体积和减少比例。如果重新编码反而变大，工具会保留原文件并明确说明，不会把更大的结果当成优化结果。

    森林风景照片压缩完成后的文件卡，显示原始文件和压缩结果的体积与减少比例
    图 2：森林风景照片压缩完成后，文件卡会显示前后体积和减少比例。

  3. 打开对比视图，调整参数并检查细节

    点击已处理的文件卡，页面会打开对比视图。拖动中间分割线，分别观察树叶、枝干、雾气和明暗过渡；不要只看缩小后的整张图。

    右侧参数取决于文件格式：JPEG、WebP、AVIF 调整质量；PNG、GIF 调整颜色数；SVG 调整坐标精度。修改参数后先看预览，确认画质满意再点击「应用」。

    需要更小体积时，优先先调整图片尺寸，再降低质量或颜色数；过度压缩会让树叶纹理、雾气和明暗过渡出现明显瑕疵。

    森林风景照片 PNG 压缩对比面板，可拖动分割线并调整颜色数
    图 3：森林风景照片以 PNG 格式处理后，可拖动分割线检查细节，并调整颜色数。

  4. 保存单张结果，或一次保存全部图片

    确认对比结果后，点击文件卡上的「保存」下载当前图片；如果队列中有多张已处理图片，点击「保存全部」可以一次下载全部结果，批量结果会打包成 ZIP。

    保存前建议保留原图，并把压缩结果作为发布或上传版本。不要在已经有损压缩的文件上反复编辑再保存，以免损失叠加。

    已压缩图片的文件卡，显示原始与结果体积、减少比例和单张保存按钮
    图 4：点击文件卡下方的「保存」下载单张结果；批量文件可在工具区点击「保存全部」。

按文件格式调整参数

完成首次压缩后，再根据图片格式调整对应控件。下面的截图均来自本站当前工具：JPEG 和 WebP 调整质量，PNG 和 GIF 调整颜色数，SVG 调整精度。

压缩 JPEG：用“质量”平衡体积与细节

加入 JPEG 后点击「压缩」。工具会读取图像的量化表来估算原始质量：高质量图片默认会压到更适合网页使用的范围；已经压得较低的 JPEG 则不会在默认流程中继续明显降质，避免无意义地叠加损失。

在对比面板右侧输入数值或拖动「质量」滑杆。数值越高，通常保留更多细节、文件也越大；数值越低，文件会更小，但要特别检查文字边缘、脸部和渐变。参数改变后会先生成预览，满意后再点「应用」。

tobeimage 的 JPEG 对比面板，右侧质量输入框设为 72，正在生成压缩预览
图 5：将 JPEG 质量调为 72 后，先查看预览，再决定是否应用该结果。

压缩 PNG：先看结果，再降低颜色数

PNG 没有 JPEG 那样的“质量”参数。工具会分析图像并使用调色板压缩；完成后先看文件卡中的原始体积、结果体积和减少比例。图标、界面截图和颜色较少的插画通常能获得较明显的缩减。

想继续减小时，取消「无损」并调整右侧的「颜色数」。从 256 逐步降低到 128、64 或更低，每次都在分割线附近检查文字边缘和渐变区域。颜色数越少，文件通常越小，但色带、杂色或透明边缘变硬的风险也越高。

tobeimage 中森林风景照片 PNG 压缩完成的文件卡，显示压缩前后的体积变化
图 6：森林风景照片完成 PNG 处理后，先从文件卡确认体积变化。
tobeimage 的森林风景照片 PNG 对比面板，颜色数为 64，右侧有颜色数滑杆和无损复选框
图 7：关闭无损并把颜色数设为 64 后，预览尚未应用，可用中间分割线检查细节。

压缩 WebP：同样调质量，先确认观看场景

静态 WebP 的操作与 JPEG 相同：压缩完成后，在右侧调整「质量」，工具会生成预览供你对照。WebP 在相近观感下常能得到较小体积，但最终结果仍取决于原图的细节、尺寸与原有压缩程度。

把分割线拖到人物轮廓、产品纹理或文字处，并在最终会使用的显示尺寸下判断。只在缩小后的整图上看，很容易忽略过度压缩造成的细节损失。需要改变文件格式时，使用首页的「转换」模式；压缩模式会保持 WebP 格式。

tobeimage 的 WebP 对比面板，右侧质量输入框设为 76，显示原图和已应用结果的体积对比
图 8：WebP 调整质量后的预览界面；确认细节和体积后再点“应用”。

压缩 GIF：调颜色数，并逐帧检查动图

GIF 使用调色板，因此右侧显示的是「颜色数」而不是质量。完成压缩后可降低颜色数来换取更小体积，但动画内容不能只看第一帧：不同帧中的文字、细线和渐变都可能受影响。

对比面板底部会出现帧选择器。用“−1 / +1”逐帧查看，或用“−10 / +10”快速跳转；确认开头、中间和结尾帧都正常后再保存。工具会保留动图的多帧结构，压缩时仍应以实际播放效果为准。

tobeimage 的森林风景 GIF 对比面板，右侧显示颜色数控件，底部显示动画帧选择器
图 9：森林风景动图压缩后，使用底部帧选择器检查不同画面，而非只看第一帧。

压缩 SVG：降低坐标精度，放大检查边缘

SVG 不是像素图片，压缩时右侧显示的是「精度」。精度代表路径和坐标小数的保留程度：数值越低，文件中的数字通常越短，图标和简单插画往往可以在肉眼无感的情况下减少体积。

从默认值开始逐步降低精度，观察细线、圆角、文字路径和复杂曲线。参数变化后先产生预览；如果轮廓开始抖动、细节缺失或图形位置偏移，提高精度，然后点击「应用」保存当前满意的结果。

tobeimage 的森林主题 SVG 对比面板，右侧精度输入框设为 1，显示山林矢量图压缩预览
图 10：森林主题 SVG 将精度设为 1 后，放大观察山峰、树木和雾线边缘，再决定是否应用。

完成压缩后的最后检查

  • 先按最终使用尺寸查看图片，再决定是否需要继续减小文件。
  • 把分割线拖到文字、脸部、产品边缘或透明区域，检查是否出现糊边、色带和杂色。
  • 如果图片需要继续编辑，保留原图；压缩结果适合作为上传、发布或发送版本。

深入理解压缩原理

已经完成一次压缩后，再阅读下面的格式原理和选择建议，可以更有针对性地调整质量、颜色数与输出格式。

先判断你的图属于哪一类

图片压缩没有一种通用做法。选错方向，可能白忙一场：把照片压成 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。

JPEG 质量的实用区间
质量体积趋势观感建议用途
92–100最大与原图几乎一致打印、后续还要编辑、作品交付
85–91较大难以分辨电商商品图、需要细节的展示图
78–84中等正常距离难辨网页配图（最常用区间）
65–77较小轻微可见正文内嵌图、缩略图
50–64很小明显可见邮件附件、仅需看清内容
低于 50极小严重劣化不建议，除非体积是唯一约束

PNG：只能减色，别找质量滑杆

如果你在 PNG 上找不到质量调节，那不是工具缺功能，而是这个参数对无损格式根本不存在。PNG 的每一个像素都无损保存，压缩只发生在「怎么把数据写得更紧凑」这一层。

要让 PNG 显著变小，唯一的办法是改变数据的表示方式：从每像素 3–4 字节的真彩色，换成每像素 1 字节的调色板索引色（PNG8）。做法是把图里成百上千种颜色聚成最多 256 个代表色。

这个操作对图标、界面截图、扁平插画几乎无损——因为它们本来就没几种颜色。但对照片是灾难：照片的颜色远超 256 种，量化后会出现明显的色带与断层。看到色带，说明选错了格式，应该改用 JPEG 或 WebP。

PNG 颜色数的经验取值
图片类型建议颜色数放大后需要检查的地方
单色图标、纯色 Logo2–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，它决定图形能否响应式缩放。