渐进式图片加载

摘自 2023/7/25 笔记，很多图片失效了。。。后续要补充

渐进式图片加载（Progressive Loading）可以在展示图片的时候让图片从一张模糊的图片过渡到一张清晰的图片。

• 非渐进式：像扫描仪一样从上往下逐渐显示
• 渐进式：先显示大致的轮廓，在加载z过程中再逐渐变清晰

渐进式加载不能从根本上提高图片的加载速度，但因为用户看到图片的时间提前了，可以给用户一种“看上去加载得比较快”的错觉，从而提升使用体验。实际开发中，渐进式图片可以配合懒加载一起使用，提升网站性能。

图片的渐进式解码

渐进式图片加载依赖编码/解码。

渐进式解码是从不完整的图像文件增量解码图像部分的功能。解码完整图像所需的传递数取决于图像文件格式和用于创建图像的编码过程。（传递数的意思就是经过几次模糊的轮廓到清晰的图片这个过程）

图像满足渐进式解码条件：

• 图像格式必须支持渐进式解码：JPEG、PNG 和GIF
• 图像文件必须编码为渐进式图像
• 编解码器必须支持渐进式解码

如何判断图片是否为渐进式

图片编码

以JPEG图片格式为例，JPEG图片编码以FFD8开头，FFD9结尾，FFDA代表一个帧的开头，传统编码只有一个FFDA，渐进式编码则有多个FFDA

参考：https://en.wikipedia.org/wiki/JPEG

Linux

执行命令，输出为Plane则为渐进式图片

identify -verbose filename.jpg | grep Interlace

保存/转换为渐进式图片

PhotoShop

存储为“web所用格式”，选择“连续”就是渐进式 JPEG

PHP

<?php
    $im = imagecreatefromjpeg('pic.jpg');
    imageinterlace($im, 1);
    imagejpeg($im, './php_interlaced.jpg', 100);
    imagedestroy($im);
?>

Python

import PIL
from exceptions import IOError
img = PIL.Image.open("./test.jpg")
destination = "./dest.jpeg"
try:
    img.save(destination, "JPEG", quality=80, optimize=True, progressive=True)
except IOError:
    PIL.ImageFile.MAXBLOCK = img.size[0] * img.size[1]
    img.save(destination, "JPEG", quality=80, optimize=True, progressive=True)

参考文档：https://cloudinary.com/blog/progressive_jpegs_and_green_martians