微信C2C渐进式图片流式传输系统简介

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

一、渐进式图片

JPG图片支持两种编码方式：基线式（baseline）和渐进式（progressive）。业界应用最广泛的是基线式，因为它编解码计算开销小，实现比较容易。渐进式在编码的时候，要多次扫描图片，计算开销大约是基线式的3-5倍（但比起Google的WebP编码8-10倍开销还是小很多）。两者编码出来的文件大小基本相同，渐进式往往会更小一些。基线式的编码方式是图片从上到下，从左到右地进行处理和编码，如图1。渐进式编码方式是先全局后局部，先轮廓再细节的编码方法，如图2。

图1 基线式图片展示过程

图2 渐进式图片展示过程

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

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

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

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

二、流式传输

这是类似流水线的传输过程，边传输边处理，在视频播放中普遍使用。通俗地说，就是数据像流水一样在网络中传输，通信双方在数据传输进行的过程中就即时处理，而不是等全部数据接收完毕再处理。

有别于流式传输的是普通“文件传输”，将整个图片文件当成一个整体，接收方在收到完整的数据后，再进行处理。或者将图片分成几个有限的小分片，每个分片是一个整体，单独进行传输，最后把分片拼接起来组成原图片。图片分片，往往配合并发传输，建立多个通道，同时传输多个分片，这在传统高速可靠的有线网络中效果很好，但在带宽有限、信号不稳定的无线网络中，效果往往不比单通道好。

三、图片最小传输长度

在实际应用中，传输一个完全看不清楚的图片是没有意义的，因此对渐进式图片传输的数据有一个最低要求，保证收到的图片基本可用。我们称这个长度为图片最小传输长度（MinimalTransport Size），MTS与原图片总大小（TS，Total Size）的比值，称为传输因子Q。公式如下：

Q=MTS/TS

或者写成：

MTS = TS×Q

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

在这个传输系统中，发送方只要发送图片的最小传输长度，即可向用户展示发送成功，然后转到后台尽量把完整数据发送完毕。在条件不允许（网络中断、没电、用户切换APP等）情况下，可以不用发送更多数据。

四、系统结构

为了便于讲述系统工作原理，架构和流程作了一定简化。

图片传输过程的步骤如下：

1)    发送方图片预处理，将其他图片格式转换成渐进式JPEG格式。

2)    发送方组织发送的数据流，将发送方UIN、接收方UIN，图片总长度，MTS长度等元信息组织在数据流的最前面，渐进式图片数据组织在数据流的后面。

3)    发送方发送数据，中转服务器接收数据，并且不断向发送方确认已接收到的数据长度，同时解析数据流前半部分的元信息，得到收发双方的UIN，图片总长度，以及MTS长度。

4)    当中转服务器收到MTS长度时，认为图片接收成功，将已收到的数据落地，并立刻向发送方返回图片唯一标识fileid。发送方收到fileid之后，认为图片发送成功，立刻向用户展示发送成功，然后转到后台继续发送图片剩余数据。发送方用户会体验到发图时间缩小了，发图过程变快了。

5)    如果发送方此时网络正常，图片数据将被全部发送完毕。如果发送方此时网络不稳定导致无法发送更多数据，发送过程结束，并不用记录任何状态，后续也不再重发这张图片。

6)    中转服务器在返回fileid的同时，立刻通过信令通道通知接收方收到一张新图片。

7)    接收方在收到新图片通知后，如果用户立刻查看新图片，将看到MTS长度对应的图片；如果用户没有立刻查看，而是过一段时间后查看图片，服务器可能已收到更多甚至完整的图片数据，用户将看到比MTS更清晰的图片。

8)    接收方在展示图片时，无需等到接收到完整图片才展示给用户，收到多少就展示多少，用户无需等待，直接看到一个从模糊到清晰变化的图片，大大缩小收图等待时间。

五、其他说明

1、 实际系统中，MTS能够根据网络传输情况动态调整，智能选择一个图片质量和传输耗时都合理的值。

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

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

出处：https://mp.weixin.qq.com/s/Wbdq5etF_Wy86rSe80snUQ

版权申明：内容来源网络，版权归原创者所有。除非无法确认，我们都会标明作者及出处，如有侵权烦请告知，我们会立即删除并表示歉意。谢谢。

-END-

架构文摘

ID：ArchDigest

互联网应用架构丨架构技术丨大型网站丨大数据丨机器学习

更多精彩文章，请点击下方：阅读原文