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

17611538698

webmaster@21cto.com

登录注册

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

21CTO

资讯 0 3565 2017-03-30 12:00:48

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

在微信C2C图片服务中，用户体验一直是第一位。由腾讯架构平台部研发的微信C2C后台系统，也一直在用户体验上深入研究。

经过多次技术数据的验证，采用渐进式格式，与产品体验的巧妙结合，可以大大降低用户的体验时延，接下来会详细介绍微信技术团队的应用过程。

一、渐进式图片

JPG图片支持两种编码方式：基线式（Baseline）和渐进式（Progressive）。业界应用最广泛的是基线式，因为它编解码计算开销小，实现比较容易。

渐进式在编码的时候，要多次扫描图片，计算开销大约是基线式的3到5倍。但是比起Google 的 WebP 图片格式编码 8-10倍开销还是小得很多。

基线式与渐进式两者编码出来的文件大小基本相同，渐进式往往会更小一些。基线式的编码方式是图片从上到下，从左到右地进行处理和编码。如图1所示：

图1 基线式图片展示过程

渐进式编码方式是先全局后局部，先轮廓再细节的编码方法。如图2所示：

图2 渐进式图片展示过程

渐进式图片编码特性，可以被用来有选择性地控制传输的数据量，提高传输的成功率。

在条件较差情况下，宁可丢弃了图片的部分不重要细节，换取传图功能的可用性。下面的图3是收取到原图片一定比例数据的图片效果（图3为局部对比）。

图3 不同比例的图片显示效果对比

我们从上面可以看到，接收到图片的数据越多，图片展示越清晰。
在20%的时候，还看不清楚图片中的文字，到了60%的时候，文字已清晰可见，再到80%以及100%，图片细节更清楚，但如果没有多张图片仔细比较，已看不出图片之间的差异。

除了JPEG支持渐进式编码格式，其它比如 WebP、HEVC在设计上也都支持渐进式的。要使用其它格式，只需替换一下图片的编解码库即可，后面涉及的业务交互流程是不变的。

二、流式传输

流式传输类似流水线的传输过程，边传输边处理，这在视频播放中普遍被使用。

通俗地讲，就是数据像流水一样在网络中传输，通信双方在数据传输进行的过程中就即时处理，而不是等全部数据接收完毕再处理。

有别于流式传输的是普通“文件传输”，是将整个图片文件当成一个整体，接收方在收到完整的数据后，再进行处理。

或者将图片分成几个有限的小分片，每个分片是一个整体，单独进行传输，最后把分片拼接起来组成原图片。

图片分片，往往配合并发传输，建立多个通道，同时传输多个分片，这在传统高速可靠的有线网络中效果很好，但在带宽有限、信号不稳定的无线网络中，效果往往没有单通道好。

三、图片最小传输长度

在实际应用中，传输一个完全看不清楚的图片是没有意义的，因此对渐进式图片传输的数据有一个最低要求，保证收到的图片基本可用。

我们称这个长度为图片最小传输长度（MinimalTransport Size），MTS与原图片总大小（TS，Total Size）的比值，称为传输因子Q。

公式为：
Q=MTS/TS
或者写成：
MTS = TS×Q

传输因子Q可根据多种因素来调节。包括终端所在网络类型、信号强度、传输目标图片的尺寸和质量等。

在这个传输系统中，发送方只要发送图片的最小传输长度，即可向用户展示发送成功，然后转到后台尽量把完整数据发送完毕。

在条件不允许（网络中断、没电、用户切换APP等）情况下，可以不用发送更多数据。

四、系统结构

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

图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、对未完整传输的图片，下载服务器会自动填充必要的信息，使其成为一个完成的图片，使得不支持渐进式图片格式的终端或者浏览器可以展示这张图片。

在图片用渐进式编码格式的基础上，配合流式传输的控制方式，再加上动态可调整的文件最小传输长度，是该图片传输系统的“两把刷子”。缺少任何一个因素，效果都会大大减弱。