AVIF Converter — Encode to AVIF or Decode AVIF to PNG, JPG and WebP

What AVIF is

AVIF is a still image wrapped in video technology. The pixels are coded as an AV1 intra-frame — the same compression a single still frame of an AV1 video gets — and stored in the ISOBMFF container that HEIF defines, which is why an AVIF file and an iPhone HEIC file are structurally cousins despite using different codecs. The format is specified by the Alliance for Open Media and is royalty-free, which is the practical reason it spread across browsers while HEIC did not.

Why a converter can silently lie about AVIF

The HTML specification is explicit: when toBlob or convertToBlob is asked for an image type the browser cannot produce, it does not throw — it returns a PNG. A converter that takes the resulting blob, renames the file to .avif and offers it for download has produced something that is not AVIF, is several times larger than the JPG it replaced, and will still display correctly in most places because browsers sniff content rather than trusting extensions. The failure is completely invisible until someone measures their page weight.

When to use AVIF, and when not to

• Photographs on the web, served from a <picture> element with a WebP or JPG fallback. This is where AVIF earns its keep, often at half the bytes of a comparable JPG.
• Large hero images where the bandwidth saving is measured in hundreds of kilobytes and the fallback costs one extra <source> line.
• Not for logos, icons or screenshots of text — flat colour and sharp edges are what lossless PNG and lossless WebP are good at, and AVIF's advantage largely disappears.
• Not for files you are sending to someone else. Design tools, office suites and older phones still refuse AVIF regularly. Convert to PNG or JPG first.
• Not when you need the metadata. Re-encoding through a canvas drops EXIF and ICC profiles. Use the EXIF remover if stripping metadata is the actual goal, and keep the original if it is not.

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="…" width="1600" height="900">
</picture>

The browser takes the first <source> whose type it can decode and ignores the rest, so no fallback is downloaded and nothing needs feature detection on your side. Keep the width and height attributes on the <img> regardless of which source wins — they are what reserve the space and stop the page shifting as images load.