AVIF Image Format: Benefits, Browser Support, and How to Use It

AVIF is an image format that stores AV1-coded image data in a HEIF container. It can deliver photographic images at smaller file sizes for comparable visual quality, and it also supports transparency, animation, HDR, and wide color gamut. Results depend on the source, encoder, settings, and decoder. For a website that needs broad compatibility, serve AVIF with a WebP, JPEG, or PNG fallback using <picture>.

1. What is AVIF?

AVIF means AV1 Image File Format. It uses image data encoded with AV1 video compression technology and stores it in a HEIF file. AOMedia maintains the format specification; version 1.2.0 describes AV1 data in a HEIF container and defines profiles intended to improve interoperability, including with hardware implementations. AOMedia’s AVIF overview and the AVIF v1.2.0 specification describe the format.

On the web, AVIF files normally use the .avif extension and image/avif MIME type. AVIF supports lossy and lossless compression. Depending on how a file is encoded, it can also contain alpha transparency, HDR and wide-color imagery, monochrome or multichannel image data, auxiliary data such as depth maps, and multiple images or image sequences. A format capability does not guarantee that every encoder, browser, or device supports every feature.

2. AVIF benefits and tradeoffs

Why use AVIF?

• Potentially smaller downloads: AVIF can encode an image at a smaller size than JPEG or WebP at a comparable visual quality target. Mozilla Developer Network gives around 50% smaller than JPEG as an example for lossy AVIF, but that is not a promise for every image or workflow.
• More image types: Transparency, animation or multi-image content, HDR, and wide color gamut are among the capabilities defined for AVIF.
• Flexible compression: The format supports lossy and lossless coding, so it can serve different image requirements.

What to weigh before adopting it

• File size is image-dependent: A photograph, illustration, screenshot, and already-optimized source may produce different results. Compare the actual output files.
• Browser support varies by version and feature: Support for still images does not imply support for animated AVIF or every advanced color feature.
• Encoding and decoding have costs: The available references do not establish a current, directly comparable device benchmark. Measure your own image pipeline and target devices instead of assuming AVIF is always faster overall.
• Progressive display needs care: MDN says typical AVIF use does not support progressive rendering and the full file must be downloaded before display. The AVIF specification separately defines layered images and progressive decoding; the reviewed sources do not establish broad browser support for that workflow. Do not assume JPEG-style progressive display from an AVIF file.

3. Which browsers support AVIF?

MDN’s compatibility summary lists these support starting points for AVIF images:

Browser	Listed starting version	Notes
Chrome	85	Check target platform and embedded browser versions.
Edge	121	Support depends on the browser version in use.
Opera	71	Check the actual user base.
Firefox	93 for still images	Animated AVIF support starts at Firefox 113.
Safari	16.1	Check the OS and Safari version used by visitors.

These are minimum versions reported in MDN’s documentation, not a guarantee that all AVIF features behave identically across operating systems, browser builds, and devices. Consult MDN’s image format guide for compatibility details and recheck it when exact release coverage matters. Test the formats and features your page actually uses on the browsers and devices important to your audience.

4. How do I use AVIF images on my website?

Use a <picture> element with AVIF first, then optional WebP and a broadly compatible image fallback. The browser selects a source format it can use. The following is a complete HTML fragment; place the files at the listed paths and adjust the alternative text to describe the image.

<picture>
  <source srcset="/images/hero.avif" type="image/avif">
  <source srcset="/images/hero.webp" type="image/webp">
  <img src="/images/hero.jpg" alt="Describe the image">
</picture>

For responsive image sizes, give each source its own srcset and sizes values, and provide a matching fallback image:

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

Set dimensions appropriate to the displayed image to reserve layout space. Use lazy loading for images that start outside the initial viewport; do not apply it indiscriminately to an image that needs to appear immediately. Ensure your server or CDN sends Content-Type: image/avif for AVIF files and serves each fallback path with the correct type.

Content negotiation as an alternative

An image service or CDN can select and deliver an available format based on the request and its own configuration. If using HTTP content negotiation, follow the service’s documentation for accepted formats, caching, and response headers. Cache keys must distinguish requests that receive different formats; otherwise a cached response can be reused incorrectly. The dossier does not establish the behavior of any specific service.

5. Do I need an AVIF fallback?

For a site serving a broad audience, provide a fallback. The <picture> pattern lets a browser use AVIF when available and fall through to WebP or JPEG/PNG otherwise. It also keeps a usable image in the markup if an AVIF feature is unsupported or a delivery path is misconfigured. Choose the fallback based on the browsers and devices your site supports, and verify it actually loads.

