使用渐进式 JPEG 来提升用户体验
网络上那些色色的照片都是.jpg格式的（“色色”指的是色彩斑斓的意思 /手动抠鼻/）。不知诸位有没有注意到，这些.jpg格式的图片在呈现的时候，有两种方式，一种是自上而下扫描式的，还有一种就是先是全部的模糊图片，然后逐渐清晰(就像GIF格式的交错显示)。
JPEG文件有两种保存方式，分别是Baseline JPEG（基准式）和Progressive JPEG（渐进式）。两种格式有相同尺寸以及图像数据，它们的扩展名也是相同的，唯一的区别是二者显示的方式不同。
Baseline JPEG
这种类型的JPEG文件存储方式是按从上到下的扫描方式，把每一行顺序的保存在JPEG文件中。打开这个文件显示它的内容时，数据将按照存储时的顺序从上到下一行一行的被显示出来，直到所有的数据都被读完，就完成了整张图片的显示。如果文件较大或者网络下载速度较慢，那么就会看到图片被一行行加载的效果，这种格式的JPEG没有什么优点，因此，一般都推荐使用Progressive JPEG。
Progressive JPEG
和Baseline JPEG一遍扫描不同，Progressive JPEG文件包含多次扫描，这些扫描顺寻的存储在JPEG文件中。打开文件过程中，会先显示整个图片的模糊轮廓，随着扫描次数的增加，图片变得越来越清晰。这种格式的主要优点是在网络较慢的情况下，可以看到图片的轮廓知道正在加载的图片大概是什么。在一些网站打开较大图片时，你就会注意到这种技术。
让我们来对比一下：
渐进式图片带来的好处是可以让用户在没有下载完图片就可以看到最终图像的大致轮廓，一定程度上可以提升用户体验。（瀑布留的网站建议还是使用基准式的）
另外渐进式的图片的大小并不会和基本的图片大小相差很多，有时候可能会比基本图片更小。渐进式的图片的缺点就是吃用户的CPU和内存，不过对于现在的电脑来说这点图片的计算并不算什么。
下载呈现速度
一个名叫Ann Robson的人，最近对各个浏览器下渐进式图片呈现做了测试。
下图为FireFox浏览器下呈现速度的对比图：
当大图轮廓加载OK的时候，小图最后一个乳猪还没有出世面；而基准式乳猪图还没有开始加载！显然，罗伯森是想告诉我们，渐进式JPEG下载更快。
下表为其在各个浏览器下测试的结果：
结论很简单，Chrome + Firefox + IE9浏览器下，渐进式图片加载更快，而且是快很多，至于其他浏览器，与基准式图片的加载一致，至少不会拖后腿。
Scott Gilbertson对渐进式图片有其他的补充：
1.你永不知道基准式图片内容，除非他完全加载出来。
2.渐进式图片一开始大小框架就定好，不会像基准式图片一样，由于尺寸未设定而造成回流——提高的渲染性能。
3.渐进式图片也有不足，就是吃CPU吃内存。
//ps: png图片也是可以渐进式呈现的
内容就是这些，权衡使用在你手。一般而言，大尺寸图片建议使用渐进式JPEG。
那么怎么将图片保存为或者转化为Progressive JPEG呢？
方法如下：
1、PhotoShop
在photoshop中有“存储为web所用格式”，打开后选择“连续”就是渐进式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、PHP
使用imageinterlace和imagejpeg函数我们可以轻松解决转换问题。
<?php
$im = imagecreatefromjpeg('pic.jpg');
imageinterlace($im, 1);
imagejpeg($im, './php_interlaced.jpg', 100);
imagedestroy($im);
?>
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 <inputfile> <outputfile>
6、C#
using (Image source = Image.FromFile(@"D:\temp\test2.jpg")) {
ImageCodecInfo codec = ImageCodecInfo.GetImageEncoders().First(c => c.MimeType == "image/jpeg");
EncoderParameters parameters = new EncoderParameters(3);
parameters.Param[0] = new EncoderParameter(System.Drawing.Imaging.Encoder.Quality, 100L);
parameters.Param[1] = new EncoderParameter(System.Drawing.Imaging.Encoder.ScanMethod, (int)EncoderValue.ScanMethodInterlaced);
parameters.Param[2] = new EncoderParameter(System.Drawing.Imaging.Encoder.RenderMethod, (int)EncoderValue.RenderProgressive);
source.Save(@"D:\temp\saved.jpg", codec, parameters);
}
