Convert PNG to AVIF — extreme compression for UI assets

Why convert PNG to AVIF?

PNG was designed for lossless pixel-perfect reproduction, which makes it ideal for editing but expensive to ship. A full-screen 1920×1080 UI screenshot routinely weighs 800 KB–1 MB as PNG. AVIF's AV1-based codec is tuned for exactly the type of content PNG stores — large flat regions of solid colour, crisp text on white backgrounds, soft gradients in dashboards and hero sections. On this synthetic content AVIF achieves 80-90% size reduction at lossy quality 75, and even in lossless mode AVIF files are roughly half the size of equivalent PNGs. For web developers shipping documentation screenshots, marketing teams emailing design previews, and developers committing UI mockups to docs sites, switching from PNG to AVIF is the single highest-leverage image optimisation available today.

What you lose and what you gain

When you convert PNG to AVIF at quality 90, the result is visually indistinguishable from the source in side-by-side review — AVIF's perceptual quantisation tables are optimised to preserve edges and text rendering, which is exactly what UI content demands. At quality 75 you gain dramatic file size savings; fine sub-pixel text may show faint ringing artefacts at 200% zoom, which is below the threshold of normal reading. If you need absolute pixel fidelity — for a design source file you will edit again, or a sprite sheet whose pixels are read programmatically — use AVIF lossless mode instead. AVIF lossless preserves every pixel exactly, like PNG, but encodes about 40-50% more compactly because the AV1 entropy coder is more efficient than DEFLATE. AVIF also supports a full alpha channel, so PNG transparency is preserved in every mode.

How to convert PNG to AVIF

The entire process runs locally inside your browser using WebAssembly. No uploads, no server, no account required. The browser decodes PNG natively and libavif handles the AVIF encode. Note: AVIF encoding is computationally expensive — a 1920×1080 screenshot typically takes 5–15 seconds on a modern laptop, longer on older or lower-power devices.

1. Click "Convert to AVIF →" at the top of this page, or drag your PNG file onto the drop zone on the homepage.
2. ConvertMyPic decodes the PNG using the browser's built-in image decoder — the same path used by <img> tags — so even large 4K screenshots load instantly into a raw pixel buffer without any WASM overhead on decode.
3. The pixel buffer is passed to libavif compiled to WebAssembly (based on the AOMedia reference encoder at github.com/AOMediaCodec/libavif). Encoding runs in a Web Worker so the browser UI stays responsive during the 5–15 second encode.
4. A download button appears once encoding is complete. The AVIF file saves to your Downloads folder with the extension swapped — screenshot.png becomes screenshot.avif.
5. Need lossless output or a different quality level? Open /convert directly to access the quality slider (1–100), a lossless toggle, and an option to strip metadata before download.

File size comparison: PNG vs AVIF at different settings

Numbers from two representative test files: a 1920×1080 UI screenshot of a web dashboard (synthetic content, mostly flat regions and text) and a 4032×3024 photograph exported from an iPhone. All AVIF encodes used libavif at speed preset 6.

When to convert, and when to stay on PNG

Convert PNG to AVIF for any asset you ship to end-users: screenshots in blog posts and release notes, images in marketing emails, photos on documentation sites, hero images and feature callouts on landing pages. These assets are read once and never edited, so the size savings compound across every download. AVIF is the right call here. Stay on PNG for design source files you will open again in Figma, Sketch, or Photoshop — round-tripping through lossy AVIF degrades quality each time. PNG is also the safer choice for sprite sheets where code reads specific pixel coordinates, for favicon and icon assets below 48×48 pixels (where AVIF's block artefacts are proportionally large), and for any pipeline that receives the image file and re-processes it programmatically. For batch pipelines — converting hundreds of screenshots automatically during a CI build — be aware that libavif encoding is slow. At quality 75 and speed preset 6, a single 1920×1080 encode takes 5–15 seconds of CPU time. Factor that into your build budget, or drop to speed preset 8–9 for faster (but slightly larger) output. The browser-based tool here is optimised for one-off conversions; for batch work, consider Sharp, ImageMagick, or a Squoosh CLI wrapper.

Under the hood: which codecs are used

ConvertMyPic uses the browser's native PNG decoder — no WASM needed on the decode side, which keeps load times fast regardless of file size. AVIF encoding uses libavif (github.com/AOMediaCodec/libavif), the AOMedia reference implementation of AV1-based still image encoding and decoding, compiled to WebAssembly via Emscripten. The lossless path runs OxiPNG logic (github.com/shssoichiro/oxipng) to first optimise the PNG's DEFLATE stream before handing the pixel buffer to libavif, ensuring the encoder sees the cleanest possible input. Both the WASM module and the Web Worker are cached by the service worker after the first page load, so subsequent conversions start immediately even offline. The AVIF files produced are standard ISO BMFF containers and are readable by any AVIF-compliant decoder including Chrome 85+, Firefox 93+, and Safari 16+.