Image Optimization

What Is AVIF? The Image Format Explained

AVIF is a modern image format that makes files much smaller than JPEG or PNG at similar quality. Learn how it works, browser support and when to use it.

By Franel II Romanillos, Technical SEO Specialist

#avif #image optimization #page speed

AVIF (AV1 Image File Format) is a modern image format that usually produces much smaller files than JPEG or PNG at a similar visual quality. It is open and royalty-free, it supports transparency, and it works in all current major browsers. The main trade-offs are that it takes longer to encode and older software may not open it, so websites normally serve it with a fallback.

How AVIF works

AVIF stores images compressed with the AV1 video codec inside a standard container called HEIF. In plain terms, it uses the same kind of advanced compression developed for video, applied to still pictures. That is why it can describe a photo with far less data than JPEG.

Its main features:

  • Lossy and lossless compression. You choose between the smallest file and an exact copy.
  • Transparency. Like PNG and WebP, it can have transparent areas.
  • High bit depth and wide color. It supports HDR and wider color ranges than JPEG.
  • Animation. The format allows it, but encoding is slow and WebP or video is usually a better choice for animation.
  • Royalty-free. It does not carry licensing fees.

How much smaller is it?

MDN’s image format guide says lossy AVIF images can be around 50 percent smaller than JPEG at visually similar quality, and cites one comparison where the median saving was about 50 percent for AVIF against about 30 percent for WebP on the same set of JPEG files. Treat that as an illustration, not a promise. Results depend on the image, the quality setting and the encoder. Photos with smooth areas and gradients tend to shrink the most, while small, already well-compressed files, and flat graphics, can sometimes come out the same size or larger.

To see what you would save, convert a few of your own images and compare. The Image to AVIF Converter shows the before and after size for every file.

Browser support

AVIF works in current versions of:

  • Chrome 85 and later
  • Edge 121 and later
  • Firefox 93 and later
  • Opera 71 and later
  • Safari 16.1 and later for still images (support is fuller from Safari 16.4)

Can I use shows roughly 95 percent of users covered. That is high, but not everyone, so MDN’s advice is to provide a fallback in WebP, JPEG or PNG using the <picture> element.

How to serve AVIF with a fallback

<picture>
  <source srcset="/images/photo.avif" type="image/avif">
  <source srcset="/images/photo.webp" type="image/webp">
  <img src="/images/photo.jpg" alt="Describe what the image shows"
       width="1200" height="800" decoding="async">
</picture>

The browser uses the first format it understands. Always set width and height to avoid layout shift, write useful alt text (see What Is Alt Text?), and do not lazy-load the main image at the top of the page, because that is usually your Largest Contentful Paint element.

The downsides

  • Slower to create. Encoding is more demanding than for JPEG, so converting a large photo can take a few seconds.
  • Older support. Older browsers and some apps, email clients and social platforms may not display AVIF. Check before using it for things that leave your website, such as social preview images.
  • No progressive rendering. MDN notes that AVIF does not render progressively the way some JPEGs do.
  • Not always smaller. Flat graphics and tiny files can come out larger, so check each result.

Does AVIF help SEO?

Not directly. Using AVIF is not a ranking factor. The benefit is indirect: smaller images mean less to download, which can improve loading speed and metrics such as Largest Contentful Paint, and a faster page is a better experience. Google Search can index AVIF images, and Google’s image guidance lists AVIF among the supported formats.

When to use AVIF

  • Good fit: photographs and hero images on your own website, product photos, and large images that slow a page down.
  • Use with care: social preview images, images sent by email, or anything opened in older software.
  • Better alternatives: logos and icons are usually best as SVG, and animation is usually best as a short video or animated WebP.

How to create AVIF images

You do not need special software. The Image to AVIF Converter works in your browser: drop in JPG, PNG or WebP files, choose a quality, and download the results one by one or as a ZIP. Your images are not uploaded. For the steps, see How to Convert JPG to AVIF, and to decide between formats read AVIF vs WebP vs JPEG.

Frequently asked questions

What does AVIF stand for?

AV1 Image File Format.

Is AVIF better than JPEG?

For file size at similar quality, usually yes. JPEG is more widely supported and quicker to create, so many sites use AVIF with a JPEG fallback.

Does AVIF support transparency?

Yes. Transparent PNG and WebP images keep their transparent areas when converted.

Can all browsers display AVIF?

All current major browsers can. Older versions cannot, so provide a fallback with the picture element.

Is AVIF lossless?

It can be either. Lossy mode gives the smallest files. Lossless mode keeps every pixel but makes much larger files.

Should I convert all my images to AVIF?

Not necessarily. Start with the largest images that matter for page speed, check that each result is smaller and looks right, and keep a fallback.

Sources

  1. MDN Web Docs: Image file type and format guide
  2. Can I use: AVIF image format
  3. Alliance for Open Media: AV1 Image File Format (AVIF) specification
  4. Google Search Central: Google Images SEO best practices