最近在浏览 Youtube 的时候发现有张广告图片加载为模糊加载，随即 F12 也没看到相关的处理，于是想到了之前了解到的Progressive JPEG

JPEG

JPEG 有两种保存方式，Baseline JPEG（标准型）和 Progressive JPEG（渐进式），两种格式有相同的尺寸以及图像数据，他们的扩展名也是相同的，唯一的区别是二者在的加载方式不同

Baseline JPEG

这种储存方式是从上到下的扫描方式，把每一行顺序的保存在 JPEG 文件中，加载此文件时，数据将按照储存时的顺序从上到下一行一行的显示出来，直到
所有的数据被读完，就完成了整张照片的显示，如果文件过大网速较慢的情况下那么就会看到图片被一行一行的加载。

Progressive JPEG

和 Baseline 格式不同的是，Progressive JPEG文件包含多次扫描，在打开文件过程中，会显示整个图片轮廓，随着扫描次数的增加，图片变得越来越清晰。
这种格式适合在网络较慢的情况就可以看到图片大概的轮廓。

图片如何保存为Progressive JPEG？

PhotoShop

在PS中有“存储为web所用格式”，打开后选择“连续”就是渐进式JPEG。

在线转换 https://coding.tools/cn/progressive-jpeg

示例

可以新窗口中 调整 Network 来查看效果

  • Youtube 广告图

尺寸太大貌似也有割裂感