操作教程
在不损失可见画质的前提下压缩图片
大多数图片从相机或设计工具导出时,都比浏览器或邮件实际需要的要重得多。压缩并不等于让画质变差:在合适的质量设置和格式下,输出看起来和原图一模一样,加载速度却快上两到五倍。关键在于先选对格式,再调整质量。
分步操作
- 在动质量滑块之前,先确定输出格式。照片选 JPEG 或 WebP,只有在需要透明背景或无损像素精度时才用 PNG。在相同视觉质量下,WebP 比 JPEG 小 25% 到 35%,而且所有现代浏览器都支持它:只要你能掌控图片的显示位置,就优先使用它。
- 把图片拖入压缩器,调整质量滑块。照片从 80% 开始,并把压缩前后的预览并排对比。如果文件仍然太大,就降到 70:在正常屏幕尺寸下这点差异很少看得出来。对于带锐利文字或纯色块的图形,请切换到 PNG 无损,或者在源文件为矢量图时尝试 SVG。
- 下载结果,并在发布前以 100% 缩放查看。如果网站上传时会再次重新压缩你的图片(社交媒体通常会这样),那就发送一个质量略高的版本,让两次压缩叠加后仍能接受。压缩器完全在你的浏览器中运行:你的文件永远不会离开你的设备。
为什么格式选择比质量数值更重要
质量 80 的 JPEG 和质量 80 的 WebP 在屏幕上看起来相近,但 WebP 文件明显更小。AVIF 还能更进一步,只是编码时间更长。PNG 常被误用于照片,对于同一张照片,它生成的文件会比 JPEG 大上好几倍,因为它在设计上就是无损的。压缩前先缩放尺寸也很有帮助:一张 4000 像素宽的照片为博客栏目标题缩到 1200 像素,缩放本身带来的瘦身远超任何质量设置。
为什么要在本地压缩而不是上传
服务器端图片服务会让你上传原图(往往是手机里的一张原始照片),再下载压缩后的副本。这里的压缩器用同样的算法在你的浏览器中运行:什么都不上传,无需账号,没有排队,你的原始文件始终留在设备上。你可以一次批量处理多张图片,结果立刻就能使用或分享。
本指南用到的工具
常见问题
我怎么知道压缩是否过头了?
把输出放大到 100% 缩放,观察有纹理的区域:头发、织物、树叶。有损压缩最先在这些区域表现为块状斑块或被抹平的细节。如果你在 100% 缩放下能看到,手机上的访客也会看到,那就把质量设置调高 5 到 10 个点再试一次。
应该在压缩之前还是之后缩放尺寸?
先缩放。一张 4000 像素宽的图片缩到 1200 像素,无论质量如何都会丢掉四分之三的像素,这始终是更大的节省。用图片缩放工具设置你需要的确切像素尺寸,然后再针对格式和质量进行压缩。先压缩一张超大图片、之后再缩放,只是两头都白费力气。