渐进式 JPEG 详解：为什么图片会一点点加载出来

2026-09-17

打开一个图片很多的网页，留意两种不同的加载方式：有的图片像窗帘一样从上往下展开，有的先出现一团模糊的马赛克，然后越来越清晰。后者就是渐进式 JPEG（progressive JPEG），前一种是基线式（baseline）。对做网站的人来说，这个区别直接影响感知速度与 Core Web Vitals 分数。

基线式与渐进式的区别

基线式 JPEG 按从上到下的顺序一次性编码和解码：文件读到哪，画面就画到哪。渐进式 JPEG 把数据分成多次扫描（scans），第一次扫描只记录低分辨率的整体轮廓，后面的扫描逐层补充细节。解码器先把模糊版本显示出来，再逐步变清晰。

• 基线式（baseline）：从上往下逐行渲染，适合文件较小的简单图像
• 渐进式（progressive）：多遍扫描，先出轮廓再补细节，适合照片和长文配图
• 两者画质在同等文件大小下基本相同，区别只在解码与显示顺序

渐进式 JPEG 的三个好处

• 感知加载更快：用户先看到整体轮廓，而不是空白等待
• 减少布局跳动：图片区域提前占据空间，CLS 更稳
• 慢网速下体验更好：弱网也能尽早看到内容大致内容

什么时候用渐进式，什么时候用基线式

照片、大图、文章头图，优先渐进式。小图标、纯色块、需要极快首帧的 UI 元素，基线式足够，渐进式反而增加解码开销。渐进式对旧版浏览器兼容性略差，但现代浏览器普遍支持。

怎么把图片转成渐进式

多数图像处理工具都提供这个选项：Photoshop 保存时勾选 Progressive；ImageMagick 用 -interlace Plane；在线工具如 Squoosh 也有渐进式开关。转换不会明显改变文件大小，只是调整了数据排列顺序。

FAQ