Do not remove the fallback solely because current desktop browsers support still AVIF. Older browser versions, embedded webviews, and support for specific features can differ. If your site has a narrow, known client environment, you can make a deliberate compatibility decision based on tested requirements.

6. How much smaller are AVIF files?

There is no universal percentage. MDN gives “around 50% smaller than JPEG” as an example for lossy AVIF at visually similar compression levels, but that does not predict the result for a particular asset. Image content, source quality, encoder implementation, settings, and the visual quality target all affect the output. Nominal quality settings across encoders are not directly comparable.

To choose for a real site, encode representative originals to AVIF and your current delivery format, then compare file bytes and visual quality at the rendered dimensions. Include photographs, graphics, transparency, and any HDR or animation assets that matter. Inspect the results at normal display size and on the devices you support; do not optimize only for a numeric encoder setting.

7. A practical rollout checklist

1. Inventory image types, sizes, transparency, animation, and color requirements.
2. Encode a representative sample in AVIF and the fallback format using the production pipeline.
3. Compare bytes at similar perceived quality and inspect visual artifacts, color, and transparency.
4. Publish AVIF with a correct image/avif content type and a working fallback through <picture> or a correctly configured image service.
5. Check responsive source selection, dimensions, lazy-loading behavior, and cache behavior.
6. Test still images and any animation, HDR, wide-color, or other advanced features on the actual browser and device versions you support.
7. Monitor image delivery and errors after rollout; keep the fallback available while it remains part of your compatibility requirements.

8. Performance, reliability, and cost

Smaller image files can reduce transferred bytes, which may help bandwidth use, but the real result depends on the images and delivery path. Account for conversion work, storage of multiple variants, CDN or image-service costs, and decoder behavior on target devices. The reviewed sources do not provide a current universal encoding or decoding benchmark, so measure your own pipeline rather than assuming a fixed CPU or page-speed outcome.

For reliable delivery, retain an accessible fallback and verify the content type, cache key, responsive variants, and actual selected image in supported browsers. If an image service converts on demand, understand when it generates variants and how those variants are cached. Do not let a format negotiation cache mix AVIF and fallback responses.

9. Troubleshooting AVIF delivery

Symptom	Likely cause	Fix
Image is missing in an older browser or webview	The client does not support AVIF, or support differs in its environment.	Add a WebP, JPEG, or PNG fallback with <picture>; test the affected client.
AVIF URL downloads or displays as an unknown file	The server sends an incorrect or missing MIME type.	Configure the response as image/avif and check the response headers.
Animated AVIF is static or fails	Still-image support is present but animation support may not be; Firefox animation support starts later than still support.	Test animation support separately and provide an appropriate fallback for clients that need it.
AVIF is larger than the existing image	The source image, quality target, encoder, or settings do not favor AVIF for this asset.	Compare at similar visual quality and use the format that gives the best result for that image.
Colors or HDR appearance differ	Color mode, metadata, display, or decoder behavior may differ.	Validate the encoded color data and test on the target browser and display; provide a suitable fallback if necessary.
Fallback is never selected or wrong image appears	Markup order, source type, path, responsive attributes, or cache behavior may be wrong.	Check each URL directly, confirm MIME types, inspect the browser’s selected source, and ensure negotiated formats have distinct cache handling.
Image causes layout movement	The rendered dimensions were not reserved.	Set appropriate width/height or an aspect ratio on the image container.

10. Or skip the browser setup

If you need a screenshot of a page while documenting or validating image delivery, ScreenshotNeo provides a website screenshot API and MCP server. A single GET request returns a PNG, JPEG, WebP, or PDF. See the ScreenshotNeo API documentation for parameters and configuration.

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,
)
r.raise_for_status()
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}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
const fs = await import('node:fs/promises');
await fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer()));

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

ScreenshotNeo is at screenshotneo.com. Sign up for 1,000 free screenshots a month, no card required.

11. Frequently asked questions

Can I use AVIF for a logo?

You can use AVIF where its visual features and client support suit the asset, but keep a fallback for clients that need one. For simple logos, compare the result and requirements with other formats before choosing.

Does AVIF replace WebP and JPEG?

Not in every delivery setup. AVIF is another option; a site may serve it alongside WebP or JPEG/PNG fallbacks to meet compatibility and asset-specific needs.

Is AVIF always lossless?

No. AVIF supports both lossy and lossless compression. The file’s encoding determines which is used.

Can AVIF contain transparency?

Yes, the format supports alpha transparency. Confirm that your encoder and target decoders handle the transparency workflow you need.