AVIF (AV1 Image File Format) is an open and royalty-free specification for storing images or sequences of images that have been compressed using the AV1 codec.
Individuals focused on web performance, search engine optimization, and digital asset management typically read this information alongside guides detailing modern image formats like JPEG and WebP.
External context
For website developers, adopting AVIF is a method to significantly enhance site speed by leveraging a modern codec that provides superior compression and visual quality compared to older standards. Since it is supported across major browsers and platforms, implementing this format can be a key strategy for improving SEO-focused image optimization.
AVIF Wikipedia contributors, “AVIF”, en.wikipedia.orgLicence01What it is and how it works
AVIF uses the AV1 video codec under the hood to compress still images. It applies advanced intra‑frame prediction, chroma subsampling, and adaptive quantization to reduce file size without noticeable loss in detail. The format also supports alpha channels, HDR, and wide‑gamut color, which are rare in older formats like JPEG. Because the compression is lossless or near‑lossless, images retain sharpness and color fidelity even at very low bitrates. The file extension is .avif. Most modern browsers (Chrome, Edge, Firefox, Safari) support it, but older browsers or certain email clients do not.
AVIF is a picture format that shrinks file size while keeping good quality. It works like other image types but is newer and often smaller.
02What to do about it
A marketer can start using AVIF this week with a few concrete steps:
- Convert key images (hero banners, product photos) to AVIF using tools like Squoosh, ImageOptim, or a build‑time script. - Add AVIF sources in a ` element so browsers that support it get the smaller file, while older browsers fall back to WebP or JPEG. - **Update image URLs** in CMS or CDN configurations to serve .avif when the request includes Accept: image/avif. - **Check browser support** with a simple script that tests picture` element rendering and logs any fallback usage. - Monitor Core Web Vitals after the change to confirm improvements in Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS).
03How it is measured or noticed
You can see the impact of AVIF in several places:
- Network requests in Chrome DevTools show .avif files with smaller byte sizes compared to .jpg or .webp. - Page weight drops in the Lighthouse audit, often reducing total bytes by 20‑40% for high‑detail images. - Core Web Vitals improve because the faster image load reduces LCP time. - Image‑format metrics in Google Search Console (under "Enhancements" > "Images") may list AVIF as an approved format, confirming that Google can crawl and index the images. - User‑agent strings reveal which visitors receive the AVIF version; you can track fallback rates in your analytics.
04Common mistakes
- Assuming every visitor’s browser supports AVIF and omitting a fallback.
- Using AVIF for simple icons or text graphics where a few bytes saved are negligible.
- Forgetting to update CDN rules, causing the new format to be served from the wrong path.
- Ignoring metadata (EXIF, IPTC) that may be stripped by the AVIF encoder, losing useful information.
- Relying on a single image size; AVIF still benefits from responsive
srcsetsets.
05Limits
AVIF does not apply in every scenario:
- Older browsers (pre‑2021) and some email clients do not parse the format, requiring a fallback. - CMS or static‑site generators that lack AVIF export options may need custom plugins or command‑line tools. - Image editing software may not support saving to AVIF, limiting batch processing. - Confusion with similar names like AVIF vs. AVIF2 (still in development) can lead to incorrect expectations about features. - SEO tools that crawl images may not yet recognize AVIF as an approved format in all regions, though Google’s documentation confirms support.
06Worked example
<picture>
<source srcset="hero-banner.avif" type="image/avif">
<source srcset="hero-banner.webp" type="image/webp">
<img src="hero-banner.jpg" alt="Hero banner with product lineup">
</picture>
The entry above is written by GetLoopLoop. What follows is what independent catalogues hold about the same term — none of it is the source of this page.
- Also called
- AVIF
- Builds on
- High Efficiency Image File Format, Multi-Image Application Format
- Kind of thing
- raster-graphics file format, open file format, image file format
The same term on Wikipedia
Catalogued in 17 languagesFrequently asked questions
How is AVIF different from WebP or JPEG?
AVIF delivers smaller file sizes at equal or better visual quality than JPEG and WebP, because it uses the AV1 video codec for still-image compression. The trade-off is higher encoding cost and limited support in older browsers. For modern sites, AVIF can reduce image payload significantly, but you still need fallbacks for legacy clients.
Should I convert my images to AVIF now?
It depends on your audience's browser support and your build pipeline. If most visitors use browsers released after 2021, AVIF is safe to serve with WebP or JPEG fallbacks. If you have tight deadlines or no automated tooling, start with hero images and measure the impact before scaling.
How do I actually create AVIF images?
You can convert images to AVIF using tools like Squoosh, ImageOptim, or command-line encoders such as libavif. Many build pipelines and CMS plugins now support AVIF generation automatically. The key is to always provide a fallback format in your <picture> element or <img srcset>.
Does AVIF still work in current browsers?
Yes, AVIF is supported by Chrome, Firefox, Edge, and Safari 16.5+, covering the vast majority of modern web traffic. You can verify support using the <picture> element with type="image/avif" fallbacks. If an unsupported browser encounters an AVIF-only image, it will fail to load.
What breaks if I use AVIF without fallbacks?
Older browsers and some email clients will fail to render images that are only available in AVIF, showing broken image icons or blank space. You will notice this in browser testing or analytics as increased bounce rates on affected pages. Always include JPEG or WebP fallbacks in your markup.
How long before AVIF improves my page speed?
AVIF can reduce image file sizes immediately after deployment, but the visible impact on Core Web Vitals depends on how many images you convert and your users' network conditions. Monitor Network requests in DevTools to confirm smaller byte sizes. Full SEO benefits may take a few weeks to reflect in search performance.
Wikimedia Commons
Related visuals with source and licence credit
Asked out loud
spoken, not typedThe same term in the words somebody uses speaking to an assistant rather than typing into a box — written from the situation, which is why each one carries the situation it came from.
AVIF is your best bet for small file sizes without losing quality, and you can convert images directly in your phone's browser using Squoosh. Just make sure to download both the AVIF and a WebP version so you have a fallback ready.
It's likely that some mobile browsers or your theme's image handling doesn't support AVIF yet, so you need to add JPEG or WebP fallbacks in your image tags. Check your theme's liquid files or use an app that auto-generates multiple formats.
Yes, you can use Squoosh in any modern browser without installing anything, and it supports AVIF export directly. Just drag your image in, choose AVIF from the output format, and download the result.