AVIF for Websites: Image Performance and ROI

AVIF can reduce the bytes needed to deliver some website images, which can shorten image download time and may help Largest Contentful Paint (LCP) when an image is the page’s largest visible element. The size and visual-quality result depends on the image and encoding settings; changing formats alone does not guarantee a site-wide speedup, higher conversions, or more revenue.

Deploy it by comparing representative assets at acceptable visual quality, serving appropriately sized responsive images, and providing a fallback where your audience or delivery stack needs one. Measure real page performance and costs before drawing conclusions about return on investment.

1. What AVIF changes for a website

AVIF is an open, royalty-free image format based on AV1. It supports lossy and lossless compression, transparency, wide color gamut, and HDR features. It can produce smaller files than older formats, but there is no reliable universal savings percentage: content, dimensions, encoder, and quality settings all matter. web.dev’s AVIF guide recommends testing compression levels and checking the rendered result.

Smaller image files mean fewer bytes to transfer. That can reduce an image’s resource load time and may improve LCP if that image is the LCP element. It will have less effect when the page is limited by server response time, render-blocking resources, JavaScript, or other work.

Photographs often tolerate lossy compression better than screenshots, line art, and graphics with sharp edges or high-contrast text. Inspect actual assets for ringing, banding, blurred detail, and color changes. An image that is smaller but visibly degraded is not an acceptable optimization.

2. AVIF compared with other image formats

Format	Useful when	Things to evaluate
AVIF	You want to test modern lossy or lossless compression, transparency, or wide-gamut/HDR delivery.	Encoding and decode cost, visual artifacts on hard edges and text, audience support, fallback behavior, and cache variants.
WebP	You want a modern web format with lossy and lossless options and broad practical use.	Compare bytes and appearance against AVIF for your assets; neither format wins every image or metric.
JPEG	You need a familiar fallback for photographic images or an existing pipeline depends on it.	It does not provide the same feature set as AVIF; test quality at the delivered dimensions.
PNG	You need lossless raster output, sharp graphics, or transparency in workflows where PNG is appropriate.	Photographic PNGs can be large; compare a modern format carefully if lossy encoding is acceptable.
SVG	The image is vector artwork such as an icon or diagram.	It is not a general replacement for photographic raster images.
Video	The asset is a substantial animation or motion sequence.	For large animations, consider video formats such as MPEG-4 or WebM rather than assuming animated AVIF is best.

Published numbers are bounded examples, not a forecast for your site. In 2023, web.dev reported Imgix’s announced savings of 60% versus JPEG and 35% versus WebP; those figures describe Imgix’s results, not every image set. A separate web.dev test on 15 GIF samples found approximately 86% median savings against the original GIFs and approximately 73% against animated JPEG XL, using specified encoder versions and methods. Treat these as dataset-specific results. The AVIF comparison material also documents historical tests where results varied by metric and setup.

3. Build a safe AVIF rollout

Inventory the important images. Start with large, visible assets such as hero images and images that contribute substantial transfer bytes. Use Chrome DevTools’ image delivery insights to identify potential savings, then confirm which images matter to your pages. See Chrome’s image delivery guidance.
Record a baseline. Save current image URLs, formats, dimensions, transfer sizes, and quality settings. Record real-page LCP and the relevant lab or field measurements you use. Note other changes that could affect the result.
Generate candidates at the dimensions you serve. Compare AVIF, WebP, and the existing format at visually acceptable quality. Include photographs, text-heavy graphics, transparency, and other representative content.
Inspect the rendered result. Review at the actual display size and on high-density displays where applicable. Keep a non-lossy source for assets where lossy artifacts are unacceptable.
Serve responsive widths. Use srcset and sizes so the browser can choose a suitable candidate. Sending a large desktop image to a small screen can erase much of the benefit of format compression.
Add a fallback. Use <picture> when markup-based format choice fits your stack, or negotiate formats on the server or image CDN.
Deploy gradually and remeasure. Compare bytes, visual quality, LCP, errors, and cache behavior after rollout. Keep the option to revert if quality or operational behavior is poor.

<picture>
  <source
    type="image/avif"
    srcset="/images/hero-640.avif 640w, /images/hero-1280.avif 1280w"
    sizes="(max-width: 700px) 100vw, 1200px"
  >
  <source
    type="image/webp"
    srcset="/images/hero-640.webp 640w, /images/hero-1280.webp 1280w"
    sizes="(max-width: 700px) 100vw, 1200px"
  >
  <img
    src="/images/hero-1280.jpg"
    srcset="/images/hero-640.jpg 640w, /images/hero-1280.jpg 1280w"
    sizes="(max-width: 700px) 100vw, 1200px"
    width="1280"
    height="720"
    alt="A descriptive alternative for the image"
  >
</picture>

The browser selects a supported source from the <picture> sources and then chooses a suitable width candidate based on the available information. Keep the fallback image and dimensions accurate. For a decorative image, use an empty alt value; for meaningful content, write alternative text that serves the same purpose as the image.

4. Server and CDN format negotiation

An image endpoint can inspect the request’s Accept header and return an appropriate format. If one URL can produce different response formats, send Vary: Accept so shared caches distinguish those representations. For example, a CDN should not cache an AVIF response and then serve it to a client that requested a format it cannot decode.

Negotiation adds operational details: test the CDN’s cache key behavior, confirm the response content type matches the bytes, and monitor the number of stored variants. A wide range of widths, formats, and quality settings can multiply cache entries. Keep the variant set purposeful.

