Compile libavif to WebAssembly for Browsers

This article explains how libavif, the official AVIF library, can be compiled to WebAssembly (Wasm) for execution directly inside a web browser. It covers the feasibility of this approach, the tools required for compilation, the role of underlying codecs, and the performance expectations when running client-side AVIF encoding and decoding.

Yes, libavif Can Be Compiled to WebAssembly

Yes, libavif can be compiled to WebAssembly and run directly in any modern web browser. Because libavif is written in C, it is highly compatible with Emscripten, the industry-standard compiler toolchain used to compile C and C++ code into WebAssembly and JavaScript “glue” code.

By compiling libavif to Wasm, developers can decode or encode AVIF images directly on the client side, bypassing the need for server-side processing.

The Role of Underlying Codecs

libavif itself is a muxer and demuxer; it does not actually encode or decode the raw AV1 video frames containerized in the AVIF format. To successfully compile and use libavif in WebAssembly, you must also compile at least one library capable of handling the AV1 codec.

• For Decoding: dav1d is the preferred AV1 decoder. It is highly optimized, fast, and compiles well to WebAssembly.
• For Encoding: libaom or rav1e are typically used. However, compiling encoders to WebAssembly results in larger file sizes and slower execution times.

During the build process, these helper libraries must be compiled to WebAssembly first, and then linked to the libavif build.

How to Compile libavif to WebAssembly

To compile libavif to WebAssembly, you will need the Emscripten SDK (emsdk) installed on your system. The general compilation pipeline involves the following steps:

1. Set up Emscripten: Activate the Emscripten environment in your terminal.
2. Compile the Decoder (e.g., dav1d): Configure the decoder library using Emscripten’s wrapper tools (like emcmake or emconfigure) and build it to static WebAssembly libraries.
3. Compile libavif: Configure libavif using emcmake cmake. You must explicitly point the build configuration to the WebAssembly-compiled decoder libraries built in the previous step.
4. Generate JS/Wasm Output: Instruct the compiler to output a .js wrapper file and a .wasm binary. These files can then be imported directly into a web application.

Use Cases for WebAssembly libavif

Compiling libavif to WebAssembly is highly useful for several web development scenarios:

• Browser Fallbacks: While most modern browsers natively support AVIF, older browsers do not. A Wasm-compiled libavif can act as a polyfill, allowing legacy browsers to render AVIF images.
• Client-Side Image Manipulation: Web-based design tools, CMS dashboards, and image optimizers can compress images to the AVIF format directly in the user’s browser before uploading them to a server, saving bandwidth.
• In-Browser Applications: Web applications that manipulate raw image data can use libavif to read and write AVIF files without relying on native browser APIs.

Performance Considerations

While WebAssembly delivers near-native execution speeds, there are performance limitations to consider:

• CPU Usage: Wasm-based decoding is entirely software-based. It does not benefit from the hardware acceleration that native browser decoding utilizes. This can lead to higher CPU usage and battery drain on mobile devices.
• Thread Support: To improve decoding speed, you should compile the libraries with multi-threading support (-pthread) using Web Workers, though this requires configuring specific security headers on your web server.
• File Size: The compiled .wasm file and its JavaScript wrapper will add to your website’s initial payload size. For polyfill purposes, this code should only be loaded dynamically when native AVIF support is missing.