图片压缩是提升网页性能最有效的优化方法之一。正确压缩的图片看起来与原图完全一样,但加载速度却能提升 50% 到 80%。以下是如何正确进行图片压缩的方法。
“质量损失”的真正含义
人们常说的“无损压缩”通常指的是肉眼无法察觉的画质损失,而非数学意义上的无损压缩。人类视觉系统并不完美:它对色彩变化的敏感度低于对亮度的敏感度,对复杂区域细节的敏感度低于对平坦区域的敏感度,对平滑渐变区域的瑕疵比对纹理区域的瑕疵更敏感。
智能压缩算法正是利用了这些限制。在正常观看距离下,压缩良好的 JPEG 图片,质量为 80 和 100 时,几乎没有区别。只有放大到 200% 以上并进行并排比较时,才能看出差异。
不同格式的正确压缩设置
JPEG / JPG
JPEG图像质量通常用1到100之间的数字表示。网络图像的标准推荐质量为80-85:
- 质量 100:接近无损压缩,文件体积巨大
- 质量等级 85:比质量等级 100 小约 30%,基本没有肉眼可见的差异。
- 质量 80:体积缩小约 45%,对于大多数摄影来说仍然非常出色
- 质量 70:尺寸缩小约 60%,平滑渐变部分可能出现轻微瑕疵
- 质量 60:尺寸缩小约 70%,适用于缩略图和非关键图像。
针对不同的使用场景:
- 主图:质量 80–85
- 博客文章缩略图:质量 70–75
- 产品照片(电商):质量 80–85
- 社交媒体导出:质量 75–80
PNG
PNG 使用无损压缩——您无法通过调整“质量”设置来降低图像质量。但是,您可以:
- 降低颜色深度:如果 PNG 仅使用 16 或 32 种不同的颜色(徽标、图标),则保存为 8 位(256 色)调色板 PNG 可以显著减小文件大小。
- 使用更好的压缩算法:像 PNGQuant 这样的工具应用有损调色板缩减,可以在不产生明显变化的情况下将 PNG 文件大小减少 60-80%。
- 转换为 WebP:对于以 PNG 格式存储的照片,转换为 WebP 格式比 PNG 压缩节省更多空间。
WebP
WebP 压缩质量与 JPEG 类似,但在相同质量水平下可以生成更小的文件。有损 WebP 的质量 75–80 在视觉上与 JPEG 的质量 85 相当,但文件大小却小了约 25–35%。
分步指南:无损压缩
照片格式(JPG/JPEG)
- 从质量 80 开始,并与 100% 缩放的原图进行比较。
- 特别注意:平滑的渐变(天空、肤色)、锐利的边缘、文字叠加层
- 如果没有看到任何瑕疵,请尝试 75
- 坚持选择质量最低、看不出任何差别的产品。
用于图形和徽标(PNG)
- 首先,检查图像是否可以使用索引调色板(有限颜色)。
- 如果照片是以 PNG 格式存储的,请将其转换为 WebP 格式。
- 对徽标使用基于 PNGQuant 的压缩算法——通常可实现 60% 以上的压缩率
对于任何图像:压缩前请调整大小
最容易被忽视的优化:压缩前请确保图像大小正确。
如果你的网站显示的图片宽度为 800 像素,那么上传时也应该设置为 800 像素,而不是 4000 像素。以显示尺寸的 4 倍上传图片会浪费带宽,并且增加压缩难度。
- 首先将图像调整到最大显示尺寸(调整图像大小工具)
- 然后压缩到目标文件大小
批量压缩
如果您有几十张或几百张图片需要压缩(产品照片、博客图片、图库照片),请使用我们的图像压缩器,它支持一次上传多张图片,并对所有图片应用相同的质量设置。
选择合适的格式以实现最大压缩率
| 格式 | 最佳用途 | 典型压缩与 PNG 的比较 |
|---|---|---|
| JPG (q80) | 照片 | 缩小 85–90% |
| WebP (q75) | 照片 + 图形 | 缩小 90–95% |
| PNG(8 位) | 少色 Logo | 尺寸缩小 40-60% |
| WebP 无损格式 | 适用于徽标、屏幕截图 | 比 PNG 格式小 20-35% |
| AVIF (q60) | 照片 | 缩小 92–97% |
检查结果
压缩后,在浏览器或图像查看器中将图像放大到 100% 并检查:
- 平滑区域(天空、皮肤、渐变):检查是否存在条带或块状瑕疵
- 锐利边缘(文字、线条):检查是否有振铃或模糊现象
- 杂物较多的区域(例如树叶、织物):这些地方能很好地隐藏文物——通常不会造成太大影响。
- 纯色:在高压缩率下可能会显示量化噪声
如果出现瑕疵,请将质量设置提高 5-10 级,然后重试。
Web 目标文件大小
以下是2026年网络图片的一些实际目标:
| 图像类型 | 目标尺寸 |
|---|---|
| 主图/横幅图 | 小于 200 KB |
| 博客文章标题 | 小于 100 KB |
| 产品缩略图 | 小于 50 KB |
| 标志 | 小于 20 KB (PNG) 或使用 SVG |
| 社交媒体帖子 | 小于 300 KB |
使用 PicsSizer 的图像压缩器 将图像压缩到这些目标,并完全控制质量设置——无需帐户,无需服务器上传。
常见问题解答
- 我应该使用哪种图像压缩质量设置?
- 对于照片而言,JPEG 质量 75-85 是最佳选择——文件大小比质量 100 小 40-60%,在正常观看距离下,画质几乎没有差别。对于网页缩略图,质量 60-70 通常也足够了。在最终确定设置之前,务必先进行视觉对比。
- 有损压缩和无损压缩有什么区别?
- 有损压缩(JPG 和 WebP 使用)会永久性地丢弃部分图像数据以减小文件大小。丢弃的数据经过智能选择,以最大程度地减少对图像可见性的影响。无损压缩(PNG 和 WebP 的无损模式使用)则在不丢弃任何数据的情况下进行压缩——解压缩后的图像像素级完美。
- 图片压缩到什么程度才不会影响画质?
- 这很大程度上取决于图像内容。一张带有柔和渐变的照片,即使压缩到质量 70 也不会出现明显的瑕疵。而一张文字清晰锐利或色彩单一的图像,即使压缩到质量 80 也可能出现瑕疵。务必进行目视测试,并将图像放大到 100% 以检查是否存在瑕疵。
- 调整图像大小会减小其文件大小吗?
- 是的,效果显著。将图片尺寸减半(例如,从 2000 像素减至 1000 像素)通常可以使文件大小减少 4 倍甚至更多。如果您的网站上只需要一张 800 像素宽的图片,那就没有必要上传 4000 像素的图片了。
- 在线免费压缩图片的最佳工具是什么?
- PicsSizer 的图像压缩器允许您直接在浏览器中压缩 JPG、PNG、WebP 和其他格式的图像,并可调节压缩质量。它是免费的,在本地处理图像(无需上传到服务器),并且支持批量压缩。