Images are usually the heaviest thing on a web page, and they are often the largest element a visitor waits for, which makes them the main influence on Largest Contentful Paint, one of Google's Core Web Vitals. AVIF is the newest widely supported format and, for photographs, it commonly produces noticeably smaller files than JPEG or WebP at similar visual quality. The saving varies a lot from one image to the next, so treat any single percentage you read online as a rough guide and check your own images.
Why compress to AVIF
AVIF is the still-image format from the AV1 video codec. It supports transparency, high bit depth and wide color, and it handles smooth gradients, such as skies and soft studio backgrounds, with less banding than older formats at small sizes. All current versions of Chrome, Edge, Firefox and Safari can display it, which is enough for most sites as long as you give older browsers a fallback. The trade-off is encoding time: AVIF takes more computing power to create than JPEG or WebP, which is irrelevant when you compress a handful of images by hand but matters if you process thousands on a server.
AVIF vs WebP vs JPEG
| Format | Best for | Transparency | Watch out for |
|---|---|---|---|
| AVIF | Photos and gradients where size matters most | Yes | Slower to encode, needs a fallback for very old browsers |
| WebP | A safe default for photos and graphics | Yes | Often a little larger than AVIF at similar quality |
| JPEG | Universal compatibility, email, social uploads | No | Larger files, visible blocking at low quality |
| PNG | Sharp-edged graphics, screenshots with text, logos | Yes | Very large for photographs |
A sensible rule is: serve AVIF to browsers that support it, WebP as the second choice, and keep a JPEG or PNG original as the final fallback. For logos and icons, prefer SVG, which our SVG Optimizer will shrink further.
How to compress an image to AVIF
The Image Compressor converts images to AVIF, WebP, JPEG or PNG without uploading them anywhere. Everything is done by your browser, on your device.
- Resize first. A photo straight from a phone can be 4000 pixels wide, but a content column rarely shows more than 1200. Resizing to the largest size the image is displayed at, doubled for sharp high-density screens, removes more weight than any quality setting. The Image Resizer handles exact sizes and crops.
- Drop your files into the compressor and choose AVIF as the output format. AVIF output needs a browser that can encode it: Chrome and Edge can, and the AVIF button is greyed out in browsers that cannot.
- Set the quality using the starting points below, then compare the result with the original using the before and after slider.
- Check the file size and the image at 100 percent zoom, looking at faces, text, skin tones, hair and smooth backgrounds, which show problems first.
- Download the files individually or as a zip, and name them clearly, for example
team-photo-1200.avif.
Quality settings to start with
Quality numbers are not comparable between formats. A JPEG at 80 and an AVIF at 80 are completely different files. These are starting points that work for typical photographs, not rules, and the right number depends on your picture:
- AVIF: start around 50 to 60 and move up in steps of 5 if you see smearing in fine detail.
- WebP: start around 75 to 80.
- JPEG: start around 75 to 82. Below 70, blocky artefacts around edges become obvious on most photographs.
Screenshots, charts and anything with small text behave differently from photographs. Lossy compression blurs thin lines and text, so for those use PNG, lossless WebP or a higher AVIF quality, and look at the result closely before you publish.
Tip: compress to a target, not to a number. Decide what the page needs, for example a hero image under 150 KB and content photos under 80 KB, then lower the quality until you hit that and stop. If the image looks bad at the target, resize it smaller instead of adding more compression.
Serve AVIF with a fallback
The HTML picture element lets the browser choose the first format it understands, so visitors on older browsers still see an image. Always include width and height so the layout does not jump while it loads:
<picture>
<source srcset="/img/team-1200.avif" type="image/avif">
<source srcset="/img/team-1200.webp" type="image/webp">
<img src="/img/team-1200.jpg" alt="The Bend studio team at work"
width="1200" height="800" loading="lazy" decoding="async">
</picture>
Two refinements matter for speed. Do not lazy-load the main image at the top of the page, because that delays it, and consider adding fetchpriority="high" to it instead. Use srcset and sizes to give phones a smaller file than desktops. If your server runs Apache, the .htaccess Generator can add long cache lifetimes for image files so repeat visitors never download them twice.
Common mistakes
- Compressing an already compressed JPEG at low quality. Each pass adds artefacts. Start from the original whenever you have it.
- Serving huge dimensions at tiny display sizes. A 3000 pixel image shown at 300 pixels is mostly wasted bytes.
- Using AVIF for everything. Logos, icons and simple illustrations are better as SVG or PNG.
- Forgetting the alt text. Every meaningful image needs a short description, and decorative ones should have an empty
alt="". - Skipping a real-device check. Open the page on a phone with a slow connection before you decide it is fast enough, or run the Website Speed Test and look at the LCP element.
Privacy and metadata
Camera photos often carry EXIF metadata, including the time and sometimes the GPS location where the picture was taken. Converting through a canvas in the browser, as the compressor does, writes a fresh file without that block, which is a useful side effect when you publish photos of your home, office or clients. If you need to keep copyright information, add it back in your editing software or in the page markup instead.
For the wider set of pre-launch checks, including images, caching and Core Web Vitals, see the website launch checklist.
Frequently asked questions
How do I compress an image to AVIF?
Resize the image to the largest size it is displayed at, then convert it to AVIF in the Image Compressor, starting at a quality of about 50 to 60. Compare it with the original, raise the quality if you see smearing, and download the result. Everything runs in your browser.
Is AVIF better than WebP?
For photographs, AVIF often produces smaller files than WebP at similar quality, but the difference depends on the image. WebP encodes faster and has been supported longer. Many sites serve AVIF first and WebP second.
Do all browsers support AVIF?
Current versions of Chrome, Edge, Firefox and Safari can display AVIF. Older browsers cannot, so use the picture element with WebP and JPEG fallbacks so everyone sees an image.
What quality should I use for AVIF?
A quality of roughly 50 to 60 is a good starting point for photographs. Increase it in steps of 5 if fine detail looks smeared, and use a higher setting or a lossless format for screenshots and text.
Does converting to AVIF remove my photo location data?
Converting an image through the browser canvas, as this compressor does, creates a new file without the original EXIF block, so GPS and camera details are not carried over. Check the final file if privacy matters.