Optimizing Live Streaming Gift Animations: Formats, Performance, and Implementation on Qixiu PC Web

Virtual gifts are a key interaction tool in live streaming and a major revenue source for streamers. When a sufficient number of gifts are sent, flashy animation effects are triggered, enhancing both streamer motivation and viewer honor.

As live‑stream platforms evolve, designers create increasingly sophisticated gift animations, leading to larger file sizes and longer loading times. Developers must deliver smooth playback without overburdening users' devices or limiting designers' creativity. This article examines these challenges using the Qixiu PC web client as a case study, focusing on animation effects, performance, development efficiency, and compatibility.

Evolution of animation formats

Historically, several formats have been used:

Flash (the early dominant solution)

Animated images: GIF, APNG, WebP

Open‑source / custom solutions: Lottie, SVGA, IXD (self‑developed)

Video: MP4

During the Flash era, the platform relied on Adobe Flash CC for animation creation. As HTML5 matured, Flash declined and the team explored two alternatives: APNG animated images and a self‑developed format.

APNG adoption

APNG (Animated Portable Network Graphics) was introduced in 2004 and is supported by modern browsers. It fits the existing workflow of generating image sequences for mobile, so the PC web client also began using APNG. However, direct <img> usage presents issues:

Partial browser incompatibility

Need for pre‑loading to ensure seamless playback

Lack of control over start, progress, and end timestamps

To address these, the team investigated the APNG file structure (acTL, fcTL, fdAT chunks) and adopted apng‑js for parsing. The library provides metadata such as width, height, frame count, and duration, enabling precise control via Canvas.

Configuration object for the custom player:

{
    src: string, // animation URL
    selector: string, // DOM container
    playStart: () => void, // called when animation starts
    playProgress: (index: number, totalTime: number, remainTime: number) => void, // per‑frame callback
    playEnd: () => void // called when animation ends
}

Parsed data are cached in IndexedDB to avoid repeated downloads.

Self‑developed IXD format

IXD builds on the PNG structure by replacing full‑frame bitmap blocks with reusable sprite assets and metadata (position, size, scale). This dramatically reduces file size—from ~10 MB PNG sequences to < 1 MB—while preserving visual quality. A web SDK and an editor allow designers to import assets, compose layers, and export IXD files with variable placeholders for dynamic content.

MP4 with simulated transparency

To achieve both high visual fidelity and small size, the team combined two synchronized MP4 videos: one containing RGB data and another encoding the alpha channel as a black‑white video. During playback, the two streams are composited on a Canvas to reconstruct full RGBA frames.

Canvas implementation (simplified):

// Draw stacked video frames
buffer.drawImage(video, 0, 0, width, height * 2);
// Extract image data for RGB and alpha
let imageData = buffer.getImageData(0, 0, width, height).data;
let alphaData = buffer.getImageData(0, height, width, height).data;
// Merge alpha channel
for (let i = 3, len = imageData.length; i < len; i += 4) {
    imageData[i] = alphaData[i - 1];
}
// Render final image
output.putImageData(image, 0, 0, 0, 0, width, height);

Performance testing revealed high CPU usage due to per‑pixel processing, prompting a switch to WebGL for hardware‑accelerated rendering.

WebGL solution with Three.js

Using Three.js and a custom fragment shader, the two video textures are sampled and combined efficiently:

gl_FragColor = vec4(
    texture2D(texture, vec2(vUv.x, 0.5 + vUv.y / 2.0)).rgb,
    texture2D(texture, vec2(vUv.x, vUv.y / 2.0)).r
);

Benchmarks showed a significant reduction in CPU load compared with the pure Canvas approach.

Conclusion and future work

After evaluating APNG, IXD, SVGA, Lottie, and MP4, the team selected the MP4‑based solution for its balance of quality, file size, and ease of use for designers (no extra plugins required). Future directions include embedding configuration boxes inside MP4 files to support dynamic assets (inspired by IXD) and further optimizing rendering with WebGL.