AVIF can make images much smaller without making them look noticeably worse, but the best result depends on more than choosing the format. Compression settings, image content, viewing size, transparency and browser support all affect the final experience.
The goal is not to make every AVIF file as small as possible. An extremely small file may load quickly, yet show blurred details, blocky textures, color banding or other visible problems. A larger file may preserve quality that visitors will never notice. The right balance is the smallest file that still looks correct at the size and quality your audience needs.
This guide explains how AVIF compression works, which settings matter most, how to compare quality fairly and when another format, such as WebP, may be a better practical choice.
What AVIF is and why file size varies
AVIF is an image format based on the AV1 video compression technology. It can store still images with lossy or lossless compression, transparency, animation, wide color gamuts and high dynamic range. Lossy compression removes some visual information to reduce the file size. Lossless compression preserves the image data exactly, but usually produces larger files for photographs.
AVIF does not have one fixed quality level. When an image is exported, an encoder uses settings that control how aggressively it compresses the source. Different encoders and software tools may label these settings differently. One application may use a quality scale from 0 to 100, while another may use a quantizer scale where lower values preserve more detail.
A quantizer is a compression control that determines how much image information is discarded. In general, a lower quantizer produces better quality and a larger file, while a higher quantizer produces a smaller file and a greater risk of visible artifacts. Because scales differ between tools, a setting number is not meaningful by itself. Compare the output visually and by file size using the same encoder whenever possible.
The source image also matters. A smooth studio product photo, a noisy night photograph and a screenshot with sharp text may produce very different file sizes at the same nominal quality. This is why there is no universal AVIF setting that works perfectly for every image.
How compression changes what you see
AVIF compression can affect different parts of an image in different ways. The first changes may be difficult to notice at normal viewing size, but they can become obvious when you zoom in or compare the image with the original.
- Fine texture: Hair, grass, fabric and foliage can lose small details or appear overly smooth.
- Edges: Text, logos and line drawings may become soft, especially when the image is resized after compression.
- Color transitions: Skies, walls and shadows can show bands instead of smooth gradients.
- Noise: Grain in a photograph may be removed or turned into distracting patterns.
- Small contrast details: Facial features, product textures and dark objects may lose separation.
- Transparency: Fine edges around transparent objects can show halos or look less clean against a new background.
Some artifacts are easier to notice than others. A slightly smoother background is often acceptable on a large website photo. Blurred text in a screenshot or a damaged logo is usually not. Quality decisions should therefore focus on the most important visual features, not only on a general impression of the whole image.
AVIF quality is not the same as pixel dimensions
Image dimensions and compression quality are separate decisions. Dimensions describe the number of pixels, such as 2,000 by 1,333. Compression controls how efficiently those pixels are stored.
Reducing dimensions can often save more space than applying stronger compression to an oversized image. For example, a photograph displayed at a small card size does not need to retain thousands of pixels that visitors cannot see. On the other hand, reducing a product image too far can make it look soft when a user opens it or views it on a high-density screen.
Prepare the dimensions first, then choose a quality level. A useful workflow is to create an image close to its largest intended display size, export it as AVIF, and compare it at the actual size used on the page. If the file is still too large, test a modest reduction in dimensions before applying much stronger compression.
Lossy and lossless AVIF for different images
Lossy AVIF is usually the practical choice for photographs and other continuous-tone images. It can reduce file size substantially while keeping the image visually convincing. The exact result depends on the source and the encoder, so inspect the output rather than relying on a preset label such as high or medium quality.
Lossless AVIF keeps the decoded pixels identical to the source. It can be useful for images that must remain exact, including certain technical graphics, archival assets or files that will be edited again. However, lossless compression does not guarantee a small file. A detailed photograph may remain much larger than a similarly sized lossy version.
For screenshots, interface graphics and illustrations, lossless compression is not automatically the best option. Some images contain large flat areas and sharp edges that may compress well with a lossy setting, while others show text or thin lines that quickly reveal quality loss. Compare AVIF with formats designed for those features, including PNG or WebP, before making a final choice.
Practical starting points by image type
The following table is a starting reference, not a set of guaranteed settings. Encoder scales differ, and the same setting can produce different results across images.
| Image type | What to protect | Practical approach |
|---|---|---|
| Photographs | Textures, faces, natural edges and smooth gradients | Use lossy AVIF and test several nearby quality levels at the intended display size. |
| Product images | Shape, labels, fine materials and clean backgrounds | Inspect edges, small text and highlights. Avoid settings that create halos or muddy detail. |
| Logos and icons | Sharp boundaries, flat colors and transparency | Compare AVIF with SVG, PNG or WebP. Use lossless output when exact edges matter. |
| Screenshots | Readable text and interface lines | Check at normal size, not only when zoomed in. Strong compression can make text uncomfortable to read. |
| Illustrations | Color blocks, outlines and gradients | Look for banding and edge softness. A slightly larger file may be preferable if the design is sharp. |
| Transparent images | Object edges and the appearance against different backgrounds | Test on both light and dark backgrounds, especially around hair, glass and soft shadows. |
How to compare AVIF quality fairly
A reliable comparison uses the same source image, dimensions, color settings and encoder. Change one variable at a time. If you resize, sharpen and compress an image in one step, it becomes difficult to tell which change caused an improvement or a problem.
Place the original and each AVIF version next to one another. Check them first at the size visitors will normally see. Then inspect important details at a moderate zoom. Extreme zoom can make harmless differences look serious, while viewing only a small thumbnail can hide defects that visitors will notice on a large screen.
Look at several areas of the image:
- Faces and skin tones in portraits.
- Text, logos and thin lines in graphics.
- Clouds, skies and other smooth gradients.
- Dark shadows and bright highlights.
- Leaves, hair, fabric and other fine textures.
- Transparent edges over both light and dark backgrounds.
Check the file size after each export. A small visual improvement may require a disproportionate increase in file size. If the difference is visible only at extreme zoom, the larger file may not be worth using. If the difference affects readability, brand details or the main subject, preserve the quality even when the file becomes larger.
Quality settings and the point of diminishing returns
Increasing quality does not improve an image indefinitely. Once the compressed version looks the same as the original at its intended display size, further increases mostly add bytes. This is the point of diminishing returns.
To find it, start with a relatively careful export and make progressively smaller tests. At first, reducing quality may save a noticeable amount of space with little visible change. Later, a similar reduction may cause obvious artifacts. The useful setting is usually just before that sudden decline.
Do not judge only by a quality slider. Some encoders use slower modes that spend more time searching for efficient compression. A slower encode may produce a smaller file at similar visual quality, although the benefit depends on the encoder and image. For a large website, encoding time may matter during the build process even when visitors never notice it.
Color, chroma and high dynamic range considerations
Chroma refers to color information, while luma refers mainly to brightness information. Many image formats store less color detail than brightness detail because human vision is generally more sensitive to changes in brightness. This can reduce file size, but it may also affect saturated edges, small colored text and graphics with strong color boundaries.
Photographs often tolerate reduced chroma detail well. Interface screenshots, colored text and illustrations may not. When a graphic contains small, high-contrast colored elements, inspect those edges carefully after export.
Wide color gamut means an image can represent a broader range of colors than a standard display color space. High dynamic range, often called HDR, allows a wider range between dark and bright tones. AVIF can support advanced color and brightness information, but the whole delivery chain must handle it correctly. The encoder, browser, operating system, display and page styling all influence the result.
If your audience uses ordinary screens, a carefully prepared standard dynamic range image may be the more predictable choice. If you are delivering HDR or wide-gamut AVIF, test on the devices and browsers that matter to your visitors. Do not assume that a file that looks correct in an editing application will appear identical everywhere.
Transparency and animation need extra testing
Transparency adds an alpha channel, which stores how opaque or transparent each pixel is. A transparent AVIF can look correct over one background and show problems over another. Check the edges of hair, smoke, glass, shadows and anti-aliased shapes against the colors used on your website.
Animated AVIF can reduce the size of some animated content, but it introduces additional compatibility, decoding and performance considerations. An animation with many frames or large dimensions may use substantial memory even if the download is small. Test playback on mobile devices and consider whether a static poster image is needed while the animation loads.
Browser support and fallback planning
Modern browsers generally support AVIF, but support can vary by browser version, operating system, application and special features such as animation or HDR. Visitors may also save an image and open it in software that does not support the format.
For important website images, a fallback can make delivery more robust. A page can offer AVIF first and provide another format, such as WebP or JPEG, when AVIF is not supported. The fallback should be visually comparable and sized for the same use. There is little benefit in creating a tiny AVIF if unsupported visitors receive an unnecessarily large alternative.
WebP remains a practical option when broad compatibility, simple tooling or predictable behavior is more important than achieving the smallest possible file. You can use TopWebP’s browser-based tool to convert images to WebP and compare the result with your AVIF version. The best format is the one that provides an appropriate visual result, file size and delivery experience for your audience.
A sensible workflow for websites
- Start with a clean source. Use the original image when possible. Avoid repeatedly converting an already compressed JPEG or WebP.
- Choose suitable dimensions. Create versions for the actual display sizes instead of sending one oversized file to every device.
- Export an initial AVIF. Use a moderate quality setting and keep the encoder and color profile consistent during testing.
- Inspect important details. Review the image at normal size and check faces, text, gradients, shadows and transparent edges.
- Test nearby settings. Compare a smaller and a larger version to identify where visible quality begins to decline.
- Measure the files. Consider download size, dimensions and the number of images used on the page.
- Prepare a fallback. Confirm that the alternative format is available and does not have avoidable quality or dimension problems.
- Test real delivery. Check the page on different browsers, screen sizes and network conditions, especially on mobile.
Keep the original files separately from the delivery versions. This lets you change dimensions, format or quality later without repeatedly compressing a compressed copy.
Common mistakes when optimizing AVIF
Using one setting for every image: A quality level that works for a landscape photo may damage a screenshot or logo. Group images by purpose and test representative files.
Comparing only file sizes: The smallest file is not automatically the best file. A visible quality problem can reduce trust or make information harder to read.
Ignoring display dimensions: Exporting a huge image and relying on CSS to shrink it wastes bandwidth. Resize the image before compression.
Checking only on a white background: Transparent edges and halos may appear only on dark or colored backgrounds.
Testing only the original browser: A file that works in your current browser may fail in an older browser, an image viewer or a content management system with limited support.
Recompressing repeatedly: Each lossy conversion can introduce additional changes. Return to the original source when producing a new delivery version.
Frequently asked questions
Is AVIF always smaller than WebP or JPEG?
No. AVIF often provides strong compression, but the result depends on the image, encoder, settings, dimensions and color features. A carefully optimized WebP or JPEG can be smaller for a particular file, especially when compatibility or encoding settings differ. Compare real outputs rather than assuming one format always wins.
What AVIF quality setting should I use?
There is no universal number because applications use different scales and encoders. Start with a moderate setting, export several nearby versions and inspect them at the intended display size. Choose the smallest version that preserves important details and remains comfortable to view.
Should photographs use lossy or lossless AVIF?
Lossy AVIF is usually the practical starting point for photographs because it can reduce file size while maintaining convincing visual quality. Use lossless AVIF when exact pixel preservation is important, or when testing shows that lossy compression damages details you need to keep.
Can AVIF replace PNG for transparent images?
It can be a useful alternative for some transparent images, but it should be tested. Logos, icons and graphics with sharp edges may need lossless compression or may work better as SVG or PNG. Check the image against the backgrounds used on your site before replacing the original format.
Why does the same AVIF setting create different file sizes?
Compression efficiency depends on image content. A smooth image, a noisy photograph, a screenshot and a detailed illustration contain different patterns and therefore require different amounts of data. Dimensions, color depth, transparency and animation also affect the output.
How can I tell if an AVIF image is too compressed?
Compare it with the source at the size visitors will see. Look for soft text, broken edges, banding in gradients, smeared textures, block-like patterns and halos around transparent objects. If an artifact affects the main subject or makes information harder to read, use a higher quality setting or a different format.
Do I need an AVIF fallback on a website?
A fallback is sensible when your site serves visitors with varied browsers, operating systems or image software. Offer a comparable WebP, JPEG or PNG version when appropriate. The fallback should use suitable dimensions and quality rather than being an untouched, oversized source image.
Is a larger AVIF ever the better choice?
Yes. A larger file can be worthwhile when it preserves readable text, product labels, faces, fine edges or important color transitions. Optimization is a balance between transfer size and visual reliability, not a competition to produce the smallest possible file.
Should I compare AVIF images at 100 percent zoom?
Check both the intended display size and a moderate zoom. Normal size tells you what most visitors will experience, while moderate zoom helps reveal problems in text, edges and gradients. Extreme zoom can exaggerate differences that are not visible during ordinary use.
A practical definition of the right balance
The right AVIF balance is reached when the image loads efficiently and still serves its purpose without distracting defects. For a photograph, that may mean preserving faces, texture and natural gradients. For a screenshot, it may mean prioritizing readable text over a smaller file. For a logo, exact edges and transparency may matter more than aggressive compression.
Use dimensions that match the design, test quality with the actual image content, compare the result at normal viewing size and keep a suitable fallback. When AVIF does not offer a clear advantage for a particular asset, WebP, JPEG, PNG or SVG may be the more sensible choice. Good image optimization is not about choosing one format forever. It is about choosing the most appropriate representation for each image and each visitor.
Use the related tool
Process your files directly in the browser, for free and without sending them to the TopWebP server.
