Small.imSmall.im
返回博客

如何在不损失画质的情况下缩小图片体积

Small.im Team
2026年3月26日
5 分钟阅读
blog.tags.tutorial压缩blog.tags.optimization

一份实用指南，教你如何聪明地压缩图片 —— 选择正确的格式、调整最佳画质参数，以及批量处理数百张文件。

在 Web 世界里，每一个 KB 都至关重要。加载缓慢的图片会让访客抓狂，拖累搜索排名，还会增加带宽开支。好消息是：你完全可以在保持画面清晰的前提下大幅缩减文件体积。这篇指南手把手教你怎么做。

有损 vs. 无损：先搞清区别

在碰任何滑块之前，你需要理解压缩的两大基本思路。

无损压缩 去除冗余数据，但不改变可见像素。就像给文件夹打 zip —— 解压后内容完全一致。PNG 默认使用无损压缩，非常适合截图、示意图以及含有清晰文字的图片。

有损压缩 会丢弃人眼不太能察觉的信息。JPEG、WebP 和 AVIF 都支持有损模式。本质上就是一个滑块：画质调低，文件变小；但调过头就会出现瑕疵 —— 模糊的边缘、色彩断层和方块状渐变。

核心洞察：大多数图片可以丢弃 15-30% 的数据而不被任何人察觉。这就是压缩的最佳区间。

各格式的最优画质设置

经过对数千张图片的压缩实践，以下是我反复验证过的最佳参数：

JPEG —— 画质设在 80-85%

JPEG 仍然是 Web 上使用最广泛的图片格式。在画质 85% 时，一张典型照片相比未压缩原图可以缩小 60-70%，视觉差异几乎看不出来。低于 75% 后，高对比度边缘处就会开始出现伪影。

小技巧： 开启渐进式 JPEG 编码。它会分多次加载 —— 让用户几乎立刻看到一个模糊预览，而不是等待完整图片下载时看到空白。现代压缩工具基本默认开启了这个功能。

用 Small.im 的 JPEG 压缩器 亲自试试 —— 完全在浏览器中运行，图片不会离开你的设备。

PNG —— 减少调色板颜色数

PNG 天生是无损格式，所以没有"画质滑块"。最大的优化空间在于减少颜色数量。一个包含 1600 万色的 24 位 PNG 通常可以转换为 256 色的 8 位 PNG，对于图标、Logo 和 UI 元素来说，文件体积减少 60-80% 而视觉上毫无差别。

如果照片被存成了 PNG（这种情况比你想象的更常见），最聪明的做法是转换为 JPEG 或 WebP。去 Small.im 的 PNG 压缩器 看看能省多少空间。

WebP —— 画质 75-80%

WebP 是 Google 推出的现代格式，压缩表现远超预期。在画质 80% 时，WebP 文件通常比同等视觉质量的 JPEG 小 25-35%。它同时支持有损和无损模式，还支持透明度 —— 是真正的全能选手。

浏览器支持现在已经覆盖 Chrome、Firefox、Safari 和 Edge。如果你还没在提供 WebP 格式，那你正在白白浪费性能。在这里把图片压缩为 WebP。

AVIF —— 画质 65-75%

AVIF 是最新的竞争者，压缩效率令人惊叹。在画质 70% 时，AVIF 文件通常比同等 JPEG 小 40-50%。缺点？编码速度较慢，老旧浏览器不支持。

我的建议：将 AVIF 作为主格式，配合 WebP 或 JPEG 作为回退方案。<picture> 元素让这一切变得很简单：

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="描述" loading="lazy">
</picture>

用 Small.im 的 AVIF 压缩器 生成你的 AVIF 文件 —— 无需安装软件，文件不会上传到外部服务器。

选择正确的格式

以下是一个快速决策树：

  • 照片和复杂图像 —— JPEG（兼容性）或 WebP/AVIF（性能）
  • 截图和文字密集型图片 —— PNG（无损）或 WebP 无损模式
  • 图标、Logo、简单图形 —— 优先用 SVG，其次用减色后的 PNG-8
  • 需要透明度 —— WebP 或 PNG（避免 JPEG —— 它不支持透明度）
  • 追求最大压缩率、面向现代浏览器 —— AVIF

拿不准的时候，就用两三种格式分别压缩同一张图片，比较文件大小。你往往会对哪种格式在特定图片类型上胜出感到意外。

批量处理工作流

优化一张图片很容易。批量优化几百张，流程就变得关键了。以下是我常用的方法：

  1. 按格式分类。 把 JPEG、PNG 和其他格式分开 —— 它们需要不同的处理方式。
  2. 设置对应格式的画质。 使用上面提到的最佳参数：JPEG 85%、WebP 80%、AVIF 70%。
  3. 批量处理。 把整个文件夹拖拽到 Small.im。它完全在浏览器本地处理 —— 没有上传限制，不用等待服务器响应。
  4. 抽检结果。 以全尺寸打开几张压缩后的图片。如果画质可接受，就完成了。如果不行，把画质调高 5% 重新处理。
  5. 衡量差异。 对比压缩前后的文件夹总大小。对于未优化过的图片，60-70% 的缩减是常见的。

给 Web 开发者的建议

除了压缩本身，以下几个实践能让你的图片在生产环境中保持精简：

使用响应式图片。 通过 srcset 为不同屏幕宽度提供不同尺寸。在 375px 的手机屏幕上加载一张 2000px 宽的 Hero 图纯粹是浪费。

延迟加载首屏以下的图片。 给初始页面不可见的图片加上 loading="lazy"。所有现代浏览器都原生支持。

设置明确的尺寸。 始终包含 width 和 height 属性。这可以防止布局偏移，提升你的 CLS 分数。

在构建流程中自动化。 如果使用静态站点生成器或 CI/CD 流水线，加入图片优化步骤。在构建时一次性处理，这样就永远不会意外发布未优化的图片。

持续监控。 使用 Lighthouse 或 PageSpeed Insights 来捕捉图片回退问题。一次未优化的上传就可能让数周的优化工作付诸东流。

总结

在不损失画质的前提下缩小图片体积，并不是要找到一个万能设置。关键在于为每种图片类型匹配正确的格式和画质级别，然后在整个工作流中保持一致。

从本指南中的格式特定画质设置开始，使用 Small.im 这样的批量处理工具来完成繁重的工作，并且一定要抽检结果。你的用户 —— 以及你的服务器账单 —— 都会感谢你的。