Squoosh

上传图片时，最让人纠结的往往是文件大小。

原图太大，网站不让传；压缩得狠一点，照片里的细节没了，截图上的小字也开始发虚。反复导出几次，最后自己都分不清该用哪一张。

Squoosh

Squoosh 是 GoogleChromeLabs 开源的浏览器图片压缩工具，它支持边看画质，边调文件大小，这也是他的特色能力，实时查看压缩后与原图的对比。

它本身还是一款图片压缩工具，支持调整图片尺寸、切换输出格式和设置压缩质量，适合逐张检查图片后再导出。

注意网站为全英文，一般用户只需要去调整左下角的滑块，调整压缩质量即可，其他的参数默认即可。

使用教程

第一步，拖入图片，先别急着改尺寸

打开网站，把图片拖进去，或者点击页面选择文件。

进入编辑页面后，通常左侧是原图，右侧是压缩后的预览，中间有一条可以拖动的分界线。下方会分别显示文件大小。

建议先保持原始尺寸，只调整压缩设置。

这样比较时，你能知道画质变化主要来自压缩。如果同时缩小图片、降低质量、减少颜色，就很难判断究竟是哪一步让图片变糊了。

配图建议：截取编辑页面，标出“原图”“压缩预览”“对比分界线”和“文件大小”。

第二步，根据图片内容选格式

格式不必挨个研究，先看你要处理什么图片，以及上传平台支持什么格式。

普通照片，可以先试 MozJPEG。

这里的 MozJPEG 是 JPEG 编码器，导出的是常见的 JPEG 图片。如果目标平台接受 WebP，也可以换成 WebP 比较一下，在相近观感下看看哪个文件更小。

带很多小字的截图，先试 OxiPNG。

它输出 PNG，适合优先保留文字和线条。保持原始尺寸、不减少颜色时，可以先看看无损优化能省下多少空间。已经优化过的 PNG，可能不会明显变小。

如果 PNG 仍然超过限制，再尝试其他格式，并仔细检查小字。

需要透明背景的图片，不要选 JPEG。

例如抠好背景的商品图、透明图标，应选择支持透明度的 PNG 或 WebP，并在导出后确认透明效果。

选格式之前，最好先看上传要求。平台只接受 JPG、PNG 时，压出了更小的 WebP 也用不上。

第三步，调质量，重点检查三个地方

使用 MozJPEG 等有损格式时，可以通过 Quality 调整质量。

先从默认值开始，逐步往下调，每调一次就看一下文件大小，再拖动分界线比较。不要只盯着“减少了百分之多少”。

检查画质时，可以固定看下面三个位置。

1. 小字有没有发虚

优先找图片里最小的一行文字。

看看笔画是否还分得开，字周围有没有模糊的杂点，浅色小字是否开始和背景混在一起。

尤其是教程截图，整张图缩小后可能看着还不错，但一放大，菜单文字就不容易认了。文字需要读清楚的图片，应把可读性放在文件大小前面。

2. 边缘有没有变脏

检查人物头发、产品轮廓、图标边缘，以及深浅颜色交界的位置。

压缩过度时，边缘附近可能出现杂点、色块，或者原本清晰的细线变得松散。这些变化在平坦背景上往往更容易发现。

3. 文件大小是否已经够用

假设上传要求是不超过 500KB，当图片已经低于限制、细节也能接受，就可以停下来了。

不必为了把文件进一步压到 100KB，继续牺牲画质。

另外，Quality 设为 75，不代表文件会缩小 75%，也不是保留了原图 75% 的画质。不同格式的质量数值也不能直接横向比较。

配图建议：放大同一处小字或物体边缘，展示质量较高与压缩过度时的差别，同时保留文件大小读数。

第四步，还超限，再考虑缩小尺寸

如果调整质量之后仍然太大，可以打开 Resize，适当降低图片宽高。

比如一张几千像素宽的照片，只用于文章中的小幅配图，未必需要保留全部尺寸。但如果是密密麻麻的教程截图，缩得太小，文字本身占的像素就不够了，再提高质量也补不回来。

检查时建议看两遍：

• 在 100% 缩放下看细节，检查文字、轮廓和压缩痕迹。
• 按实际展示大小再看一遍，确认读者正常浏览时是否清楚。

Squoosh 的预览支持缩放。不要只在“整张图片刚好塞进屏幕”的状态下判断画质，那样容易忽略问题。

第五步，下载后再打开检查

确定效果后，点击压缩结果一侧的下载按钮。

保存完成后，再打开导出的图片，确认格式、尺寸、文件大小以及文字清晰度。如果有透明背景，也一起检查。

原图记得留一份。 后面需要换尺寸或重新调整质量，尽量从原图开始，避免反复压缩已经有损处理过的文件。