如何在不损失质量的情况下压缩图片

大图像文件让网站变慢、塞满邮件收件箱、吞食存储空间。压缩它们是让一切提速的最简单办法之一,而且你可以做到不安装任何软件、不向服务器上传任何东西,并且通常没有可见的画质损失。合适的压缩设置可以为照片瘦身 80%,在正常观看距离下看起来一模一样。

图像压缩简史

作为数字概念的压缩比 Web 更古老。早期位图格式中的行程编码(1986 年的 TIFF,更早的 PCX)把重复颜色压缩为「计数加值」,大大缩小了截图与简单图形。1992 年的 JPEG 标准把有损压缩带入主流,用离散余弦变换(DCT)丢弃人眼不易察觉的信息,这个思想至今仍驱动着多数摄影压缩,已经三十年。

PNG 于 1996 年带着基于 DEFLATE 的无损压缩出现,非常适合 JPEG 弄糟的截图与徽标。WebP(Google,2010)增加了更聪明的有损模式,比 JPEG 小 25-35%,以及比 PNG 小 20-30% 的无损模式。AVIF(2019)又下了一大步,通常在相同质量下只有 WebP 的一半大小。JPEG XL(2021)是最新的挑战者,旨在用单一格式取代它们所有,既能无损、又能有损,还能做动画,甚至能把旧 JPEG 来回重新压缩而不产生额外损失。浏览器采纳是限制因素;算法本身早已大幅领先 JPEG 的效率。

图像文件大小为什么重要

网页上的每张图像都必须被访客浏览器下载。一张未压缩的手机照片可达 5-10 MB。乘以多张图像,你的页面在快连接上会明显变慢,在慢连接上要好几分钟。更小的图像意味着:

• 更快的页面加载:访客更早看到内容。Google 的 Core Web Vitals(LCP,最大内容渲染)常常由主图主导;把它的大小减半,通常 LCP 时间也减半。
• 更低的带宽占用:对流量套餐有限的移动用户很重要,如果你流量大,对你自己的托管账单也是。
• 更容易分享:邮件附件保持在大小限制以下(Gmail 上限 25 MB),聊天 App 也不再背着你转码你的照片。
• 更多存储空间:你的手机、云盘或服务器能放更多文件。一次 5000 张的旅行从 5 GB 变成 1 GB。
• 更好的 SEO:页面速度信号纳入 Google 搜索排名,所以一个图片繁重却快速加载的页面会超过同样但慢的页面。

图像压缩如何工作

有两种压缩,各有取舍。

有损压缩(JPEG、WebP、AVIF)移除你眼睛不太会注意的图像数据。在中等画质(约 60-80%)下,结果在视觉上与原图几乎相同,但体积可以减少 50-80%。算法分三步进行:把 RGB 转换为 YCbCr(把亮度与色度分开)、对色度通道下采样(人眼对色度细节远不如对亮度敏感)、再用 DCT 丢掉高频细节。每一步都不带可感的画质损失,却节省巨大的数据量。

无损压缩(PNG、音频的 FLAC)重新组织数据以更省空间,但不抛弃任何东西。图像与原始完全像素一致,但节省的体积更小,通常照片 10-30%、截图和徽标 30-60%。

混合模式格式(WebP、AVIF、JPEG XL)让你按文件选择有损或无损。多数现代照片流水线对外交付采用有损,归档保留无损母版。

如何在线压缩图像

1. 上传你的图像:把一张或多张图像(JPEG、PNG、WebP、AVIF、HEIC、GIF、BMP,每张不超过 50 MB)拖入工具,或点击浏览文件。一切都在本地处理;不上传任何内容。
2. 调整画质设置:用画质滑块控制压缩级别。值越低,文件越小、压缩越多。你也可以设置最大宽度、改变输出格式或指定目标文件大小。
3. 预览结果:多数工具会显示前后缩略图和新的文件大小。调到适合你用途的折中。
4. 下载结果:逐个下载压缩后的图像,或点击「全部下载」获得批量 ZIP。

在幕后,文件通过 FileReader 读取,由浏览器的图像管线解码,绘制到离屏 canvas 上,然后通过 canvas.toBlob 以目标画质重新编码。WebP、AVIF 与 MozJPEG 编码器的 WebAssembly 版本提供近乎原生的压缩性能,无需离开页面。

真的好用的画质设置

没有放之四海皆准的「合适」画质。下表是一个起点;再根据你图像的真实表现去调。

取得最佳效果的小贴士

