Update your 80s-era animated images

GIF, the Graphics Interchange Format, was first released in 1987. Although it can be used for static images, the format gained popularity—and infamy—for its ability to encode a sequence of images and animate them.

GIF was one of the first two graphics formats supported by HTML

The 1990s-era Internet was full of websites packed with GIFs, and that tradition lives on in websites like lingscars.com:

I'm sorry you had to see that.

At 33 years old, GIFs are used on over 20% of websites, and GIPHY, a site for searching and sharing GIFs, was bought by Facebook for $400,000,000. Given that GIFs can be used to show animations and even videos without the overhead of a video player, it's no wonder they're so popular. They're easy to add to a website, easy to save, and easy to share.

Although GIFs are all the rage, the format is showing its age. Newer formats, like WebM, have better compression and smaller file sizes for videos of the same quality. WebM requires a video player, and although it's 10 years old, WebM doesn't work in Internet Explorer, meaning it isn't a drop-in replacement for GIF.

What if we there was a newer animated image format with great compression and small file sizes like with WebM, but with GIF's ease of use?

Enter AVIF.

What is AVIF?

AVIF is the "AV1 Image File" format for storing images using AV1 encoding.

AV1 stands for AOMedia Video 1, and AOMedia is the Alliance for Open Media.

This means that the AVIF's full name is Alliance for Open Media Video 1 Image File Format, or AOMV1IFF for short—but not that short. No wonder they went with "AVIF".

AVIF images are still gaining compatibility among web browsers, but Firefox 77+ and Chrome 85+ support AVIF images. Firefox used to take a little tweaking to work with AVIF, but as of version 92, Firefox may enable AVIF support by default.

Companies such as Netflix are already using AV1 to serve high-quality video, and the results are no joke:

AV1 is able to outperform VP9 and even HEVC by up to 40%.

AVIF brings this state-of-the-art compression to images, allowing them to look as good as a JPEG but at a smaller file size. AVIF also supports image sequences like GIF, bringing the power of AV1 to animations.

While GIF typically uses the .gif extension for both formats, AVIF recommends using the .avif extension for still images and .avifs for image sequences.

Using a .avif extension for an AVIF animation should still work, however. This is similar to the APNG format, an animated PNG, which supports both .png and .apng filename extensions.

As an example of AVIF's small file sizes over GIF, the above GIF of the lingscars.com homepage is 223.6 KB as a GIF, and just 95.7 KB as an AVIF.

So what are you waiting for? Bring your web animations into this milennium.