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

今天才认识到原来JPEG文件有两种保存方式,分别是Baseline JPEG(标准型)和Progressive JPEG(渐进式)。两种格式有相同尺寸以及图像数据,扩展名也是相同的,唯一的区别是二者显示的方式不同。

Baseline JPEG

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

Progressive JPEG

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

渐进式图片带来的好处是可以让用户在没有下载完图片就可以看到最终图像的大致轮廓,一定程度上可以提升用户体验。(瀑布留的网站建议还是使用标准型的)

另外渐进式的图片的大小并不会和基本的图片大小相差很多,有时候可能会比基本图片更小。渐进式的图片的缺点就是吃用户的CPU和内存,不过对于现在的电脑来说这点图片的计算并不算什么。

说了这边多下面就改讲讲怎么讲图片保存为或者转化为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

使用imageinterlaceimagejpeg函数我们可以轻松解决转换问题。

4、Python

5、jpegtran

jpegtran -copy none -progressive <inputfile> <outputfile>

6、C#

2 3 收藏 13 评论

相关文章

可能感兴趣的话题



直接登录
最新评论
  • 哦,选“连续”就行了呀。

  • techni   2013/07/24

    涨知识了。

  • 还是渐进式的好,新浪微博的加载图片的方式就很不怎么地,尤其是加载gif的时候,总是失败

  • hiens   2013/07/25

    本人还是比较喜欢Baseline JPEG的加载方式,可以从上到下逐步看到清晰的图片。而Progressive JPEG先显示整个图片的模糊轮廓再显示清晰图。但是,本身我就不喜欢看到模糊的图片,感觉模糊的轮廓影响视觉效果。

  • L   2013/07/26

    网速慢或者网页图片太多的时候你就会感到标准型的蛋疼了。有时候急急忙忙拉到网页底端点下一页,发现网页还在不断的变长,就是拖不到底端

  • 做前端的,一直没去想过为什么不同的图片在浏览器里渲染时不一样,原来是渐进式和标准型的区别

  • RobberPhex   2013/08/20

    identify -verbose filename.jpg | grep Interlace
    出现
    Interlace: JPEG
    或者
    Interlace: PNG
    是怎么回事?

  • 学习了,Qzone好像也是用渐进式JPEG的。。

  • janmi   2014/06/24

    为何瀑布流建议使用标准型的?希望分享一下经验

  • huangzh198   2014/06/25

    一直以为这种图片从模糊到清晰的显示,是由于图片压缩时采用的算法不同。
    原来不是。

  • mackxu   2014/06/25

    谢谢分享!!

  • jpegtran软件怎么用呢?网上可以下载到,但是软件说明是英文的,看不懂。。。

跳到底部
返回顶部