This Github repo is the source code behind the website avif.io. You can use avif.io to convert a wide variety of file formats into AVIF, directly inside your web browser.
This source code has been published in July 2021. Feel free to create issues or pull requests. We appreciate any help!
This project has been started by Justin (UX Designer) & Niksa (Developer). Each project comes with a set of responsibilities. As a two-person team involved in our day-to-day jobs and family, we could not dedicate the time necessary to keep the development as steady as we would have liked. Due to the fast-paced nature of the project, we thought it would be best to provide people with the ability to create their own versions and work on their own features. Multiple requests have been made for the source code to be released. Many people have asked how they can assist us with the development. We are pleased to announce that we are now an open-source project. Besides making the development process easier, the general public is also able to gain insight into how and what data we process. Due to the fact that file converters typically save your images in the cloud, being open-source provides people with the confidence that their images are secure
- Converted files are never sent to the server
- The entire conversion process is performed locally
- Unlimited conversions, even in bulk
- Flexible and userfriendly interface
- Options to change quality and effort
We use Rust with wasm-pack
to compile a converter library into WASM and call the Rust code
in the browser, from a WebWorker. The program uses Rust's
image library to decode files,
and for encoding to AVIF we use a fork of rav1e
modified to allow for proper progress updates.
The Rust code is in conversion/.
The root of the project is a Next.js application
written in TypeScript, based on React and Preact.
You can run the application via npm start, and watch and reload the
files via npm develop. The wasm-packed Rust code ends up in public/dist.
Building Rust requires cargo and make. To build the wasm
code for release, use:
cd conversion/
make wasmThis will also run webpack to move the produced WASM and JS
files to public/dist. Keep in mind that when you clone the repository
the Rust code will already have been compiled, so you don't have to
do this step yourself.
Using make, you can use make wasm-debug to build the WASM code
for debugging, or use make demo-debug to build a demo binary
to test out the Rust code in a non-WASM environment.
At the time of writing, the image library has very incomplete
support for the WebP format. Instead, we use a special build of
libwebp called webp_js,
which allows us to decode WebP files in the browser using the
canvas web API. This is important to keep in mind — WebP handling
is a special case at the moment, so don't be surprised that some
of the code is explicitly checking whether it's working with WebP.
You can find the related commands in the package.json file.