There is one condition. AVIF encoding is not something every browser can do. Chrome and Edge ship an AVIF encoder inside the canvas element, while Firefox and Safari do not, even though all four display AVIF perfectly well. This page detects that before you waste time on a batch.
Where encoding is available, the whole job runs locally. Your PNG is decoded, painted onto a canvas and re encoded through the browser's own AV1 encoder, with no upload and no account. An unreleased product shot never leaves the tab it was dropped into.
When it is worth converting PNG to AVIF
AVIF earns its keep on images that are large, photographic or gradient heavy, and that will be served to browsers. A screenshot exported as a 3 megabyte PNG will routinely land under 200 kilobytes as AVIF with no perceptible difference at normal viewing size. On a content heavy page that is the single biggest performance win available.
It is the wrong choice for anything that has to leave the web. Email clients, office suites, print workflows and most desktop software still do not read the avif image format, so a file that renders beautifully in a browser will show as a broken attachment elsewhere. Serve AVIF with a fallback, or keep the PNG for anything you hand to a person rather than a page.
- Convert when the image is a hero, banner, screenshot or photograph on a website.
- Convert when you can serve a fallback through a picture element or content negotiation.
- Convert when the PNG is large and the page is failing a Core Web Vitals check.
- Keep PNG for email attachments, documents and anything sent to print.
- Keep PNG for tiny icons, where the AVIF container overhead can exceed the saving.
Browser support for AVIF encoding, and why it matters here
Displaying AVIF and creating AVIF are two different capabilities. Every current major browser decodes it. Encoding through canvas toBlob is a much narrower story: Chromium based browsers, which means Chrome, Edge, Opera and Brave, support it, while Firefox and Safari return a PNG instead when you ask them for AVIF.
That silent substitution is the trap. A tool that does not check will hand you a file named with an .avif extension that is really a PNG inside, which then fails validation or bloats a page rather than shrinking it. This page runs a one pixel encode test as it loads and refuses to pretend.
If you are on Firefox or Safari, the honest answer is to open this page in a Chromium browser, or to encode AVIF as part of your build pipeline instead. Nothing this tool can do in JavaScript will add a codec your browser does not ship.
Choosing an AVIF quality level
The quality slider is passed straight to the encoder as a value between zero and one. AVIF holds up far better at low settings than JPEG does, because it uses larger, smarter prediction blocks and a much better entropy coder. Values that would look destroyed in JPEG are often still clean here.
For photographs and screenshots, 50 to 65 is the useful range and produces smaller image files than almost any alternative. Push to 75 or 80 for images with fine text or sharp diagrams, where AVIF's smoothing is more noticeable. Above 90 the file size climbs steeply and you are paying for detail no viewer will see.
Because the source is a lossless PNG, this is the first lossy pass the pixels have been through, so you have more headroom than you would converting from an already compressed file. Check the reported size against the original before you commit to a value.
How this PNG to AVIF converter works in the browser
The pipeline is short. The File API reads your bytes, the browser decodes the PNG into pixels, those pixels are drawn onto a canvas that preserves the alpha channel, and toBlob is called with the AVIF mime type and your quality value. The encoder that runs is the one compiled into the browser itself.
Because the AV1 encoder is doing real work, AVIF is noticeably slower than PNG or WebP. A large photograph can take a second or two rather than a few milliseconds, and a big batch is measured in tens of seconds. That is the encoder earning the file size, not the tool stalling.
Nothing is transmitted at any point, which you can confirm by watching the network panel while a conversion runs.
Transparency and colour in AVIF output
AVIF supports a full alpha channel, so transparency survives this PNG to AVIF converter without any flattening step or background colour decision. That is a real advantage over JPEG, and it means logos and cutouts can move across without the dark box problem.
AVIF also supports wide colour gamut and high dynamic range content. The browser encoder writes standard 8 bit sRGB output, which is the right choice for ordinary web images and matches what your PNG almost certainly contained.
| Property | PNG | WebP | AVIF |
|---|---|---|---|
| Compression | Lossless | Lossy or lossless | Lossy or lossless |
| Transparency | Yes | Yes | Yes |
| Encoded by browsers | All | All current | Chromium only |
| Displayed by browsers | All | All | All current |
| Typical photo size | 3 to 6 MB | 300 to 700 KB | 120 to 350 KB |
How to convert PNG to AVIF
- 1
Check the support notice
The page tests your browser's AVIF encoder on load. If it reports no support, reopen the page in Chrome, Edge or another Chromium browser.
- 2
Add your PNG files
Drag one or more .png images onto the drop area or click to browse. Files are read locally and never uploaded.
- 3
Set the AVIF quality
Start around 55 for photographs and 75 for images containing text or fine diagrams, then adjust once you see the reported size.
- 4
Convert and download
Press convert and wait. AV1 encoding is slower than PNG, so give a large batch time, then download the results.
Related tools worth bookmarking
Sources and further reading
- MDN: HTMLCanvasElement.toBlobDocuments how a browser silently falls back to PNG when it cannot encode the requested type.developer.mozilla.org
- AOMedia: AV1 Image File Format specificationThe official AVIF specification from the Alliance for Open Media, defining the container and alpha support.aomediacodec.github.io
- web.dev: Using AVIF to compress imagesGoogle engineering guidance on AVIF quality settings and serving the format with a fallback.web.dev
Frequently asked questions
Common questions about the png to avif converter.
Those browsers can display AVIF but do not include an AVIF encoder in the canvas element, so there is no way for a page to create one. Chrome, Edge and other Chromium browsers do include the encoder and will work normally.
Against a lossless PNG photograph the saving is usually between 80 and 95 percent. Against an existing JPEG at matching visual quality, expect 40 to 60 percent. Flat graphics and small icons save far less and can occasionally grow.
Yes. AVIF supports a full alpha channel, so transparent and semi transparent pixels come through unchanged. You do not need to pick a background colour the way you would when converting a PNG to JPEG.
Yes, with a fallback. Every current version of Chrome, Firefox, Safari and Edge displays AVIF, but older installed versions do not, so serve it through a picture element that offers WebP or JPEG as the alternative source.
AVIF uses the AV1 codec, which spends far more computation searching for an efficient encoding than PNG or WebP do. The extra seconds buy you the smaller file, and the work happens on your own processor rather than a shared server.