使用渐进式 JPEG 来提升用户体验

JPEG文件有两种保存方式

1.Baseline JPEG（基准式）
2.Progressive JPEG（渐进式）

两种格式有相同尺寸以及图像数据，它们的扩展名也是相同的，唯一的区别是二者显示的方式不同。

Baseline JPEG

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

image

Progressive JPEG

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

image

---

为什么要用渐进式图片

• 增加用户体验，开始能看到个大概轮廓

• 不占过多内存

• 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