使用渐进式JPG改善用户体验

    今年9月份的时候我在广州应聘了我大学第一份校招工作,网站重构师。在面试过程中,面试官的一个问题。

    问题如此:当一张JPG压缩到无法压缩的程度,但是它的大小还有有点大,你会怎么做?

    当时听到这个问题觉得一头雾水,根本不知道如何回答,后来面试官问我有没有听过一种叫做渐进式的JPG格式?我很坦白的说没有,后来得知原来这是一种我们WEB中常见的JPG编码类型之一,使用这种格式的JPG我们发现图片在网页加载时会经历从模糊到清晰这个过程。可能这样表述不清晰,下文会以图片对比。

渐进式JPG对比例子

上图一:

    图一中我们可以发现图片是从上倒下一条一条逐渐加载的,这种JPG压缩模式叫做顺序式编码(Sequential Encoding),一次将图像由左到右、由上到下顺序处理。也是一种常见的JPG编码模式。

上图二:

    图二中我们可以发现同样是一样图片,因为图片较大图一要逐渐加载完我们才知道这张图片的大致轮廓,但是在图二上,由于使用了渐进式JPG格式,在图片加载的时候我们已经可以看到了图片的大致轮廓,这种就是渐进式JPG,使用了递增式编码(Progressive Encoding)。

所以?

    所谓的渐进式JPG格式就是采用了递增式编码的JPG,你可以通过谷歌搜索关键字JPG Progressive Encoding查的更多英文的资料,因为我发现国内这方面的介绍不是很多。

    这种JPG格式是当图像传输的时间较长时,可将图像分数次处理,以从模糊到清晰的方式来传送图像(效果类似GIF在网络上的传输)。

    所以你可能还是不知道我在讲什么。

于是再次放出例子:

    在QQ空间看相册的人会发现画廊显示的图片一开始会非常非常的模糊,后来才逐渐地清晰起来,其实这就是渐进式的显示效果。我从自己的QQ空间掏了一张图片给大家看看

渐进式JPG对比二

    整张图片都采用了渐进式的图片编码格式,一开始我们浏览器加载图片的时候效果如图一,直到整片文章加载完毕之后效果如图二。SO~?讲了这么多还是教大家如何将图片导出成渐进式JPG吧。

如何实现渐进式JPG格式?

方法一:使用Photoshop导出

PHOTOSHOP导出渐进式JPG

步骤一:

在PS菜单栏选择“文件”-》存储为WEB和设备所用格式

PHOTOSHOP导出渐进式JPG

步骤二:

选择图片格式为JPG0-》选中“连续”(经验不多,欢迎纠误。)-》“存储”即可

方法二:

没有PS或者想用别的快捷工具的可以使用工具“PaintShopPro”

步骤:

打开软件PaintShopPro-》打开图片-》点击菜单"FILE"-》选择"Save as"-》保存类型选择"JPG"-》Sub Type选择"Progressive Encoding"即可

Paint Shop Pro保存渐进式图片

工具下载地址

相关阅读:

最近看到还可以通过PHP等代码实现渐进式JPG,附上链接,有需要的同学可以往这边走。《使用渐进式 JPEG 来提升用户体验》

使用渐进式JPG改善用户体验

16 条用户评论。
  1. 评论 发表时间:11-24 23:53 1楼

    请问有批量工具不?

    1. 评论 发表时间:11-25 10:17

      表示还木有找到。找到通知你吧

  2. 评论 发表时间:11-25 19:36 2楼

    原来这个东西叫progressive encoding

    1. 评论 发表时间:11-26 01:34

      我也是查了才知道噢

  3. 评论 发表时间:11-25 22:34 3楼

    见过但是不知道名称

    1. 评论 发表时间:11-26 01:35

      对,这正是当时面试的回答噢。

  4. 评论 发表时间:11-25 23:15 4楼

    这个还真没注意,不过我好想就是你那么选择的。。。

    1. 评论 发表时间:11-26 01:37

      不知道英文版的这个选项是神马呢,支持你,那我就没错了噢。

  5. 评论 发表时间:11-25 23:22 5楼

    只要用ps,我就习惯这样储存图片。

    1. 评论 发表时间:11-26 01:36

      我之前一直到不知道PS有针对WEB做图片导出的功能,还是去一趟面试回来,获知不少

  6. 评论 发表时间:12-08 15:23 6楼

    图片大了我一直用这个压缩 Image Optimizer
    效果不错,质量也没有变差

    1. 评论 发表时间:12-08 21:58

      @夜猫
      是的,我现在都直接用它了。很管用。

  7. 评论 发表时间:03-24 14:02 7楼

    学习了,很好的方法 用PS的WEB导出方便些 嘿嘿。

  8. 评论 发表时间:04-20 17:48 8楼

    为什么我加载不了这篇文章的图片呢。。。。。

  9. 评论 发表时间:05-22 21:00 9楼

    这就是所谓的jpeg2000啊,以前网络差的时候就用这个编码存图的。

  10. ZRJ ZRJ
    评论 发表时间:11-07 23:18 10楼

    web 上的图片其实应该用 png 吧,在 png 里面这个东西叫交错。。

添加新评论 »