AVIF Image Format Research, Implementation, and Optimization at Bilibili

Background

The Bilibili image library loading service provides a mobile‑first, one‑stop solution that integrates image loading, display, processing, and monitoring. It is widely adopted across the company for its high availability, performance, customizability, data service, and bandwidth‑saving advantages.

Using the AVIF format can significantly reduce network bandwidth and storage costs while improving page load speed and user experience.

1. AVIF Image Format Research

1.1 Image format codec study

AVIF offers higher compression ratios, deeper color depth, alpha channel support, animated images, and many encoding options compared with JPEG and WebP.

1.2 AVIF adoption at Bilibili

Before 2022, Bilibili mainly used WebP. Experiments on three million real thumbnail requests showed that AVIF can reduce image volume by about 35% on average, but encoding time is 4‑5× higher than WebP (up to 20× for very large images). PSNR was used as the objective quality metric (PSNR > 30 dB is generally indistinguishable to the human eye).

Key quantitative findings:

Higher speed settings mainly affect encoding time, not quality or size.

Larger images gain a larger volume advantage with AVIF over WebP.

Higher quality settings increase AVIF’s volume advantage.

AVIF achieves ~35% average size reduction for Bilibili’s thumbnail workload.

Encoding time grows 4‑5×; for very large images it can exceed 20×.

2. Implementation by Layer

2.1 Server architecture

The service uses ImageMagick as the core image‑processing library, with custom modifications for online stability. AVIF encoding is performed via libheif integrated with libaom. Because AVIF encoding is much slower, a fallback strategy was designed: the first request returns a short‑TTL WebP image while an offline task generates the AVIF version and pushes it to Bilibili’s internal object storage (Boss).

2.2 Web side

Approximately 50% of browsers support AVIF (according to caniuse.com). The front‑end uses the HTML <picture> element with multiple <source> tags to prefer AVIF, fall back to WebP, and finally to JPG/PNG.

2.3 Mobile side

Clients decode AVIF with the open‑source libavif, which relies on the dav1d AV1 decoder for performance. dav1d provides multi‑threaded decoding, SIMD optimizations for ARM and x86, and supports both 8‑bit and 10‑bit color depths.

Additional mobile‑specific work includes handling Fresco metadata parsing, region decoding limitations, memory‑leak fixes, and animated AVIF support.

3. Monitoring and Metrics

Server‑side monitoring tracks QPS, latency, fallback rates, cache hits, and AVIF‑specific counters. Mobile monitoring records memory, disk, network, and decode times, as well as error rates.

Bandwidth analysis shows that AVIF reduces video‑cover image size to roughly 63% of WebP, saving millions of dollars in CDN costs annually.

4. Challenges and Solutions

Resource contention in shared K8s clusters required separating AVIF tasks into a low‑priority container pool.

Load‑balancing inefficiencies were mitigated with a P2C (power‑of‑two‑choices) scheduler for offline jobs.

R&D effort is high due to the need for deep image‑algorithm expertise, metadata handling, and memory management for animated AVIF.

5. Future Outlook

Continuous upgrades of encoders/decoders as AVIF matures.

Cross‑platform optimization for Android, iOS, and Web.

Exploration of hardware acceleration (GPU, FPGA, VPU) for server‑side encoding.

Contribution to AVIF standardization and open‑source community.

Q&A

Tests show that AVIF does not noticeably increase energy consumption on typical devices; decoding overhead is mitigated by selective fallback and efficient decoder implementations.

References

Various public articles, WWDC talks, and Bilibili internal documentation links are provided.