JPEG文件有两种保存方式
1.Baseline JPEG（基准式）
2.Progressive JPEG（渐进式）
两种格式有相同尺寸以及图像数据，它们的扩展名也是相同的，唯一的区别是二者显示的方式不同。
Baseline JPEG
这种类型的JPEG文件存储方式是按从上到下的扫描方式，把每一行顺序的保存在JPEG文件中。打开这个文件显示它的内容时，数据将按照存储时的顺序从上到下一行一行的被显示出来，直到所有的数据都被读完，就完成了整张图片的显示。如果文件较大或者网络下载速度较慢，那么就会看到图片被一行行加载的效果，这种格式的JPEG没有什么优点，因此，一般都推荐使用Progressive JPEG。
Progressive JPEG
和Baseline JPEG一遍扫描不同，Progressive JPEG文件包含多次扫描，这些扫描顺寻的存储在JPEG文件中。打开文件过程中，会先显示整个图片的模糊轮廓，随着扫描次数的增加，图片变得越来越清晰。这种格式的主要优点是在网络较慢的情况下，可以看到图片的轮廓知道正在加载的图片大概是什么。在一些网站打开较大图片时，你就会注意到这种技术。
为什么要用渐进式图片
增加用户体验，开始能看到个大概轮廓
不占过多内存
-
Chrome + Firefox + IE9浏览器下，渐进式图片加载更快，而且是快很多，至于其他浏览器，与基准式图片的加载一致，至少不会拖后腿（一个名叫Ann Robson的人，最近对各个浏览器下渐进式图片呈现做了测试）
在测试各个浏览器（未说明都为最新版本）时发现：
1.Chrome对“渐进”和“交错”都支持良好
2.Safari(PC/MAC)对“渐进”不支持，“交错支持良好”
3.Fiefox对“渐进”和“交错”都支持良好
4.Opera对“渐进”和“交错”都支持良好
5.IE9对“渐进”和“交错”都不支持
- 开始大小框架就定好，不会像基准式图片一样，由于尺寸未设定而造成回流——提高的渲染性能
检查图片是否是渐进式图片
我用的是imagemagick,先安装了homebrew
$ brew install imagemagick
输入要检查图片
$ identify -verbose file.jpg | grep Interlace
如果返回 Interlace: JPEG 图片是渐进式
如果返回 Interlace: None 图片不是渐进式
把图片变成jpeg渐进式的几种方法
1.Photoshop,sketch
-
在photoshop中有“存储为web所用格式”，打开后选择“连续”就是渐进式JPEG。
image 在sketch中导出为 progressive
2.PHP
- 使用imageinterlace和imagejpeg函数我们可以轻松解决转换问题。
<?php
$im = imagecreatefromjpeg('pic.jpg');
imageinterlace($im, 1);
imagejpeg($im, './php_interlaced.jpg', 100);
imagedestroy($im);
?>
3.利用ImageMagick
方法一：convert 2.jpg -interlace Plane 2.jpg
方法二：magick 2.jpg -interlace Plane 2.jpg
相关文章
【Mac技巧】分享几个打包好的图像处理脚本：https://sspai.com/post/29492
【如何生成渐进式JPEG】：http://www.qdfuns.com/notes/13972/b445e237058b19b3ab2b55bf5789b72f