For a managed image CDN or image optimization service, compare format negotiation, responsive transformations, cache controls, transformation limits, operational effort, and current service charges with your self-managed pipeline. Check what your existing host or CDN already provides. Managed delivery can simplify transformations, but it is not financially viable for every project.

5. Measure image performance and ROI

Separate the technical effect from the commercial outcome. AVIF can change image bytes; whether that translates into measurable user or business outcomes depends on your site, audience, and other bottlenecks.

Question	Measure
Did delivery get smaller?	Delivered bytes by image, format, dimensions, and quality setting; include cache and network behavior.
Did the page get faster?	Real-page LCP and relevant lab or field performance before and after; compare equivalent page types and traffic conditions where possible.
Did visual quality remain acceptable?	Human review of representative images at their rendered sizes, especially text, line art, edges, and transparency.
Did business outcomes change?	Track conversion, revenue, or another business metric separately, with an experiment or analysis that accounts for other changes.
What did the change cost?	Engineering time, encoding or transformation, CDN/service charges, cache storage, and ongoing maintenance.

A smaller transfer size or improved LCP mechanism does not by itself prove higher conversion or revenue. The reviewed evidence does not establish a general AVIF-driven conversion lift, revenue increase, or payback period. Calculate financial ROI from your own measured outcomes and costs.

6. SEO and URL changes

Google Search supports AVIF in Google Images and other Google Search image surfaces. Google says no special indexing action is required solely because an image is AVIF. If you change image filenames or extensions, Google advises using server-side redirects. Avoid converting an entire site without first evaluating which format works for your needs. See Google Search Central’s AVIF guidance.

Keep image URLs crawlable and preserve useful alternative text and page context. A file-format change is not an automatic ranking improvement; its possible performance benefit depends on the image’s role and the rest of the page.

7. Troubleshooting common problems

Symptom	Likely cause	Fix
Image does not appear in some browsers or clients	No compatible fallback, incorrect source type, or incorrect response content type.	Keep a valid fallback in `<picture>` or negotiate formats based on `Accept`; verify the served bytes and `Content-Type`.
AVIF is downloaded by a client that cannot display it	A shared cache ignored the format negotiation.	For negotiated responses, return `Vary: Accept` and configure the CDN cache key to respect the relevant variation.
Images look soft, noisy, or show halos	Lossy quality is too low for that image, or the content is poorly suited to the chosen encoding.	Raise quality, use a lossless or different format for that asset, or keep text and line art out of aggressive lossy compression.
File sizes barely change or get larger	The source is already efficient, the settings are conservative, or the image content does not compress well in the selected mode.	Compare actual candidates at target dimensions; retain the format with the best acceptable size and appearance.
Page performance does not improve	The converted image is not a bottleneck, the browser selected an oversized candidate, or other page work dominates.	Check the actual resource selected and its transfer size, then inspect LCP attribution and other bottlenecks.
Conversion creates excessive cache storage	Too many combinations of format, width, quality, and URL are being generated.	Reduce the candidate matrix, normalize transformation parameters, and review cache policy and hit behavior.
Image URLs break after migration	Filename or extension changes were not mapped, or references remain hard-coded.	Update references and provide server-side redirects from old URLs when URLs change.

8. Performance, reliability, and cost considerations

Encoding time: Higher compression effort can increase build or request-time CPU. Measure whether your pipeline encodes ahead of time or transforms on demand.
Decode time: A smaller file is not the only cost. Test on representative, constrained devices if image decoding is material to your experience.
Reliability: Preserve source assets and a working fallback. Validate generated files and monitor image request failures during rollout.
Cache behavior: Negotiated formats and responsive variants need correct cache keys and manageable variant counts.
Storage and delivery: Include originals, generated variants, cache storage, bandwidth, and transformation charges in cost comparisons.
Workflow: Automated conversion can simplify broad inventories, but visual review remains necessary for assets where artifacts matter.

Historical browser usage numbers should not be treated as current support data: web.dev reported roughly 1% Chrome AVIF usage after a little over a year in 2023, which is a dated measurement. Check current support for the browsers and clients that matter to your audience, and retain a fallback when needed.

9. Inspect how a page delivers its images

When deciding whether AVIF is worth adopting, first identify which images a page requests and how the page renders. ScreenshotNeo is a website screenshot API and MCP server from ScreenshotNeo. Its page-info tool can help inspect pages, while screenshots can help compare rendered output during a visual review. It does not replace byte measurements, browser performance data, or image-quality checks.

Or skip the browser setup

To capture a page for visual review, make one request. See the ScreenshotNeo API documentation for options.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

Cookie and consent banners, newsletter popups, and chat widgets are removed before the shot; each cleanup step can be turned off.
Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed; response headers identify the page verdict and billing status.
An MCP server provides screenshot, page-info, and PDF tools for Claude, Cursor, and other MCP clients.
The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots.

10. Frequently asked questions

Does AVIF always make images smaller than WebP?

No. Results depend on the image and settings. Compare bytes at acceptable visual quality for your own assets.

Should every image be converted to AVIF?

No. Evaluate representative files and use the format that meets each asset’s quality, compatibility, and delivery needs.

Does AVIF directly improve SEO?

Google Search supports AVIF, but the format alone does not guarantee a ranking improvement. Any speed effect depends on the page and image.

Can I delete the original images after conversion?

Keep source files so you can create new variants, adjust quality, or switch delivery formats without losing image quality.

Should animated GIFs become AVIF?

Not automatically. Published sample results are limited to specific test sets; for large animations, compare video delivery as well as image formats.