AVIF can create highly efficient image files while preserving excellent visual quality. Based on the AV1 video codec, it supports lossy and lossless compression, transparency, high bit depth, wide-gamut color and animation. These capabilities make it useful for many website images, but there is no single AVIF setting that works equally well for every type of content.
A photograph, logo, screenshot and illustration respond differently to compression. Natural photographs often tolerate moderate quality reductions, while small text, flat colors and sharp edges can reveal artifacts quickly. The ideal export also depends on the image dimensions, the encoder used by your software, the intended display size and the browsers that need to support the file.
This guide provides practical starting points for common image types. The suggested quality ranges assume a familiar 0 to 100 slider where higher values mean better quality and a larger file. AVIF itself does not define this type of quality scale. If your application uses a quantizer or another control, the values may work differently. Always test the output from your own encoder.
What to consider before exporting AVIF
AVIF optimization involves more than choosing a quality number. Several settings work together to determine the appearance and size of the final file.
- Dimensions: The width and height often have a greater effect on file size than a small quality adjustment. Resize the source to the largest size that the website actually needs.
- Quality: This determines how much visual information the encoder discards in lossy mode. Higher quality normally produces a larger file, but the exact behavior depends on the tool.
- Chroma subsampling: This stores less color detail than brightness detail. It can work well for photographs but may soften colored text, icons and thin graphic lines.
- Color depth: Eight bits per channel is usually sufficient for standard web images. Higher bit depth can help with HDR content and difficult gradients.
- Alpha: The alpha channel stores transparency. It requires careful testing for logos, cutout products, icons and images with soft edges.
- Encoding speed: Some encoders provide faster and slower modes. A slower mode may improve compression efficiency, but it also requires more processing time.
Do not judge an export by file size alone. A smaller image is not a successful optimization if it has blurry text, halos, banding, damaged texture or color shifts. Review each file at its actual display size, then inspect it at a larger zoom to identify subtle defects.
Recommended AVIF starting points
| Image type | Starting quality | Recommended approach | Important checks |
|---|---|---|---|
| Photographs | 60 to 80 | Eight-bit color and moderate chroma reduction are often suitable | Skin, hair, foliage, skies and fine texture |
| Product photos | 70 to 85 | Use more quality when labels, edges or materials are important | Packaging text, reflections and thin outlines |
| Logos and icons | 75 to 95 | Prefer 4:4:4 chroma and preserve transparency when required | Text edges, solid colors and transparent borders |
| Screenshots | 80 to 95 | Use 4:4:4 chroma for text and interface details | Small text, one-pixel lines and color blocks |
| Illustrations | 75 to 95 | Test flat colors and gradients separately | Banding, posterization and ringing |
| Large background images | 45 to 70 | Resize carefully and adjust quality to the viewing size | Blur, blocking and texture loss |
| Transparent images | 70 to 95 | Test alpha edges on light and dark backgrounds | Fringing, halos and soft details |
These ranges are starting points rather than fixed rules. Two encoders can produce different results from the same nominal quality value, and two images with the same dimensions can have very different compression needs.
AVIF settings for photographs
Photographs are generally among the easiest images to compress with AVIF. Their natural textures and gradual color changes allow the encoder to remove some information without producing obvious geometric artifacts.
On a typical percentage-based slider, begin between 60 and 80. Use the lower end for a large decorative image that is displayed relatively small. Use the higher end for a hero image, product gallery or photograph that visitors can open at a larger size.
Inspect difficult areas instead of judging only the overall image. Fine hair, grass, leaves, fabric, brick and distant branches can become smeared before compression is obvious elsewhere. Faces and skin also deserve attention because lost texture or subtle color changes can make them appear unnatural.
Eight-bit color and moderate chroma subsampling are often adequate for ordinary photographs. Chroma subsampling reduces color resolution while retaining more brightness detail. This can save space because people are generally less sensitive to small color changes than to changes in brightness and structure.
Use more color detail when a photograph contains fine colored lettering, strong saturated edges or small labels. In those cases, 4:4:4 chroma may preserve important details better than a more heavily subsampled option.
AVIF settings for product images
Product photography often needs more quality than a general decorative photo. Customers may inspect stitching, surface texture, labels, edges and material differences. Reflections and high-contrast boundaries can also reveal compression artifacts quickly.
Start around 70 to 85 on a percentage-based control. Compare the file at the size used in the product gallery, and also check any larger version that users can open. There is little benefit in delivering a very large source when the page displays it much smaller, but resizing too aggressively can remove useful product detail.
Pay particular attention to packaging, colored writing and narrow black text. If these details appear soft or uneven, increase the quality or switch to 4:4:4 chroma. This mode preserves full color resolution and is often helpful when sharp colored edges matter.
Use the original high-quality product image as the source for every export. Repeatedly converting an already compressed file can introduce additional loss and make it harder to identify the cause of visible defects.
AVIF settings for logos icons and illustrations
Flat graphics are often less forgiving than photographs. A logo may contain only a few colors, but its clean borders make ringing, blur and uneven edges easy to notice. Text, thin strokes and diagonal lines are especially sensitive to aggressive compression.
Begin between 75 and 95 on a percentage slider. A high setting is often worthwhile because preserving a logo’s crisp edges matters more than achieving the smallest possible file. Choose 4:4:4 chroma when the image contains colored text, narrow lines or sharp color boundaries.
Some simple logos and icons may be smaller and sharper as SVG files, particularly when they are made from vector shapes. AVIF is more appropriate when a raster format is required, when the design includes textures or painted effects, or when it forms part of a bitmap-based workflow. Select the format according to the artwork and its use rather than assuming that one format is always superior.
Illustrations with smooth gradients need careful testing. Compression can create banding, which appears as visible steps instead of a continuous transition. If this occurs, increase the quality, use a higher bit depth when supported or add a very small amount of suitable texture before export. Avoid adding noise automatically because it may increase file size and change the intended appearance.
AVIF settings for screenshots and interface images
Screenshots contain small text, sharp borders, icons and large areas of uniform color. These characteristics make them more sensitive to compression than most photographs.
Start around 80 to 95 on a percentage-based quality slider. Use 4:4:4 chroma when the screenshot includes text, colored controls or one-pixel lines. Lower chroma settings can make colored text look fuzzy even when the general layout still appears acceptable.
Resize screenshots only when the smaller dimensions will keep the content readable. Reducing an image by a non-integer scale can make interface text appear soft. If the screenshot documents software or demonstrates a process, preserve enough pixels for the target audience to read it comfortably.
Lossless AVIF may be useful for technical documentation, pixel-accurate references and screenshots that must remain unchanged. It does not guarantee a smaller file than PNG for every image, so compare the results rather than assuming that lossless AVIF will always be more efficient.
AVIF settings for transparent images
AVIF supports an alpha channel for transparent and partially transparent pixels. This makes it suitable for logos, icons, stickers, product cutouts, overlays and graphics with soft shadows.
Review a transparent export against both a light and a dark background. A pale or dark fringe may appear around the subject when the image contains compressed edge pixels or when the source was prepared against a different background. This problem can also relate to how the software handles color values in transparent pixels.
Use a quality setting between 70 and 95 as a starting point when the image includes detailed semi-transparent edges, hair, smoke or soft shadows. Simple icons with hard edges may tolerate more compression, but they should still be tested at their final display size.
Premultiplied alpha is a method of storing color values together with transparency. Different applications may handle alpha in different ways. If an unexpected outline appears, inspect the source’s transparent pixels, try another export option or compare the result from another encoder. Increasing quality alone may not solve an alpha-processing problem.
Color depth HDR and wide-gamut content
Most standard website images use the sRGB color space. It is a practical default because browsers, editing applications and displays commonly support it. Convert a source to sRGB for general web use when it was created in another color space, unless the website has a deliberate color-managed workflow.
Wide-gamut images contain colors outside the usual sRGB range. HDR, or high dynamic range, images also represent a wider range of brightness. AVIF can store this type of content, but the final result depends on the encoder, color metadata, browser, operating system and display.
When preparing HDR or wide-gamut AVIF files, preserve the correct color information and test the result in more than one browser. An image that looks correct in a color-managed editor may look different in an environment that interprets its metadata differently. For a general blog, store listing or business website, a carefully converted sRGB AVIF is usually the safer choice.
Quality sliders and quantizer values
Not every AVIF tool uses a simple quality percentage. Some applications expose a quantizer, QP or constant-quality value. These controls determine how much information is discarded, but their numerical direction depends on the encoder. In some tools, a lower number means higher quality.
Do not copy a value from one application into another and expect the same result. Identify how your software defines its control, then export a small test set. Include a photograph, a graphic with text, a gradient and a transparent image if those content types are part of your workflow.
If the encoder provides a speed or effort setting, begin with a moderate value. A slower mode can sometimes produce a smaller file at a similar visual quality, but the benefit varies by image and encoder. A slower mode may be suitable for one-time publishing, while an automated upload system may need to balance compression efficiency against processing time.
How to test an AVIF export
A controlled comparison is more reliable than trying to identify one perfect setting in theory. Start with the source image at the dimensions required by the website. Export several versions with clearly different quality levels and compare both appearance and file size.
- Confirm the source dimensions, color space and transparency.
- Resize a copy to the intended display or maximum responsive size.
- Export high, medium and lower quality AVIF versions using the same dimensions.
- Review the files at normal display size and at a larger zoom.
- For transparent images, test the edges on light and dark backgrounds.
- Look for blur, halos, banding, ringing, color shifts and damaged text.
- Choose the smallest version that still meets the visual and accessibility requirements of the page.
For responsive websites, provide more than one image dimension when appropriate instead of sending a very large file to every device. Responsive image features allow the browser to select a suitable source for the available display size. This can have a larger practical effect on loading performance than a small adjustment to the AVIF quality value.
AVIF and other web image formats
AVIF is not the only useful modern image format. WebP supports lossy and lossless compression, is familiar to many optimization tools and may encode faster in some workflows. AVIF can produce a smaller file for certain images, but the best choice depends on the content, processing requirements and browser support of the audience.
Compare AVIF with WebP, JPEG, PNG or SVG using the same original source. Review the images at their actual display size and consider transparency, text sharpness, encoding time and compatibility. Keep the original source file because repeatedly converting between lossy formats can introduce additional quality loss.
If some visitors use browsers without AVIF support, configure a suitable fallback such as WebP or JPEG. Check the current capabilities of your target browsers and content management system instead of assuming that every visitor can decode the same format.
Common AVIF export mistakes
- Using one quality value for every image: Photos, screenshots and logos have different compression needs.
- Ignoring dimensions: An oversized image remains inefficient even when its compression is good.
- Judging only by file size: A smaller file is not better if important details are damaged.
- Applying strong chroma reduction to text: Small colored text and thin lines can become soft.
- Skipping transparency tests: A transparent edge may look fine on white and show a halo on a dark page.
- Converting repeatedly: Export each AVIF directly from a high-quality original.
- Assuming lossless is always best: Lossless files can be larger than carefully tuned lossy exports.
- Skipping browser checks: Confirm that color, transparency and HDR content appear as intended in the environments that matter to your audience.
Frequently asked questions
What is a good AVIF quality setting for website photos?
On a common 0 to 100 quality slider, start between 60 and 80. Use a higher value for important product or hero images and a lower value for large decorative images displayed at a smaller size. The correct setting depends on the encoder and the detail in the photograph.
Is a higher AVIF quality number always better?
No. Many applications use higher numbers for better quality, but technical controls such as quantizers may use the opposite direction. Read the software documentation and compare test exports before applying a setting to an entire image collection.
Which AVIF settings work best for screenshots?
Use a high quality setting, often between 80 and 95 on a percentage slider, and prefer 4:4:4 chroma for small text and colored interface details. Lossless AVIF is worth testing when pixel accuracy is important or when the screenshot is used as technical evidence.
Can AVIF store transparent images?
Yes. AVIF supports an alpha channel for transparent and partially transparent pixels. Test the exported image on both light and dark backgrounds, especially when it contains soft shadows, hair, smoke or curved edges.
Why does my AVIF logo have a colored outline?
The outline may result from compression, chroma reduction, alpha handling or the transparent pixels surrounding the subject. Export at a higher quality, test 4:4:4 chroma, inspect the image against different backgrounds and try another encoder if necessary.
Should I use lossless AVIF for logos?
Lossless AVIF is useful when a logo must retain its exact pixels, but it is not automatically the smallest option. A high-quality lossy AVIF may look identical at its display size and use less storage. Compare it with SVG and PNG when those formats suit the artwork.
Does AVIF reduce image dimensions?
No. AVIF is an encoding format, not a resizing operation. It can preserve the source dimensions, but resizing an image to the largest useful display size is often one of the most effective ways to reduce the final file size.
How should I choose between AVIF and WebP?
Export both from the same original, compare their appearance and file sizes at the actual display size, and check browser requirements. AVIF may be smaller for some images, while WebP may encode faster or provide a simpler compatibility path.
Use the related tool
Process your files directly in the browser, for free and without sending them to the TopWebP server.
