Compress images to AVIF — the smallest web images available

Why choose AVIF

When you want the absolute smallest payload for a modern audience, AVIF is the format to beat. Like WebP it supports both lossy and lossless encoding plus transparency, and it adds wide colour gamut and high dynamic range that JPEG can’t meaningfully carry.

• Smallest files — usually ahead of WebP at the same perceived quality.
• Wide colour / HDR — future-proof colour for photographs.
• Encoder cost is yours, decoder cost is tiny — encoding runs once on your machine; readers only ever decode.

The trade-off: encoding speed and support

AVIF encodes more slowly than WebP or JPEG — that is the price of its compression efficiency. Because this tool compresses on your own device, the wait is measured in your browser tab, not on a server queue. Support now covers all major current browsers, but for pages served to very old software, keep a WebP or JPEG fallback with the <picture> element — the pattern is shown in WebP vs AVIF vs JPEG.

If your browser can’t encode AVIF at all, the tool notices and serves you WebP instead, with a clear warning — you never silently get the wrong format.

Suggested AVIF settings

Around quality 60–70 is the sweet spot for photographs; this page defaults to the Web Ultra preset (65). That range sounds aggressive next to a JPEG habit, but AVIF’s encoder distributes error differently and holds onto edges and gradients far better at a low number. Zoom the comparison slider to 100% and nudge quality down until skin, skies and text edges start to break, then step back up one notch.

• Photographs, general use — quality 60–70. Usually lands well under the equivalent WebP and JPEG.
• Screenshots and UI — 70–80. Flat colour plus crisp text is where a lossy format can start to halo around lettering, so give it more room.
• Graphics that need transparency — AVIF carries an alpha channel, so you rarely need PNG. If the graphic is mostly flat colour with hard edges, compare it against the lossless PNG path and keep whichever wins on size.
• Hero images on a content page — AVIF plus responsive sizing, as covered in reducing image file size for a faster website. The format choice and the pixel dimensions are separate levers; pulling both is where the large wins come from.

If a destination enforces a byte ceiling, skip the guessing entirely: set a target size and let the encoder find the best quality that fits — see compressing to a target file size. That matters more with AVIF than with other formats, because its efficiency curve is steep: the gap between “comfortably under budget” and “pushed too far” is easier to miss.

How AVIF gets its size advantage

AVIF borrows the intra-frame coding tools of AV1, the video codec designed to carry the most detail per bit. Where JPEG splits an image into independent 8×8 blocks and quantises each one, AVIF can predict a block from its neighbours the way video frames predict each other, work with larger transforms, and apply directional filtering. The result is that the encoder spends its bits on what a viewer actually notices instead of on visible block structure.

The practical symptom: on the same photograph at the same file size, JPEG tends to break down first in flat gradients — skies, skin, soft shadows — where AVIF holds the ramp clean. Where AVIF can look worse is very fine, high-frequency texture, because aggressive smoothing there reads as softness rather than as an artefact. Which is exactly why the comparison slider on this page is worth using instead of trusting a quality number.

Colour is the other half of the story. AVIF as a format supports a wide gamut and high bit depth, which is part of why it is the container HDR images travel in. What this browser pipeline hands you is narrower than the format’s full ceiling: an image decoded from your screen and re-encoded through a canvas arrives as standard dynamic range, 8-bit per channel. So for photographs on the web you get AVIF’s efficiency, not HDR — and HDR authoring belongs in a dedicated encoder. Being precise about that matters, because “AVIF supports HDR” is often sold as though any AVIF file is one.

Serving AVIF without breaking older browsers

Current Chrome, Edge, Firefox and Safari all render AVIF. The gap is old software, and some embedding contexts. Rather than detecting in script, let the browser choose by offering candidates in preference order — it takes the first one it can decode:

<picture>
  <source srcset="photo-1200.avif" type="image/avif" width="1200" height="800">
  <source srcset="photo-1200.webp" type="image/webp" width="1200" height="800">
  <img src="photo-1200.jpg" alt="A description of the photo"
       width="1200" height="800" loading="lazy" decoding="async">
</picture>

Two things in that snippet do more work than people expect. Setting width and height reserves the box so the layout does not jump when the image lands, which shows up directly in Cumulative Layout Shift. And loading="lazy" on anything below the fold stops the browser fetching images the visitor never scrolls to. Both apply whatever format you settle on.

Keep the JPEG fallback because a handful of destinations still cannot be reasoned with — some social platforms’ scrapers, older e-commerce themes, and upload forms that reject anything they do not recognise as a photograph.

When AVIF is the wrong choice

It is not a default for everything. Be deliberate about these cases:

• Animation. This tool encodes still AVIF. Animated AVIF exists as a format, but it is not what you get here, and GIF replacements usually want WebP instead.
• Anything you re-encode repeatedly. Every generation costs, and AVIF decode-then-re-encode is slower per pass than the JPEG path. Fine for a build step; annoying for a hundred files on a laptop.
• Recipients outside a browser. A form, a print workflow or a desktop app may not open AVIF at all. Converting AVIF back to JPG is the fix when you have already gone down this road.
• Already-tiny images. A 6 KB icon has so little data that the encoder cannot exploit its advantages, and container overhead can make the AVIF no smaller. Compare the actual output; the format is not automatically the winner at that scale.

And if you are weighing AVIF against WebP for a whole site rather than one image, the format comparison guide covers the decision rule in more detail than this page can justify.