AVIF, a next-gen image format for the web, will have to wait in line behind WebP

WebP is on the verge of replacing JPEG and PNG as the best image to use on the web thanks to Safari 14 finally supporting it. However, an even better image format, AVIF, is already looking to replace it.

AV1

Ten years ago, Google unveiled an open-source image format called WebP. The new format can significantly reduce the file sizes of images without loss of visual clarity, and it fully supports transparency. WebP is the perfect successor to JPEG and PNG image formats.

Ten years later, very few web developers use it. That’s because while every other browser added support for WebP, Apple stubbornly refused to add WebP support to WebKit (Safari). That is, until now.

Apple revealed in its Safari 14 Beta Release Notes that it was finally adding WebP support. That means when iOS and iPadOS 14, and macOS 11 are released in Fall 2020, all major browsers on mobile and desktop will support WebP.

WebP Browser Support
WebP Browser Support

It may still take at least another year or two before webmasters can start using WebP images exclusively. It will mainly depend on the percentage of WebP compatible browsers that visit the site. Alternatively, sites can use a technique that works for all modern browsers today if they want to switch over to using WebP now.

The first option, which is the simplest, is to use Cloudflare’s Polish image optimization tool. Cloudflare will automatically convert JPEG and PNG to WebP, and serve them to browsers that support it. However, suppose you prefer to have complete control over the images the site serves. You can use the picture element and srcset attribute to deliver multiple image formats based on browser compatibility.

<picture>
    <source srcset="image.webp" type="image/webp">
    <img src="image.jpg" alt="description">
</picture>

AVIF is superior to WebP

Innovation continues to outpace browser standards. As the decade-old WebP image format is poised to become a standard, finally, there’s a new image format, AVIF, that provides even better performance.

Daniel Aleksandersen, developer and editor of Ctrl Blog, tested AVIF against WebP and JPEG images. He concluded that “AVIF outperformed both JPEG and WebP for every image in the test.”

WebP versus AVIF image format
AVIF had a better compression rate than WebP

Like WebP, the AVIF format likely has several years before it will see adoption by all major browsers. It’s currently only supported by Chrome.

AVIF Browser Support
AVIF Browser Support

Unlike WebP, the AVIF format has the interest of major companies like Netflix and Facebook, which may put pressure on Apple to support it in Safari sooner than later. Apple may also give it serious consideration because AVIF has HDR color support.

In February 2020, Netflix expounded on why they want AVIF to become an image format standard on the web. They provided numerous visual examples that showed how AVIF was a preferred image format compared to JPEG.

Netflix Original Image
Original image
Netflix JPEG Example
Image converted to JPEG with a file size of 13,939 bytes
Netflix AVIF Example
Image converted to AVIF with a file size of 4,176 bytes

Hopefully AVIF won’t take ten years to get adopted by all major browsers like it did for WebP. Regardless, webmasters can use the AVIF image format now by using the same srcset attribute used in the previous example for WebP.

<picture>
    <source srcset="image.avif" type="image/avif">
    <source srcset="image.webp" type="image/webp">
    <img src="image.jpg" alt="description">
</picture>

Related News

Never miss an important story

Weekly news updates, no spam, and you can unsubscribe anytime.

  • This field is for validation purposes and should be left unchanged.

Jon is the founder and Managing Editor of Coywolf. He has over 25 years of experience in web development, SaaS, internet strategy, digital marketing, and entrepreneurship. Follow @henshaw