在前端优化过程当中,一种叫做progressive jpegs的技术正被广泛的应用着。Webpagetest也已将progressive jpegs作为评价的一项指标。我在此简单介绍一下。
优点
使用递增式编码来存储JPEG文件的好处可以从两个角度来说明:
用户体验
一个以progressive方式编码的jpeg文件,在浏览器上的渲染方式是由模糊到清晰的。用户能在渐变的图像当中获得所需信息的反馈。如果内容不是用户所期待的,用户就能提前前往新的页面。
文件大小
有实验证明,在JPEG文件小于10KB的时候,使用标准型编码(Huffman表已经被优化)的JPEG文件要小于使用渐变式编码的JPEG文件(发生概率为75%)。当文件大于10KB时,渐变式编码的JPEG文件有94%的概率拥有比标准编码的文件更小的体积。
使用方法
以photoshop为例,操作可按如下步骤进行
在文件菜单中选择”Save for Web”(存储为Web格式)
在”Save for Web”窗口中,勾选”Progressive”,然后保存即可。
没安photoshop?不要紧,再推荐一个工具——jpegtran(72KB)。基于命令行操作,参数在程序内都有说明,一个典型的命令行是这样的:jpegtran -copy none -progressive source.jpg result.jpg