A QOI decoder written in the WebAssembly Text Format (WAT). Current size of the library is 607 bytes.

An implemention of the QOI decoder. This implementation is dependent on that the host can handle Multi-Value Wasm. Included is a compiled WAT to WASM file that can be instantiated to decode images. Demo is deployed here. (Note the requirements for the browser noted below.)

The wasm module assumes that the QOI data, including the header, is stored at memory index 0 before decompression. To decompress the data call the decode method, e.g.,

const header = wasm.instance.exports.decode();
const [width, height, channels, colorspace, memoryOffset] = header;

Where the width will be greater than zero if the data is a valid QOI. The memoryOffsets names the index where the decompressed data starts in the now expanded memory area.

In the viewer folder is an example on how to use the module. To view the example you need a browser that supports the File API, works on Chrome at the moment, does not work on Safari. There are two .qoi files in the assets folder that can be used as test input. To run the example locally

node serve.mjs

and point your compatible browser to QOI Viewer

To compile the project, install the dependencies and run the compile script

npm i

npm run compile

The ouput is the decoder file called qoi.wasm.

Another option is to inline the decompressor and the image data into a WASM module. After the module is loaded the instance exports a method called d (for decompress) and the memory (m) where the result will be after decompression. See below for memory layout, main difference here is that the decompressed data is stored at location 0.

npm run kombine file.qoi

If all goes well a new file will be written in the same folder as the src QOI file.

To see a runtime example running locally

npm run serve

and go to kombiner

To try the compilation step

npm run kombine ./assets/pixil-frame-0.qoi

and the compiled files will be stored in the assets folder.

Some example results. (sizes in bytes)


File                    PNG         QOI         QOI-WASM    QOI-WASM-BROTLI
pixil-frame-o           124         104         574         312
peerfeer_frame_rgba     1684359     1747735     1748220     1019745
dice                    349827      519653      520137      318134
kodim10                 593463      652383      652867      499685
kodim23                 557596      675251      675735      513703
qoi_logo                16605       16488       16968       7977
testcard_rgba           14227       24167       24647       9135
testcard                18371       21857       22337       7306
wikipedia_008           1344960     1521134     1521618     1226036

First two images are included in this repository, the rest comes from the official QOI page.

The WebAssembly Binary Toolkit for compiling the WAT files to WASM.

Brotli for compressing the inlined decompression module.