网页图片压缩：你究竟能省多少？（2026）
网页图片压缩：你究竟能省多少？
你的站点 Core Web Vitals 飘红，Lighthouse 分数死死卡在 60 以下，审计工具一遍遍喊"properly size images"和"use modern image formats"。你压了一张最大的图，页面权重降了 1.2 MB，LCP 一下从 3.4 s 掉到 1.8 s。图片压缩仍是任何网站性价比最高的性能优化之一——前提是你理解每根杠杆到底在做什么。
本文用真实图片实测：JPG 画质 80、WebP、AVIF、激进缩放各能省多少字节。我们也会讨论什么时候把图片重新编码到"现代"格式反而得不偿失，以及如何用 Ai2Done 的 Image Compress 工具 在浏览器里完成这一切。
TL;DR
- 压缩前先缩放——4000×3000 的照片以 800×600 显示，不管格式约 95% 的字节都在浪费。先缩放、再压缩。
- JPG 画质 80 → 90 是照片的甜点——比画质 100 小 50-70%，肉眼相同。
- WebP 在同等画质下比 JPG 省约 25-35%，2020 年起全浏览器支持。
- AVIF 在同等画质下比 JPG 省约 50%，但编码慢 5-10×。高流量页面值得。
- 用 Ai2Done Image Compress 在浏览器里压缩，左右对比看大小 vs 画质。
为什么这件事比看起来更难
你可能以为"压缩这张图"是一个决定。实际上图片压缩至少有 4 根独立杠杆，相互影响也不直观：
- 尺寸（宽×高）——通常最高杠杆。4000×3000 的照片像素数是 1000×750 的 16 倍。
- 格式（JPG、WebP、AVIF、PNG）——编码方法本身。
- 画质设置（JPG/WebP 是 1-100，AVIF 略不同）——编码器丢弃信息的激进程度。
- 色彩深度与元数据（24 位 vs 8 位、剥离 EXIF、ICC 配置）——通常是不大但免费的收益。
朴素的"压缩这张图"工具只动杠杆 3，把最大那笔节省留在桌上。现代工具——包括我们的——至少让你显式选这四项。
另一复杂源：浏览器支持与你的受众。AVIF 在 Chrome、Edge、Firefox、Safari 16+ 上很棒；老 Safari 需 JPG 回退。WebP 除了 IE 11（Microsoft 2022 年终止支持，但企业站点仍能见到）之外哪里都行。2026 年大多数公开站点 WebP 安全；AVIF 需要 <picture> 加 JPG 回退。
实测：3 MB 照片用每种方式压一遍
我用一张代表性测试图——4032×3024 的 iPhone 拍摄城市天际线，相机默认画质（约 92）下的 3.1 MB JPG。每根杠杆单独的效果：
| 操作 | 输出大小 | 占原图 | 视觉差异 |
|---|---|---|---|
| 原图 (JPG q92, 4032×3024) | 3.1 MB | 100% | — |
| 缩放到 1920×1440（网页 hero 尺寸） | 0.95 MB | 31% | 在 hero 尺寸下显示无差 |
| JPG 画质 85（不缩放） | 1.4 MB | 45% | 多数观众几乎察觉不到 |
| JPG 画质 80（不缩放） | 0.92 MB | 30% | 正常观看距离不可分 |
| JPG 画质 70（不缩放） | 0.55 MB | 18% | 近看略软 |
| WebP 画质 80（不缩放） | 0.62 MB | 20% | 与 JPG q85 等价 |
| AVIF 画质 65（不缩放） | 0.38 MB | 12% | 与 JPG q85 等价 |
| 缩放 1920×1440 + AVIF q65 | 0.14 MB | 4.5% | 网页用途不可分 |
| 缩放 1920×1440 + WebP q80 | 0.23 MB | 7.5% | 网页用途不可分 |
| 缩放 1920×1440 + JPG q80 | 0.32 MB | 10.3% | 网页用途不可分 |
要点：缩放 + 现代格式的组合让你在零可见画质损失下减少 90-95%。任一杠杆单独都只能到 30-45%。这就是为什么 Lighthouse 同时吼你"properly size"和"use modern image formats"——它们是相乘的。
方法一：Ai2Done Image Compress（浏览器端、多杠杆）
Ai2Done Image Compress 工具 在你的浏览器内同时操作四根杠杆：
- 在任何现代浏览器中打开 /tools/image_compress。
- 拖入图片——支持 JPG、PNG、WebP、AVIF、HEIC。一次性批量上传几十张没问题。
- 选输出格式：JPG（通用）、WebP（现代，省 25%）、AVIF（现代，省 50%，编码慢）、PNG（无损，只用于图表与截图）。
- 设画质：80 是照片通用甜点；缩略图 70；hero 90。
- 可选缩放：设最大宽度或最长边。自动保留宽高比。
- 点击压缩——批量任务会得到所有优化图打包的 ZIP。
侧边栏展示原图 vs 当前设置下压缩结果的并排预览，给出字节大小与视觉差（PSNR、SSIM——感知质量指标）。实时拖动画质滑杆即可看到权衡，确认前秒级反馈。
全部在你的浏览器内运行。照片不上传任何服务器，包括我们的。编码器分别是：JPG 用 mozjpeg-wasm、WebP 用 libwebp-wasm、AVIF 用 libavif-wasm——都是真正的参考实现，启用 WASM SIMD 加速。
方法二：Squoosh.app（Google 开源工具）
单图精细调优，前端社区最爱的是 Google 的 Squoosh.app。同款架构（全浏览器内运行），单图 UX，对每一个编码器都暴露极细旋钮。批量更慢（无并行），UX 也假设你懂 mozjpeg 的色度子采样是什么——但对偶尔的"把这张 hero 图调到极致"，无可匹敌。
方法三：构建管线里的 imagemin
要把优化做进站点构建：
npm install --save-dev imagemin imagemin-mozjpeg imagemin-webp imagemin-avif
# 构建脚本里
import imagemin from 'imagemin';
import imageminMozjpeg from 'imagemin-mozjpeg';
import imageminWebp from 'imagemin-webp';
await imagemin(['src/images/*.{jpg,png}'], {
destination: 'build/images',
plugins: [
imageminMozjpeg({ quality: 80 }),
imageminWebp({ quality: 80 }),
]
});
适合频繁更新图片的认真站点——优化每次构建自动跑、无手动步骤。一次性批量或"我加了一张 hero 图"，浏览器工具更快。
方法四：Next.js / Astro / 框架自带的图像优化
现代框架内置图像优化，处理"缩放 + 提供现代格式 + 回退"的整条管线：
- Next.js：
<Image>组件自动生成 srcset、按可用性供应 WebP/AVIF 与 JPG 回退、并懒加载。 - Astro：
<Image>组件同样。 - Gatsby：
gatsby-plugin-image同样。 - Cloudflare Images：把任何源图通过转换 URL 提供——
?width=800&format=auto，每位访客拿到正确格式的正确尺寸。
新站点优先用框架内置；静态或遗留站点走浏览器/CLI 压缩。
浏览器压缩器是怎么做的（技术细节）
Ai2Done Image Compress 工具 构建于三个 WebAssembly 编码模块：
- mozjpeg-wasm（Mozilla 的 JPEG 编码器，同画质下比 libjpeg-turbo 强约 10%）
- libwebp-wasm（Google WebP 参考实现）
- libavif-wasm（AV1 图像格式编码器，比 JPG 慢 5-10× 但产出文件最小）
解码（输入侧）用浏览器内建 Image 与 createImageBitmap 处理 JPG、PNG、GIF、WebP、BMP、ICO——零额外依赖。HEIC 走 libheif-wasm（约 5 MB 额外，仅在检测到 HEIC 上传时按需加载）。
值得说的设计选择：并排实时预览。你拖动画质滑杆时，两侧面板以约 60fps（小图）或约 10fps（大图）更新，用 OffscreenCanvas 在 Web Worker 里做去抖重编码，UI 永不卡顿。这让你能秒级找到甜点，而不是"猜一次试一次"。
批量任务我们用 Web Worker 池（大小为 navigator.hardwareConcurrency - 1），8 核机器并行编码 8 张图。AVIF 编码是瓶颈——我们把 AVIF 并行度上限设为 2，避免低端设备 OOM。
常见问题
Q：是不是该全用 AVIF？ A：不是。AVIF 同画质下文件小约 50%，但编码慢 5-10×。静态高流量页面——一次性编码成本，带宽节省永久——值。动态生成图片（按用户内容、实时预览），编码成本权重更高，WebP 是更好取舍。
Q：WebP / AVIF 在所有浏览器都能用吗？
A：WebP 在 2020 年起发布的每个浏览器都支持——Chrome、Edge、Firefox、Safari 14+、Opera。AVIF 在 Chrome、Edge、Firefox、Safari 16+ 上支持。Safari <16 的访客（2026 年约 3% 流量）请通过 <picture><source srcset="hero.avif" type="image/avif"><img src="hero.jpg"></picture> 提供 JPG 回退。
Q：压缩会剥离 EXIF / GPS / 相机数据吗？ A：默认剥离全部元数据（文件更小、无 GPS 泄露）。要保留相机设置或方向标签，勾选"保留 EXIF"。公开分享的图片默认剥离是正确选择——社交分享照片里的 GPS 元数据已造成过真实隐私事件。
Q：JPG 画质 80 与 90 的区别？ A：画质 90 在多数照片上视觉相同的输出下，文件比画质 80 大约 50%。画质 80 是通用"不放大 4× 看不出区别"甜点。仅当图像会被下游再次编辑时才用 90+（每次编辑都增加画质损失，从画质 90 起步留更多余量）。
Q：压成 JPG 画质 80 会伤 SEO 吗？ A：相反——更快的页面加载提升 SEO。Google Core Web Vitals（尤其是 LCP）参与排名。图片权重通常是 LCP 慢的 #1 原因。hero 图缩半往往意味着 LCP 快半秒，这被 Google 嘉奖。
Q：电商有 1000 张产品图，能一次全压吗？ A：能，但分批 50-100 张以免浏览器内存压力。拖 100 张、拿 ZIP、再来一批。自动化流水线请走 imagemin（方法三）。
现在就试
几秒钟为网页压缩图片，并排预览：
拖入图片、选格式、拖动画质、看字节掉下来。无上传、无注册。
相关阅读
- HEIC 转 JPG：在每种设备上的正确做法——iPhone 照片压缩前先转格式
- 浏览器内 AI 把图片 4 倍放大（免注册）——你需要更多像素时
- 图像 OCR：100+ 语言里抽出文字
- 浏览全部图片工具
最后更新于 2026-06-14。Image Compress 工具 100% 在你的浏览器内运行——你的照片永远不会离开设备。我们不收集、不记录、不分析你处理的任何文件。