Progressive JPEG图片渐进加载方案

该文章来自阿里巴巴技术协会（ATA）

背景

在Aliexpress买家版app中,图片流量占到总流量90%，商品图片显示的快慢直接影响用户对商品的兴趣和下单，2G、3G、4G网络流量消耗太多直接影响用户的体验。
所以大家一直在想各种方法来提高加载速度和节省流量,集团内不少团队尝试了webp和CDN 图片多尺寸适配等方案做了不少工作，确实省了很多流量，但是也发现了一点问题，比如webp解码时间是JPEG的1.5到2倍，编码时间是JPEG的6到8倍，在网络好的情况下，反而有副作用，有没有更好的解决方案呢？

现状

1、图片在下载完成之后才显示，等待时间比较长，没有从模糊到清晰显示。
2、在低分辨率机器没有做适配，图太大反而浪费流量。
3、在2G和弱网络下面等待时间比较长，下载一张图片需要3秒，缺少极速模式。
4、缺少类似视频网站的视频质量选项，比如低质量、中等质量、高等质量。

2G网络下的下载一张图片需要3秒

webp 和PJPEG解码耗时对比

PJPEG的渐进展示对比

图片格式对比

以BaseLine JPEG 为基准对比

图片格式	压缩率	解码耗时	编码耗时
webp	比JPEG少20%~34%大小	是JPEG 1.5到2倍	是JPEG的6到8倍
Progressive JPEG	与JPEG一样	与JPEG一样	与JPEG一样

 

PJPEG 20%  50%数据清晰度对比

可见20%数据已经可以看到稍微清晰的图片，50%的数据时有较好的图片
100%为原图。

预期收益测算

图片链接 http://www.reasoft.com/tutorials/web/img/progress.jpg
测试方式：打开飞行模式再打开网络（清除DNS缓存），打开任意浏览器和网址，确保网络连通，再测试图片下载。
2G测试数据，

2G网络下面只需要原来的30%的时间即可看到图片

3G测试数据

3G网络下面只需要原来的30%的时间即可看到图片

WIFI测试数据

WIFI网络下面只需要原来的40%的时间即可看到图片

流量节省

在2G网络和弱网络下面，提供极速模式，预期节省50%的流量

业务目标

1、图片在下载过程中，从模糊到清晰渐进显示，减少等待时间。
2、对不同机型的分辨率和屏幕密度做适配，下载不同尺寸图片。
3、增加极速模式，在2G和弱网络下面，只下载普通质量的图片
4、增加不同图片质量的选项给用户
5、增加服务端策略可配置，结合用户的选择，重新制定策略

技术目标

1、对减少的时间和流量得到量化，甚至对跳出率和转化率作对比
2、在listview和girdview中，对图片刷新次数做控制，减少耗电
3、对下载过程产生的bitmap图片使用inBitmap方法复用，减少内存消耗
4、简洁的组件化接入，方便后面直接拿出来给其他平台使用
4、严格避免耗电太多和内存泄露问题