Understanding AVIF Image Format: Benefits, Comparison, Conversion Tools, and Integration in Web Projects

Preface

With increasing focus on user experience, the AVIF image format can significantly reduce bandwidth and storage costs while improving page load times, offering better visual quality and smaller file sizes than JPEG.

1. AVIF Compression Comparison

AVIF, based on AV1 and using HEIF as a container, delivers higher compression efficiency; a sample shows an 18 KB AVIF image retaining clarity, whereas a JPEG of the same size appears heavily blurred.

2. Existing Image Formats

Standard JPEG, progressive JPEG, JPEG 2000, WebP, and HEVC each have distinct characteristics and compatibility considerations, but AVIF provides HDR, wide‑color‑gamut support, and broader device compatibility.

3. AVIF Conversion Tools

Online converters (e.g., https://convertio.co/zh/formats/avif/ and https://avif.io/) and command‑line utilities can be used. Example installation and usage:

npm install avif

Options: --input "*.{jpg,jpeg,tif,tiff,webp,png,gif,svg}" // Input files (supports globs) --output "" // Output directory (default same as input) --quality [1‑100] (default 50) // Quality vs size --effort [0‑9] (default 4) // CPU effort vs size --lossless [boolean] (default false) --chroma-subsampling "4:2:0"|"4:4:4" (default "4:4:4") --overwrite [boolean] (default false) --append-ext [boolean] (default false)

npx avif --input="./imgs/*" --output="./output/" --verbose

npx avif --input="images/*.*" --effort=0 --quality=30

npx avif --input="**/*.{jpg,jpeg}" --output="/another/path" --overwrite

4. Using AVIF in Projects

Client‑side graceful degradation can be achieved with the <picture> element:

<picture> <source srcset="img/photo.avif" type="image/avif"> <source srcset="img/photo.webp" type="image/webp"> <img src="img/photo.jpg" alt="Description of Photo"> </picture>

Server‑side detection can use the Accept header to serve AVIF when supported, falling back otherwise.

For browsers lacking native support, a JavaScript polyfill (avif.js) can be registered via a service worker:

npm install avif.js

require("avif.js").register("/avif-sw.js");

HTML to register the worker and use AVIF images:

<script src="reg.js"></script> <img src="image.avif" alt="..."> <div style="background: url(image2.avif)"></div>

5. Advantages

Small footprint (under 4 KB) and optional dependencies.

Easy integration; JS automatically intercepts AVIF fetch requests.

Fast decoding when native support is present.

6. Compatibility

Native support: Chrome 70+, Firefox 63+ (with flags), Edge 18+ (AV1 extension), Bromite 71+. Polyfill support: Chrome 57+, Firefox 53+, Edge 17+, Safari 11+.

7. Case Study

The Bilibili app heavily uses AVIF for images, demonstrating real‑world adoption.

8. Considerations Before Adoption

Evaluate existing image assets, assess mobile device support, measure performance impacts (load time, memory, CPU), and plan engineering work for build‑tool integration and fallback strategies.

References

https://jakearchibald.com/2020/avif-has-landed/

https://www.ctrl.blog/entry/webp-avif-comparison.html

https://github.com/Kagami/avif.js

https://android-developers.googleblog.com/2021/02/android-12-dp1.html