Going All-In On AVIF (Probably)
This post was written on a computer with a full size 4K monitor. Your screen may not be large enough to see much difference in the image comparisons if you're reading it on a phone.
The images are also locked in at 600 pixels wide to prevent the browser from resizing them (which would mess with the comparisons). Depeding on the size of your screen that may cause horizontal scrolling.
TL;DR
I'm switching from JPEGs to AVIFs for the images on my sites. They provide higher quality compared to JPEGs of the same file size. Check out the "A Better Comparison" section below for an example.
Introduction
I've been posting photos on the web since the 1900s. Deciding on dimensions and settings has always been a precarious dance. An effort to display the best looking image from the smallest file possible.
The JPEG format1 (which powers .jpg files) has long been the leader of the pack when it comes to images2. But, there's a new contender. From what I'm seeing, it looks ready to replace the old timer.
AVIF Enters The Mix
AVIFs are image files3. Similar to JPEGs and PNGs4, but better.
The JPEG image format specification5 came out in 1992. AVIF's spec6 was released in 2019 and updated in 2022. Image science improved a lot over the 30 year interval. The evolution is apparent in AVIFs.
Image Size vs. Quality Trade-Off
Working with images on the web comes down to a trade-off between visual quality and file size. Generally speaking, the better the quality, the larger the file.
For example, here's two versions of the same image7 exported from Photoshop8. The JPEG(7) version is the highest quality output available. It weighs in at 251KB. The JPEG(1) version was generated with the quality slider at its lowest setting. It's 18KB in size.
A few places to notice the quality differences are:
- The face is clearer and has smoother transitions in the high quality version. Especially the area around the neck. It starts looking like little blocks of color instead of a smoother gradient. The details just generally degrade.
- The background on the right side of the image is a smooth gradient in the high quality version. It has a blocky look in the lower quality one.
- Little flecks of color (called "artifacts") show up in different places on the lower quality image. Above the shoulder on the right side of the image and below the arm on the left, for example.
- Details like hair and the shoulder stitching on the right side of the image are much clearer in the high quality version.
File Size And Bandwidth
If file size didn't matter, websites makers would use the highest quality images all the time. But, it does matter. The larger a file becomes, the more data (aka bandwidth) it takes. And, the more data it takes, the longer it takes to download9.
You might not notice the difference on a fast network. A single image may go from taking 1/100th of a second to 1/10th. Even though that's ten times as long, it generally doesn't matter. It's still so fast that it'll feel virtually instant10.
Things change if you're on a slower network11. The difference might be between 1 second and 10. That's also a 10x slow down. But, when you're measuring in full seconds instead of fractions, it becomes way more impactful. It goes beyond the realm of noticeable into frustrating. It's not hard to cross a threshold where folks on slower networks abandon your site.
What's so great about AVIF?
Short answer: Higher quality and/or smaller file sizes.
Here's the same 251KB JPEG from above. This time it's paired with a AVIF version of the image that's only 32KB.
The images are very similar. The only difference I can see is a little smoothing on the face and a few spots of the uniform. It has the same feel as if a mild filter was added to reduce image noise.
A Better Comparison
Of course, we're being unfair in our comparison. The earlier JPEG(1) was 18KB, but we're giving our AVIF 32KB to play with.
Let's use a more comparable JPEG. One where the Photoshop export quality was set to "3". That ends up being a 32KB file, just like our AVIF.
The images are pretty close, but there are still noticeable differences:
-
The JPEG still has artifacts above the shoulder and below the arm. They aren't as pronounced as they were in
JPEG(1), but they're still there. - The background on the right side still has some of the blocky/banding issues. Again, not as pronounced, but not gone.
- The red outline on the top arm patch is significantly muted in the JPEG.
- The detail in the uniform's stitching is generally sharper in the AVIF.
You May Have To Squint
There are two entirely possible things to address at this point:
- You might not see a difference in the images
- The images with the lower quality settings might not bother you
Let's answer them in turn:
Item 1: Can't Spot The Differences?
There's a host of reasons you might not spot differences. Especially in the last comparison. Screen size, screen quality, how bright your environment is, how good your eyes are in general...
Countless things impact what and how we see. Any one could prevent you from seeing differences you otherwise would.
Item 2: Don't Care About The Differences?
Not concerned about the differences in quality? That's totally fair.
There are some objective facts about the images. For example, the artifacts come from the Photoshop export process. Not from something that was in front of the lens. But, ultimately, that doesn't matter. This all comes down to personal preference.
Making The Move
I spent years working as a photographer. Haunting darkrooms. Trying to make the best prints I could. The same desires carried over when I started working on the web. But, I can't adjust the quality in isolation. I have to consider the impact on the people who visit my site.
My preference is to make the highest quality images I can with as little impact on folks who using slower networks and harsh data plans as possible.
AVIFs gives me a better way to do that.
So, that's what I'm going to use21.
Endnotes
-
The latest version of the AVIF spec is v1.1.0. It was finalized in 2022. That's relatively new, but the format has seen a quick adoption thanks to being included in Baseline 202412
According to Can I Use13, AVIF is supported in 94% of browsers as of April 202514. Supporting browsers include Chrome, Edge, Safari, and Firefox. The browsers that don't support it are: IE 11, Opera Mini, QQ Browser, and KaiOS Browser.
-
Comparing image types and settings is a hugely complicated venture. Applying the same settings to two images often ends up with conflicting results. That is, one image can look better with one setup while a second image might look better with the alternative. There's no one-size-fits-all solution.
In that light, it's worth highlighting that this post only uses one image. It's a high quality shot of a person with nice details in the uniform. That makes it a great test. But, the settings that look best for it might look worse for other images (e.g. of a sunset, or a building, or a black and white image, etc...)
I've done other testing that has me satisfied AVIF is the right choice for me. I'll post details of those tests along with a way to do your own comparisons at image-tests.alanwsmith.com as time allows.
-
AVIFs have thier own set of quality controls. They're similar to those in JPEGs. All the AVIF examples on this page used the same settings: a "quality" of 70 and a "speed" of 4. Those are the defaults in the documentation for the software I used to generate the AVIFs15.
I'll be doing more tests with different AVIF settings to fine tune the quality/size trade-off. They'll be the images I post along with tools to do your own comparisons at image-tests.alanwsmith.com .
-
Other image formats were created in the 30 years since JPEGs were introducted. WebP16 is one example. It was developed by Google in 2010 and has grown to 96% browser support according to Can I Use17.
One of AVIFs design goals was to supersede WebP. I'm satisfied it has and is the right choice for me. That said, you may find it worth investigating WebP as well (especailly when it comes to support beyond browsers and the time it takes to generate images).
-
The tools to make AVIFs aren't mature yet. For example, Photoshop doesn't have a built-in way to generate them. It looks like the last thread about it with a note from an Adobe employee is from 2021. They say they are evaluating the format for adoption.
This doesn't concern me for two reasons: First, I built my own app to generate AVIFs18. Second, with all the major browsers gaining the ability to diplay AVIFs as part of Baseline 2024 it's more likely apps like Photoshop will start to adopt them as well.
-
The biggest surprise I encountered with AVIFs is how slow they are to generate. They take significantly longer than JPGs. Like multiple seconds to generate an AVIF that would be virtually instant as a JPEG.
I expect tools will improve and they'll get faster over time. Even if they don't, I'm fine with the trade-off. I generate them in the background and cache them. So, it's not really an issue.
-
AVIFs can be viewed with the built-in Preview app on my mac (which uses macOS 15.4). TBD on viewing support with over operating systems.
Whether they have built-in support or not is irrelevant to me. I'm focused on display in browsers (which have crossed the threshold for me in terms of adoption).
-
I haven't investigated AVIF support for the IPTC19 metadata fields for alt text20. I hope to find they're included.
Worst case, I'll pull the alt text drectly from the sourc files (which will act as the source of truth either way) before generating the AVIFs.
-
I'm approaching the decision to move to AVIF based on providing a better experince to folks that visit my sites.
It's worth pointing out there's a business level benefit as well. Using smaller files reduces outbound network costs. The saving can be substantial for businesses with lots of traffic.
-
There's another feature of AVIFs that I'm super excited about. You can use them to replace animated GIFs. That's right, animated AVIFs. They're way higher quality than GIFs even though they end up with much smaller files sizes.
I'm drafting a post about them that'll be here when it's done: Make Animated AVIFs (Instead of GIFs) With FFmpeg
-
Finally, credit where it's due. The image comparison functionaliy on this page is done with the image-compare web component. I just dropped in the script and copy/pasted the HTML and it works like a champ.
Footnotes
JPEGs are great for photos. Other formats like PNG are useful in other circumstances. And, let's not forget the venerable animated GIF. Both have their place on the web, but I'm focused here on photos and the like.
... and GIF, TIFF, PSD, WebP, the various raw formats used by camera manufacturers, etc...
The test images is of NASA Astronaut Tracy Dyson pointing to the Expedition 71 patch on her flight suit on Wednesday, March 5, 2025 at Elsie Whitlow Stokes Community Freedom Public Charter School in Washington, D.C.
Image credit: NASA/Joel Kowsky
The decades old photo and image edit that's still going strong.
Larger images also take a bigger bite out of data plans. If you have "unlimited data" that might not matter. For folks without that, reducing file size helps them conserve their data.
We humans have three key breakpoints when it comes to perception. Up to 0.1 second feels instant. From 0.1 to 1 second is about how long our flow of thought can stay without drifting. More than 10 second and the odds of completely losing focus (and/or getting frustrated) to way up.
For example, if you're on your phone in an area with poor service.
A collaboration between major browser makers (Chrome, Edge, Firefox, and Safari) to add the same technologies to browsers so they have consistent behaviour.
A site that provides data and information showing which browsers contain various technical features that underlie web page rendering.
The core software I'm using to generate AVIFs for my sites and this page.
Google's 2010 format to aimed at improving over JPEGs.
This is the tool I built to generate AVIF files for my sites. It's very much a personal project where things are hard coded to my computer. You're welcome to use it as a starting point or reference if you're interested in making your own.
The global standards body of the news media. They're responsible for the image metadata specification which includes alt text fields.
Probably... Based on my initial looks, AVIF looks like the way to go. There's still more testing to do though. Hence: image-tests.alanwsmith.com. That'll be where I make the final decision. I'll keep you posted.