先说结论:先缩尺寸,再降质量
体积由两部分决定:像素数量和每个像素的精度。把一张 4000 像素宽的照片缩到 1600 像素,像素少了 84%,体积立刻掉一大半,而观感几乎不变——因为网页上根本显示不到 4000 像素。反过来,只把质量从 90 压到 60,省下的体积有限,却已经能看出噪点了。
所以正确的顺序永远是:先定尺寸,再调质量。本站的在线压缩工具两个参数都能调,改一下立刻能看到体积变化。
一张可以直接照做的对照表
| 用途 | 尺寸建议 | 质量建议 | 格式 |
|---|---|---|---|
| 网页正文配图 | 宽 1200~1600 | 80 | WebP |
| 网页首屏大图 | 宽 1920 | 82~85 | WebP |
| 缩略图 / 列表图 | 宽 400~600 | 80 | WebP |
| 邮件附件 / 表单上传 | 宽 1200 | 85 | JPG |
| 商品图(电商详情) | 宽 1200~1600 | 85 | WebP / JPG |
| 打印用图 | 不要缩 | 90 以上 | JPG |
质量数字对应的观感
- 90~100:几乎和原图一致,体积偏大。适合要存档、要二次编辑的图。
- 80~85:大多数人看不出差别,体积已经明显下降。这是通用推荐区间。
- 70~79:仔细对比能看出天空、皮肤这类渐变区域略有噪点,一般场景仍可接受。
- 60~69:能明显看到块状噪点,文字边缘开始发虚。
- 60 以下:除非只是做个缩略图,否则不建议。
什么时候该换格式,而不是继续压质量
如果你压的是 PNG,调质量是没用的——PNG 是无损格式,它保证每个像素原样保留。想让 PNG 变小只有两条路:缩小尺寸,或者换成 WebP。
实测下来,截图类 PNG 转成 WebP 通常能小 50%~70%,照片类能小 60% 以上。用PNG 转 WebP一步就能做完。同理,如果手上的 JPG 还是很大,转成 WebP 通常能再省三分之一。
两个容易忽略的省体积细节
一是元数据:相机拍的照片里带着拍摄时间、机型、GPS 坐标,这些对展示毫无用处,却实实在在占体积。用转换工具重新导出一次,这些数据就没了。
二是别重复压缩同一张图:JPG 每保存一次都会再损失一点点,压三四次之后画质会明显劣化。正确做法是始终从原图出发,调好参数压一次。
动手试试
打开在线图片压缩,把图片拖进去,先填最大宽度,再拖质量滑杆——每张图下面会直接显示「压缩前 → 压缩后」的体积和百分比。