🖼️ 图片压缩完全指南：在保持画质的同时减小文件大小

2026年5月9日 · 阅读约 9 分钟

网页慢的原因大多数时候不是代码写得烂——是图片太大了。数据显示，图片平均占网页总大小的 50% 以上。你拍一张 4000px 的照片直接传到网站上，加载速度能快才怪。学会压缩图片，是最立竿见影的网页优化手段之一。

有损压缩 vs 无损压缩

有损压缩（Lossy）

扔掉人眼不太敏感的图像信息来减小文件。JPEG 就是个典型例子。压缩得越狠，文件越小，但压缩过头了就会出现那种模糊的方块（伪影）。

• ✅ 压缩比高，文件更小
• ❌ 画质有损失，过度压缩会出现伪影
• 适合：照片、复杂的真实场景图片

无损压缩（Lossless）

优化数据存储方式，不损失任何画质。PNG 就是无损的。

• ✅ 画质完全保留
• ❌ 压缩比有限，文件相对较大
• 适合：图标、截图、文字图片、需要透明背景的图片

WebP：Google 推出的新一代图片格式

WebP 这东西挺有意思——它同时支持有损和无损，比 JPEG 小 25-35%，比 PNG 小 26%，还支持动画和透明通道。技术上说，应该全面替代 JPEG 和 GIF 了。唯一的问题是部分老旧浏览器不支持——但 2026 年了，这个顾虑已经小了很多。

用我们的 在线图片压缩工具 可以把图片转成 WebP 格式并压缩优化。

不同使用场景的最佳格式

实用图片优化技巧

1. 选择合适的尺寸

4000px 宽的相机原图直接传上博客？别。根据实际显示尺寸来。对大多数博客来说，800px 宽的 JPEG 就足够了。

2. 使用响应式图片

<img src="photo-800.jpg"
     srcset="photo-400.jpg 400w,
             photo-800.jpg 800w,
             photo-1200.jpg 1200w"
     sizes="(max-width: 600px) 400px, 800px"
     alt="描述">

3. 延迟加载（Lazy Loading）

<img src="photo.jpg" loading="lazy" alt="描述">

原生 loading="lazy" 属性，浏览器只在图片即将进入视口时才加载。一行代码换几倍的加载速度优化。

4. 使用 CDN

图片 CDN（比如 Cloudinary、Imgix）能自动选择最优格式、调整尺寸、压缩质量，还能全球加速分发。

5. 优先用 JPEG/WebP 而非 PNG

不需要透明背景和无损保真的话，别用 PNG。同画质的 PNG 文件可能比 JPEG 大 5-10 倍。

常见问题

Q: 什么质量值最适合网页图片？

JPEG/WebP 质量值 80-85% 是绝大多数网站的最佳平衡点。肉眼基本看不出差别，文件能小 60-80%。

Q: 大量图片怎么批量处理？

可以用 Squoosh CLI、ImageMagick 这类命令行工具批量处理。少量图片的话，用我们的在线工具逐张处理也挺快。

Q: AVIF 格式值得用吗？

AVIF 压缩率比 WebP 更高，但浏览器兼容性还不够好（不支持 Safari 早期版本）。可以作为补充格式用在比较前沿的项目上。