Switching my website images from WebP to AVIF

The images on my website have changed formats several times over the decades. JPEG, PNG, and GIF were designed in a very different era of computing, and their compression methods reflect the technology available at the time. Formats such as AVIF, HEIC, and WebP use newer techniques which can preserve more apparent detail while storing less information.

For years, I used WebP for most raster images on my website. WebP files are considerably smaller than equivalent JPEGs and PNGs, so switching to them was an obvious way to speed up pages and reduce bandwidth.

But image formats have continued to improve, and AVIF can often produce even smaller files without noticeably reducing image quality. As my website contains thousands of images—and automated clients seem determined to download as many of them as possible—even modest savings can add up. So, I’m replacing most of my WebP images with AVIF.

What is AVIF?

AVIF stands for AV1 Image File Format. It uses technology developed for the AV1 video codec to compress still images efficiently.

Like WebP, AVIF supports lossy and lossless compression, transparency, animation, embedded colour profiles, and metadata. It also supports higher colour depths, wide colour gamuts, and high-dynamic-range images.

Its most useful feature for my website is simpler: AVIF can generally store an image using fewer bytes than WebP while maintaining similar visual quality. That means less data to transfer, faster pages, and lower bandwidth use.

What about HEIC?

HEIC stands for High Efficiency Image Container or, depending on who is describing it, High Efficiency Image Coding. It’s the format most people encounter when taking photographs on an iPhone or iPad.

Strictly speaking, HEIF—High Efficiency Image File Format—is the container format. HEIC is a type of HEIF file which normally contains an image compressed using HEVC, also known as H.265.

A HEIF container can store more than one image, along with thumbnails, edits, metadata, depth information, and other related data. That makes HEIC useful for storing and editing photographs inside device and software ecosystems, but it was not designed to become a universal image format for websites.

Why AVIF instead of HEIC?

AVIF and HEIC both use the HEIF container structure, but they normally compress their image data using different codecs. HEIC generally uses HEVC, whereas AVIF uses AV1. For websites, AVIF has several important advantages.

AVIF was developed as an open, royalty-free format. HEVC has more complicated patent and licensing issues, which have discouraged some browser makers and software developers from supporting HEIC universally.

AVIF has also been adopted specifically as a web-delivery format, so browser makers, image-processing tools, and hosting platforms increasingly support it directly.

At comparable visual quality, AVIF can often produce files smaller than WebP and competitive with—or smaller than—HEIC. So, while HEIC makes sense as the format my phone uses to store photographs, AVIF makes more sense as the format my website uses to deliver them.

What difference did switching to AVIF make?

The theoretical advantages of a format are one thing, but the results from my own website were more convincing. The first batch I converted came from my site’s general images folder. The WebP files totalled 6.58MB, whereas their AVIF replacements came to just 2.30MB. That reduced their combined size by 4.28MB—or 65.1%. That’s a substantial saving from changing the image format alone.

The ten biggest individual reductions were:

The most dramatic reductions came from relatively simple product graphics. Several shrank by more than 90%, and three T-shirt images were reduced from around 118KB each to little more than 5KB.

The more detailed animation artwork produced smaller—but still worthwhile—reductions of just over 50%. That variation is important. AVIF will not shrink every image by the same amount, and the result depends on the artwork, its dimensions, and the encoding settings. Still, reducing this first batch by almost two-thirds made the switch difficult to argue against.

How I made the switch

Converting the files was the easy part. I used CloudConvert to convert the WebP images to AVIF, checking the results before replacing the originals.

The more tedious job was finding every place those WebP files were being used. Manually tracking down every reference would have been slow and error-prone. So I used Codex to search the project for WebP filenames and references, identify the images still in use, and update those references to point to the new AVIF files.

That combination worked well. CloudConvert handled the image conversion, while Codex handled the project-wide search-and-replace work. I still checked the changes before accepting them, but it removed most of the repetitive work and made a site-wide format change far less painful than it would otherwise have been.

There was no complicated image pipeline. I just converted the files, updated their references, checked the pages, and measured the difference.