17611538698
info@21cto.com

微信图片优化之秘:C2C渐进式图片流式传输系统

作者 Admin 分类 资讯 03月30日

focuswx.png

 


21CTO社区导读:
在微信中,图片的传输仅次于文字。在传输协议上要考虑带宽和传输速度问题,图片质量等问题。还要兼顾用户体验,微信技术团队在此做了很多努力。从本篇文章中,各位可以了解到图片格式本身编码,还有传输时编码,无疑会给知识面又增加一定宽度。


 
在微信C2C图片服务中,用户体验一直是第一位。由腾讯架构平台部研发的微信C2C后台系统,也一直在用户体验上深入研究。
 
经过多次技术数据的验证,采用渐进式格式,与产品体验的巧妙结合,可以大大降低用户的体验时延,接下来会详细介绍微信技术团队的应用过程。
 


一、渐进式图片


 
JPG图片支持两种编码方式:基线式(Baseline)和渐进式(Progressive)。业界应用最广泛的是基线式,因为它编解码计算开销小,实现比较容易。
 
渐进式在编码的时候,要多次扫描图片,计算开销大约是基线式的3到5倍。但是比起Google 的 WebP 图片格式编码 8-10倍开销还是小得很多。
 
基线式与渐进式两者编码出来的文件大小基本相同,渐进式往往会更小一些。基线式的编码方式是图片从上到下,从左到右地进行处理和编码。如图1所示:
 

1.png

 
图1 基线式图片展示过程
 
渐进式编码方式是先全局后局部,先轮廓再细节的编码方法。如图2所示:
 
 

2.png

 
图2 渐进式图片展示过程
 
渐进式图片编码特性,可以被用来有选择性地控制传输的数据量,提高传输的成功率。
 
在条件较差情况下,宁可丢弃了图片的部分不重要细节,换取传图功能的可用性。下面的图3是收取到原图片一定比例数据的图片效果(图3为局部对比)。
 

3.png

 
图3 不同比例的图片显示效果对比
 
我们从上面可以看到,接收到图片的数据越多,图片展示越清晰。
在20%的时候,还看不清楚图片中的文字,到了60%的时候,文字已清晰可见,再到80%以及100%,图片细节更清楚,但如果没有多张图片仔细比较,已看不出图片之间的差异。
 
除了JPEG支持渐进式编码格式,其它比如 WebP、HEVC在设计上也都支持渐进式的。要使用其它格式,只需替换一下图片的编解码库即可,后面涉及的业务交互流程是不变的。
 


二、流式传输


 
流式传输类似流水线的传输过程,边传输边处理,这在视频播放中普遍被使用。
 
通俗地讲,就是数据像流水一样在网络中传输,通信双方在数据传输进行的过程中就即时处理,而不是等全部数据接收完毕再处理。
 
有别于流式传输的是普通“文件传输”,是将整个图片文件当成一个整体,接收方在收到完整的数据后,再进行处理。
 
或者将图片分成几个有限的小分片,每个分片是一个整体,单独进行传输,最后把分片拼接起来组成原图片。
 
图片分片,往往配合并发传输,建立多个通道,同时传输多个分片,这在传统高速可靠的有线网络中效果很好,但在带宽有限、信号不稳定的无线网络中,效果往往没有单通道好。
 


三、图片最小传输长度


 
在实际应用中,传输一个完全看不清楚的图片是没有意义的,因此对渐进式图片传输的数据有一个最低要求,保证收到的图片基本可用。
 
我们称这个长度为图片最小传输长度(MinimalTransport Size),MTS与原图片总大小(TS,Total Size)的比值,称为传输因子Q。
 
公式为:
Q=MTS/TS
或者写成:
MTS = TS×Q
 
传输因子Q可根据多种因素来调节。包括终端所在网络类型、信号强度、传输目标图片的尺寸和质量等。
 
在这个传输系统中,发送方只要发送图片的最小传输长度,即可向用户展示发送成功,然后转到后台尽量把完整数据发送完毕。
 
在条件不允许(网络中断、没电、用户切换APP等)情况下,可以不用发送更多数据。
 


四、系统结构


 
为了便于讲述系统工作原理,我们对架构和流程作了一些简化。请看下图:
 

4.png

 
图4 图片传输流程
 
下面我们说明图片传输过程的步骤。如下:
 
size=15    发送方图片预处理,将其它图片格式转换成渐进式JPEG格式;[/size]
 
size=15    发送方组织发送的数据流,将发送方UIN、接收方UIN,图片总长度,MTS长度等元信息组织在数据流的最前面,渐进式图片数据组织在数据流的后面。[/size]
 
size=15    发送方发送数据,中转服务器接收数据,并且不断向发送方确认已接收到的数据长度,同时解析数据流前半部分的元信息,得到收发双方的UIN,图片总长度,以及MTS长度。[/size]
 
size=15    当中转服务器收到MTS长度时,认为图片接收成功,将已收到的数据落地,并立刻向发送方返回图片唯一标识字段。[/size]
发送方收到该字段后,认为图片发送成功,立刻向用户展示发送成功,然后转到后台继续发送图片剩余数据。发送方用户会体验到发图时间缩小了,发图过程变快了。
 
size=15    如果发送方此时网络正常,图片数据将被全部发送完毕。如果发送方此时网络不稳定导致无法发送更多数据,发送过程结束,并不用记录任何状态,后续也不再重发这张图片。[/size]
 
size=15    中转服务器在返回字段的同时,立刻通过信令通道通知接收方收到一张新图片。[/size]
 
size=15    接收方在收到新图片通知后,如果用户立刻查看新图片,将看到MTS长度对应的图片。如果用户没有立刻查看,而是过一段时间后查看图片,服务器可能已收到更多甚至完整的图片数据,用户将看到比MTS更清晰的图片。[/size]
 
size=15    接收方在展示图片时,无需等到接收到完整图片才展示给用户,收到多少就展示多少,用户无需等待,直接看到一个从模糊到清晰变化的图片,大大缩小收图等待时间。[/size]
 


五、其它说明


 
除了以上流程外,还有一部分内容做为补充说明:
 
1、 实际系统中,MTS能够根据网络传输情况动态调整,智能选择一个图片质量和传输耗时都合理的值。
 
2、 对未完整传输的图片,下载服务器会自动填充必要的信息,使其成为一个完成的图片,使得不支持渐进式图片格式的终端或者浏览器可以展示这张图片。
 
在图片用渐进式编码格式的基础上,配合流式传输的控制方式,再加上动态可调整的文件最小传输长度,是该图片传输系统的“两把刷子”。缺少任何一个因素,效果都会大大减弱。
 


作者:腾讯架构师


评论