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、严格避免耗电太多和内存泄露问题

目录
相关文章
|
前端开发 JavaScript C++
前端优化指南:我们该怎么去压缩图像?
前端优化指南:我们该怎么去压缩图像?
241 0
|
Web App开发 算法 前端开发
Cesium开发: Draco模型压缩
Cesium开发: Draco模型压缩
574 1
|
人工智能
将 JPEG 和 PNG 位图转换为 SVG 矢量图,可无限放大
将 JPEG 和 PNG 位图转换为 SVG 矢量图,可无限放大
334 0
|
机器学习/深度学习 编解码 算法
Stable Diffsuion还能用来压缩图像?压缩率更高,清晰度超越JPEG等算法
Stable Diffsuion还能用来压缩图像?压缩率更高,清晰度超越JPEG等算法
223 0
|
存储 编解码 算法
图形学 | 格物致知!PNG 除了无损压缩你还知道什么?
图形学 | 格物致知!PNG 除了无损压缩你还知道什么?
324 0
图形学 | 格物致知!PNG 除了无损压缩你还知道什么?
|
算法 图形学
Unity图片优化-Dither算法(RGBA16优化)
在unity开发过程中,游戏图片占用了很大一部分的手机内存。所以在游戏开发中,对图片的优化也至关重要。 在Unity中常用的的图片格式有RGBA32,RGBA16,ETC,PVRTC等。这里我们主要讨论带透明通道的RGBA32和RGBA16这两种格式的图片在Unity占用的内存空间已经优化方案。
1943 0
|
存储 算法 机器学习/深度学习
JPEG图像压缩算法流程详解
JPEG图像压缩算法流程详解 JPEG是Joint Photographic Exports Group的英文缩写,中文称之为联合图像专家小组。该小组隶属于ISO国际标准化组织,主要负责定制静态数字图像的编码方法,即所谓的JPEG算法。
3865 0
|
存储 物联网 C语言
LittlevGL图形框架扩展 - JPEG图片的支持
在轻量级RTOS GUI图形库中,LittlevGL是一个使用C语言开发,开源免费的GUI,支持触摸屏,鼠标,键盘多种操作,移植简单方便,在丰富的控件基础上还可以自定义控件,开发者一直在不断完善更新,相对于其他GUI,LittlevGL在硬件资源不足(RAM < 100kbytes)的情况下存在较大的优势,在240*240的显示屏上显示一张图片,RAM缓冲区设置为2Kbytes即可。AliOS Things 目前最新版本已经集成LittlevGL,并且在智能穿戴设备项目上已商用。
411 15
LittlevGL图形框架扩展 - JPEG图片的支持
|
存储 C#
[开源]基于WPF实现的Gif图片分割器,提取GIf图片中的每一帧
原文:[开源]基于WPF实现的Gif图片分割器,提取GIf图片中的每一帧   不知不觉又半个月没有更新博客了,今天终于抽出点时间,来分享一下前段时间的成果。   在网上,我们经常看到各种各样的图片,尤其是GIF图片的动态效果,让整个网站更加富有表现力!有时候,我们看到一些比较好看的GIF图片或者一些奇特的Gif图片,我们想要停留在某一帧看的清楚一点或者了解这个Gif动画到底是怎么实现的,怀着这种好奇的心理,我们来看一下,今天的开源项目,用WPF来实现GIF图片的预览和分离和保存。
1200 0