【经验总结】使用渐进式JPG改善用户体验

【经验总结】使用渐进式JPG改善用户体验【转】

【本文系外部转贴，原文地址：http://xmchen.com/progressive-jpg.htm】

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

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

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

上图一：

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

上图二：

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

所以？

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

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

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

于是再次放出例子：

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

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

如何实现渐进式JPG格式？

方法一：使用Photoshop导出

步骤一：

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

步骤二：

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

方法二：

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

步骤：

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