Back in 2022 I published the article GIFs Without the .gif: The Most Performant Image and Video Options Right Now on CSS Tricks. Certain information in that post is now out of date:

• The AV1 video codec is supported in all browsers.
• Animated AVIF is supported in all browsers (albeit with issues in Safari).
• WebM and the VP9 video codec are supported in all browsers.
• The image-set CSS property is supported in all browsers.
• The media attribute works on HTML <source> elements within a <video> in all browsers.

Image formats

GIF, PNG, WebP, AVIF and JPEG-XL support both still and animated images. The GIF format dates from 1987 and is restricted to a 256 color palette. GIF and PNG are legacy formats and WebP has largely been superseded by AVIF.

AVIF

AVIF (AV1 Image File Format) was created by the Alliance for Open Media (AOM), a group that includes Google, Apple, Microsoft, Netflix, Meta, Zoom, Amazon, Adobe and Intel. AVIF is based on the AV1 video codec.

The AOM website describes the features of the image format:

“AVIF supports both lossless and lossy compression, as well as high dynamic range (HDR), wide color gamut (WCG), transparency, and animation.”

While animated AVIF has been supported in all browsers for several years, the format can suffer from frame rate performance issues in Safari.

WebP

WebP is a significant improvement over GIF or animated PNG. According to Google (the creators of WebP) “Animated GIFs converted to lossy WebPs are 64% smaller, while lossless WebPs are 19% smaller.” Browser support is universal and extends further back than support for animated AVIF.

JPEG-XL

Safari supports JPEG-XL but does not support animated JPEG-XL, so will display the first frame as a still image. Chrome, Edge, and Firefox do not support JPEG-XL, but Firefox is likely to add support later this year.

WebP and AVIF are based on video codecs, so it would be surprising if JPEG-XL, which was built from the ground up as a still-image format, could outperform them.

Under the heading “Advantages of AVIF”, Jon Sneyers, co-creator of JPEG-XL, compared animated JPEG-XL unfavourably to AVIF and video codecs:

“Even though you can create animation in JPEG XL, it offers no advanced video-codec features, such as motion estimation. JPEG XL compresses better than GIF, APNG, and animated WebP but cannot compete with actual video codecs for production of “natural” video. Even for a three-second looping video or cinemagraph, where most of the image is static, actual video codecs like AV1 and HEVC can compress much better than still-image codecs.”

Video

An alternative to animated image formats is the <video> element:

<video autoplay loop muted playsinline src="friends.mp4"></video>

Most browsers allow autoplay if the video has no audio track or includes the muted attribute, but this does depend on user settings.

A HTML <video> can be any size and aspect ratio, and can be displayed without any play/pause/mute buttons, so is more flexible than you might think.

AV1

Created by the Alliance for Open Media (AOM), the AV1 video codec is the best codec for video on the web. AV1 can deliver equivalent quality to H265/HEVC and VP9 at 30% lower bitrates.

Below is an ancient video I converted to AV1. If it’s broken, your browser or device does not support this codec.

AV1 is supported in all browsers, but with some major caveats:

• Safari supports WebM for some video codecs, but not for AV1, so MP4 must be used.
• Safari only plays AV1 video on devices that support hardware-accelerated decoding.

Most current Apple devices support hardware-accelerated decoding for AV1 video (see this article for a full list). By the end of 2025, it’s likely all of them will. There are millions of older Apple devices in circulation that will be in use for quite some time. A fallback video using a more-widely supported codec like H.264 can be provided by making use of multiple <source> elements and the type attribute.

<video controls playsinline>
  <source src="myvideo-av1.mp4" type="video/mp4; codecs=av01.0.08M.08" />
  <source src="myvideo-h264.mp4" type="video/mp4" />
</video>

See this article for information on specifying the codec.

Adobe Media Encoder does not support export of AV1 video. DaVinci Resolve 19 on Windows supports exporting AV1 video. The command line tool FFmpeg or a GUI like Shutter Encoder can be used to convert video to AV1.

VP9

VP9 is supported in all browsers. Unlike AV1, it is not dependent on the users device supporting hardware-accelerated decoding.

Video vs Image formats

Responsive video

When weighing up the two options in my CSS Tricks article, I described what was, at that time, a unique benefit of using images: media queries via the <picture> tag. Media queries for HTML video are now supported in all browsers.

Using multiple <source> elements, a different video file can be specified based on screen size, orientation, light mode/dark mode, or any other media query.

<video autoplay loop muted playsinline>
    <source media="(orientation: landscape)" src="/fish-desktop.mp4">
    <source media="(orientation: portrait)"  src="/fish-mobile.mp4">
</video>

Resize your browser window and reload the page to see the difference.

Media query support for video was implemented in all browsers, then removed from Chrome and Firefox, and then reintroduced in 2023.

Transparency/Alpha

If a video includes transparency, the best solution is far more tenuous.

• AV1 does not support transparency.
• Animated AVIF files that include transparency suffer from performance issues in every browser, and are practically unusable in Safari.
• Safari supports the HEVC video codec with transparency, but Chrome does not.
• Chrome supports the VP9 video codec with transparency, but Safari does not.

Jake Archibald has written an in-depth article about this topic.

Animated WebP seems to avoid performance issues in Safari, so is worth considering.

Looping video beyond “gifs”

Giphy, a gif search engine once valued at hundreds of millions of dollars, has blamed its declining business on young people who view gifs as uncool:

“They have fallen out of fashion as a content form, with younger users in particular describing gifs as ‘for boomers’ and ‘cringe’.”

While the term “gif” is often associated with pixelated graphics, 90’s pop-culture references and horrifically dated art-styles, the use-cases for looping silent video are broader than chat reactions. I worked on a web app that imported an entire JavaScript library to animate a loading spinner. While a lot can be achieved with SVG, CSS and JavaScript animations, with modern codecs offering increasingly tiny file sizes, its possible were under-utilising modern “gifs” in UI design.

Conclusion

While AVIF should be an obvious choice, frame rate performance issues and browser bugs currently make it difficult to fully recommend. AV1 sadly requires the extra effort of exporting the video in two different formats so that a fallback can be provided for older Apple devices.