How WeChat Cuts Image Sending Time with Progressive JPEG and Streaming
This article explains how WeChat's C2C image service uses progressive JPEG encoding, streaming transmission, and a minimal transport size strategy to dramatically reduce image delivery latency and improve user experience under varying network conditions.
21CTO Community Introduction: In WeChat, image transmission ranks just behind text, requiring careful bandwidth and speed considerations while maintaining user experience; the WeChat tech team has made significant efforts, and this article explores image encoding formats and transmission techniques.
WeChat's C2C image service prioritizes user experience, and the backend system developed by Tencent's Architecture Platform Department continuously researches this area.
Through extensive technical validation, a progressive format combined cleverly with product experience can greatly reduce user-perceived latency; the following sections detail the implementation process.
1. Progressive Images
JPEG supports two encoding methods: Baseline and Progressive. Baseline is most widely used due to lower computational overhead.
Progressive encoding scans the image multiple times, costing about 3–5 times more compute than Baseline, yet still far less than Google's WebP (8–10 times more).
File sizes of Baseline and Progressive are similar, with Progressive often slightly smaller. Baseline processes the image top‑to‑bottom, left‑to‑right (see Figure 1).
Progressive encoding works globally first, then locally, outlining contours before details (see Figure 2).
This encoding allows selective control of transmitted data, improving success rates under poor conditions by discarding less important details while preserving usability. Figure 3 shows image quality at different data ratios.
More data received yields clearer images: at 20% the text is unreadable, at 60% it becomes clear, and at 80–100% details improve, though differences become subtle without side‑by‑side comparison.
Besides JPEG, formats like WebP and HEVC also support progressive encoding; switching formats only requires changing the codec library, leaving business logic unchanged.
2. Streaming Transmission
Streaming transmission processes data on the fly, similar to pipelines used in video playback.
Data flows like a stream, allowing both ends to handle chunks immediately rather than waiting for the entire file.
Unlike ordinary file transfer, which waits for the whole image before processing, streaming can also split an image into several chunks, each transmitted independently and later reassembled.
Chunked transmission often pairs with concurrent channels to send multiple pieces simultaneously, which works well on stable wired networks but may underperform on limited, unstable wireless links.
3. Minimal Transport Size
Sending a completely unreadable image is pointless, so a minimal transport size (MTS) is defined to ensure basic usability.
The ratio Q = MTS / TS (Total Size) is called the transport factor.
Formula: Q = MTS / TS or MTS = TS × Q.
Q can be adjusted based on network type, signal strength, image dimensions, and quality requirements.
In this system, the sender transmits only up to MTS; the user sees a successful send, while the backend continues delivering the remaining data when possible.
If conditions worsen (network drop, battery low, app switch), no further data is sent.
4. System Architecture
The following diagram (Figure 4) simplifies the architecture and workflow.
Key steps:
Sender preprocesses the image, converting any format to progressive JPEG.
Sender packages metadata (sender/receiver IDs, total size, MTS) at the beginning of the data stream, followed by progressive image data.
Sender transmits data; an intermediate server acknowledges received length and parses metadata.
When the server receives MTS, it marks the image as received, stores the data, and returns a unique image ID to the sender.
Sender treats this as a successful send, shows the status to the user, and continues uploading remaining data if the network permits.
The server notifies the receiver via a signaling channel that a new image is available.
Upon notification, the receiver displays whatever portion of the image has been received; if the user opens the image later, more data may have arrived, showing higher quality.
The receiver renders the image incrementally, eliminating wait time and presenting a progressive sharpening effect.
5. Additional Notes
1) In production, MTS is dynamically adjusted based on real‑time network conditions to balance quality and latency.
2) For images that lack progressive support, the download server fills missing information to produce a complete picture compatible with legacy clients.
Combining progressive JPEG encoding, streaming control, and a dynamically adjustable minimal transport size forms the two key “brushes” of this image transmission system; omitting any of them significantly degrades performance.
Author: Tencent Architect
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
21CTO
21CTO (21CTO.com) offers developers community, training, and services, making it your go‑to learning and service platform.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.
