在前端优化过程当中,为了提升用户体验，一种叫做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%的概率拥有比标准编码的文件更小的体积。
操作步骤：
-
Photoshop
Photoshop存储Jpeg格式图片时，选择如下即可：
- 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
- 使用imageinterlace和imagejpeg函数我们可以轻松解决转换问题。
<?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("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)
- jpegtran
jpegtran -copy none -progressive
在存储为PNG的时候，选择“交错”就可以得到和渐进式JPG图片一样的PNG效果了。