• 照片从画质 80 起步,截图从 90 起步,在这些点上,多数观众分辨不出与原图。想要更小就再往下;有细节或文字就调高。
• 能用 WebP 就用,2024 年 WebP 在浏览器中的支持率超过 97%。对极少数不支持的,用 picture 元素提供 JPEG 回退。AVIF 更省,但要确认编码器够快。
• 压缩前先调整大小,在网站上以 800px 显示的 4000px 照片,无论画质如何都浪费带宽。先调整到你实际会展示的最大尺寸(常为 CSS 像素宽度的 2 倍,以适配 retina 屏),再压缩。
• 保留你的原始文件,始终压缩副本,不是原始文件。你随时可以从原文件重新压缩,但永远无法恢复因压缩失去的数据。
• 公开分享时剥离元数据,EXIF 数据可能包含 GPS 坐标、相机型号,甚至你的姓名。浏览器压缩器通常自动剥离;隐私要紧时请确认。
• 为邮件设目标文件大小,Gmail 附件上限 25 MB,许多企业系统上限 10 MB。每张图以 1-2 MB 为目标比较稳妥。
• 为 Web 选用渐进式 JPEG,渐进式 JPEG 自上而下分次加载,在变清晰前先显示模糊预览。现代解码器流畅处理它们,通常还比基线版本略小。
• 避免一遍又一遍地重复压缩同一张图,每次都会增加伪影。如果可能再编辑,保留无损母版,每次从它重新导出。

什么时候用哪种格式

2024 年的新内容,最佳实践是在支持时投放 AVIF,WebP 作为通用现代回退,JPEG 或 PNG 作为最后回退。HTML 的 picture 元素能干净地处理这一切。

常见陷阱

• 压缩已经压缩过的图像,把 JPEG 以画质 80 再保存一次并不会让节省翻倍;只是又叠加一次伪影。从原始(或无损母版)只压缩一次。
• 内容用错了格式,把带文字的徽标按 JPEG 压缩,字母周围会出现可见振铃。把 4000x3000 的照片存成 PNG 会得到 30 MB 的文件。让格式匹配内容。
• 画质滑块到 90 还觉得太狠,JPEG 画质刻度不是线性的。从 90 到 80 节省得远比 100 到 90 多,而几乎没有可见代价。
• 忘了视网膜屏,在 600px CSS 槽位中显示的 600px 图像,在手机和现代笔记本上显软。导出为 CSS 像素的 2 倍,让浏览器自己缩小。
• 剥离了色彩配置文件,丢掉内嵌的 ICC 配置可能在广色域屏上让颜色明显偏移。现代压缩器会保留;旧的可能不会。
• 所有 PNG 都按同样位深保存,黑白文字截图能装进 PNG-8(256 色),仅为 PNG-24 大小的一小部分。对图形,用 pngquant 这样的量化器能省下不少。
• 重新编码到更差的格式,把 WebP 转回 JPEG 会同时丧失画质与体积优势。如果需要 JPEG 回退,请从原始母版编码,而不是从 WebP。
• 在小尺寸下相信视觉对比,缩略图里看不见的伪影,有人在 4K 屏上一放大就一目了然。请按实际显示尺寸测试。
• 忘了 alpha 通道,JPEG 不支持透明度。把透明 PNG 压缩为 JPEG 会用白色(或工具选定的颜色)填充背景。
• 动画用 GIF,GIF 比 MP4 或动画 WebP 更大、质量更差。现代交付几乎总要转换。

替代工具与库

对一两张图,网页压缩器是最快路径。对批量或脚本化流水线,命令行工具与库接手。

要自动化产品照流水线,sharp + MozJPEG + AVIF 在 2024 年给出最佳速度与画质比。对一次性上传,网页工具在便利与隐私上胜出。

隐私与压缩器

图像压缩器完全在你的浏览器中运行。你选择的文件用 FileReader API 读取,由浏览器的图像管线解码,绘制到离屏 canvas 上,然后通过 canvas.toBlob 重新编码。没有上传、没有日志、没有共享。对于敏感材料,内部仪表盘截图、身份证扫描件、合同草稿作为图像证据,这种仅本地的流程是信任陌生人服务器与谁也不信任之间的差别。即便是普通照片也常带 EXIF 元数据(GPS 坐标、设备序列号、时间戳),你可能不希望第三方看到;基于 Canvas 的管线默认会剥离多数 EXIF,而无上传意味着这些数据本来也不会离开页面。对于像把照片变小这样的日常任务,默认的隐私应当是:任何东西都不离开页面、不被存储、不被分享。