渐进式jpeg（Progressive JPEGs )解析

在前端优化过程当中,为了提升用户体验，一种叫做progressive jpegs的技术正被广泛的应用着。

Baseline JPEG和Progressive JPEG的区别：

JPEG文件格式有两种保存方式。他们是Baseline JPEG和Progressive JPEG。
两种格式有相同尺寸以及图像数据，他们的扩展名也是相同的，唯一的区别是二者显示的方式不同。

• Baseline JPEG

  
  
  
  
  

  这种类型的JPEG文件存储方式是按从上到下的扫描方式，把每一行顺序的保存在JPEG文件中。打开这个文件显示它的内容时，数据将按照存储时的顺序从上到下一行一行的被显示出来，直到所有的数据都被读完，就完成了整张图片的显示。如果文件较大或者网络下载速度较慢，那么就会看到图片被一行行加载的效果，这种格式的JPEG没有什么优点，因此，一般都推荐使用Progressive JPEG。

• Progressive JPEG

  
  
  
  
  

  和Baseline一遍扫描不同，Progressive JPEG文件包含多次扫描，这些扫描顺寻的存储在JPEG文件中。打开文件过程中，会先显示整个图片的模糊轮廓，随着扫描次数的增加，图片变得越来越清晰。这种格式的主要优点是在网络较慢的情况下，可以看到图片的轮廓知道正在加载的图片大概是什么。在一些网站打开较大图片时，你就会注意到这种技术。

Progressive JPEG的优点：

• 用户体验
  一个以progressive方式编码的jpeg文件，在浏览器上的渲染方式是由模糊到清晰的。用户能在渐变的图像当中获得所需信息的反馈。如果内容不是用户所期待的，用户就能提前前往新的页面。
• 文件大小
  有实验证明，在JPEG文件小于10KB的时候，使用标准型编码（Huffman表已经被优化）的JPEG文件要小于使用渐变式编码的JPEG文件（发生概率为75%）。当文件大于10KB时，渐变式编码的JPEG文件有94%的概率拥有比标准编码的文件更小的体积。

操作步骤：

1. Photoshop
   Photoshop存储Jpeg格式图片时，选择如下即可：

   
   
   
2. Linux
   检测是否为progressive jpeg ：

identify -verbose filename.jpg | grep Interlace
//如果输出 None 说明不是progressive jpeg；
//如果输出 Plane 说明是 progressive jpeg。

将basic jpeg转换成progressive jpeg：

convert infile.jpg -interlace Plane outfile.jpg

3. 使用imageinterlace和imagejpeg函数我们可以轻松解决转换问题。

4. Python

import PIL
from exceptions import IOError
img = PIL.Image.open("c:\\users\\biaodianfu\\pictures\\in.jpg")
destination = "c:\\users\\biaodianfu\\pictures\\test.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)

5. jpegtran

    jpegtran -copy none -progressive

在存储为PNG的时候，选择“交错”就可以得到和渐进式JPG图片一样的PNG效果了。

参考文章

Baseline JPEG和Progressive JPEG的区别
使用渐进式JPEG来提升用户体验