Firefox added support for AVIF still images a while ago back in version 93, but then took a few years to support more of the AVIF specification to include AVIF sequences, also known as AVIS. Firefox 111 can now show animated AVIF images, after enabling them in the about:config page.
What is AVIF and why do we need it?
AVIF is the future of web based images. It stands for AV1 Image File Format and it uses part of the spec for the new AV1 encoder to compress images smaller than JPEG while retaining the same quality. It also adds HDR support, options for lossless or lossy compression, and animation support like GIFs!
In our test compressing an AVIF image vs a JPEG image, AVIF delivered smaller file size for higher quality.
So now instead of huge GIF files, websites can now share much lower bandwidth AVIF images. In fact, many sites were actually already converting GIF files into videos and just pretended like they were image files by hiding the controls for them. Soon they won’t have to do that anymore!
AVIF vs GIF
Here is a behind the scenes video of a long exposure shot I took light painting the lovely Tessa Grey (kindlyfruitbat). Check out more of the final images here (NSFW artistic nudes).
First, lets see it in its old GIF format.
GIF
This file is 4.4MB, yet it has been reduced from 1080×1080 to 256×256, slowed to 15 fps, and only using 256 colors to save as much space as possible.
Animated AVIF
Here is the full size 1080×1080 60fps weighing in at only 786KB !
If this image doesn’t load, or appears solid black and doesn’t play, your browser does not yet support animated AVIF images.
Note that the white flash is not an error with either loop, but a camera flash that is more visible on the AVIF due to it showing more frames!
Also check out the HDR AVIF test page to see if colors and brightness look right on your browser.
Comparison
I also created an MP4 using x264 to encode it as an AVC video as sites like imgur do. The video was using preset medium and turned out with slightly lower quality VMAF score than the AVIF.
Keep in mind the source material was 21.4 MB so encoding it this small does mean the VMAF scores are actually quite impressive.
| GIF | AVC MP4 | AVIF | |
| Resolution | 256×256 | 1080×1080 | 1080×1080 |
| FPS | 15 | 60 | 60 |
| VMAF | N/A | 87.6567 | 88.2070 |
| File Size | 4.4 MB | 1.91 MB | 786 KB |
Enabling AVIF in FireFox
You will need to make sure you have at least FireFox 111 in the Help > About Firefox page. Then in the URL bar at the top, type in about:config and hit enter.
about:configThis will bring up a warning page, that you will have to read and click “Accept the Risk and Continue”
Then in the search area, type in avif.sequence and just need to toggle image.avif.sequence.enabled to true.
image.avif.sequence.enabled
The other option about major branded images are cases were an AVIF has both a still image and an image sequence available, this forces the sequence to be played even if the default is set to the still image. (Thanks to the /u/Zaggy1024 for this knowledge and the patch for AVIF in Firefox itself!)
What about WebP or JPEG XL?
JPEG XL is a really appealing format, and was even agreed upon by the AV1 community to be the superior next generation web format. That was until Google suddenly yanked JPEG XL support out of Chrome. If chrome doesn’t support an image format, it doesn’t have a chance to succeed on the modern web sadly.
WebP just ended up not being good enough for most websites to change over too. It had a little more compression than JPEG for still images. It could also be animated, but it didn’t add HDR and websites stuck with the higher compatibility trick of converted animated images into H264 videos. Google is still pushing hard for WebP, so it will stick around for a while but doesn’t offer the same features as AVIF.
