Progressive JPEG and Streaming Transmission in WeChat C2C Image Service

In the WeChat C2C image service, user experience is paramount; the backend system developed by the architecture platform team adopts a progressive image format combined with product experience tricks to greatly reduce perceived latency.

1. Progressive Images JPEG supports baseline and progressive encoding. Baseline is widely used due to low computational cost, while progressive requires 3‑5 times more encoding effort but yields similar or slightly smaller file sizes. Baseline processes the image top‑to‑bottom, left‑to‑right, whereas progressive first transmits a coarse global outline and then refines details.

Figure 1 Baseline image display process

Figure 2 Progressive image display process

Progressive encoding allows selective data transmission, improving success rates in poor network conditions by discarding less important details. Figure 3 shows how the image looks when only a portion of the data has been received.

Figure 3 Image quality at different data ratios

More received data yields clearer images: at 20% the text is unreadable, at 60% it becomes legible, and at 80‑100% the details are fully visible.

Besides JPEG, formats such as WebP and HEVC also support progressive encoding; switching codecs is sufficient while keeping the rest of the transmission flow unchanged.

2. Streaming Transmission This pipeline‑like process handles data while it is being transferred, similar to video streaming. Unlike ordinary file transfer, which waits for the entire file before processing, streaming allows immediate handling of partial data.

3. Minimal Transport Size (MTS) To avoid sending completely unreadable images, a minimum transport length is defined. The transmission factor Q = MTS / TS (total size). The formulas are:

Q = MTS / TS

MTS = TS × Q

Q can be tuned based on network type, signal strength, image dimensions, and quality requirements.

In this system, the sender transmits only up to MTS; the receiver can display the image immediately, and the backend continues sending the remaining data if the network permits.

4. System Architecture

The image transmission steps are:

1) Sender preprocesses the image, converting it to progressive JPEG.

2) Sender packages metadata (sender UIN, receiver UIN, total size, MTS) at the beginning of the data stream, followed by the progressive image data.

3) Sender streams data; the relay server acknowledges received lengths and parses the metadata.

4) When the relay receives MTS, it marks the image as successfully received, stores the data, returns a file ID to the sender, and the sender shows a successful send to the user while continuing to upload remaining data.

5) If the network remains stable, the remaining data is sent; otherwise the process ends without further retries.

6) The relay notifies the receiver of a new image via a signaling channel.

7) Upon notification, if the user opens the image immediately, they see the MTS portion; if they view later, more data may have arrived, showing a clearer picture.

8) The receiver displays whatever data has arrived, transitioning from blurry to sharp without waiting for the full image.

5. Additional Notes

1) In practice, MTS is dynamically adjusted according to network conditions to balance quality and transmission time.

2) For images that cannot be fully transmitted, the download server fills missing information so that non‑progressive clients can still display a complete image.

Combining progressive encoding, streaming transmission, and dynamic MTS constitutes the two key techniques that make this image transmission system effective; removing any of them degrades performance.

Source: https://mp.weixin.qq.com/s/Wbdq5etF_Wy86rSe80snUQ