GIFs With out the .gif: The Most Performant Picture and Video Choices Proper Now | CSS-Tips

If you wish to use newer video codecs with fallbacks for older browsers, you should utilize a number of <supply> components. The order of the supply components matter. Specify the perfect supply on the high, and the fallback after.

<video autoplay loop muted playsinline>
  <supply src="https://css-tricks.com/gifs-without-the-gif-the-most-performant-image-and-video-options-right-now/cats.webm" sort="video/webm"> <!-- preferrred -->
  <supply src="https://css-tricks.com/gifs-without-the-gif-the-most-performant-image-and-video-options-right-now/cats.mp4" sort="video/mp4"> <!-- fallhack -->
</video>

Given the above code, cats.webm shall be used until the browser doesn’t assist that format, wherein case the MP4 shall be displayed as a substitute.

What if you wish to embody a number of MP4 recordsdata, however with every utilizing a unique codec? When specifying the sort you possibly can embody a codecs parameter. The syntax is horrifically difficult for anyone who isn’t some form of hardcore codec nerd, however it appears one thing like this:

<video autoplay loop muted playsinline>
  <supply src="https://css-tricks.com/gifs-without-the-gif-the-most-performant-image-and-video-options-right-now/cats.mp4" sort="video/mp4; codecs=av01.0.05M.08" >
  <supply src="https://css-tricks.com/gifs-without-the-gif-the-most-performant-image-and-video-options-right-now/cats.mp4" sort="video/mp4" >
</video>

Utilizing the above code the browser will choose AV1 if it will probably play that format and fallback to the universally-supported H.264 if not. For AV1, the codecs parameter all the time begins with av01. The subsequent quantity is both 0 (for fundamental profile), 1 (for prime profile) or 2 (for skilled profile). Subsequent comes a two-digit stage quantity. That is adopted both by the letter M (for fundamental tier) or H (for prime tier). It’s obscure what any these issues imply, so you may present your AV1 video in a WebM container and keep away from specifying the codec solely.

Most video modifying software program doesn’t help you export as AV1, and even as WebM. If you wish to use a type of codecs you’ll have to export your video as one thing else, like a .mov, after which convert it utilizing the command-line software FFmpeg:

ffmpeg -i yourSourceFile.mov -map_metadata -1 -c:a libopus -c:v librav1e -qp 80 -tile-columns 2 -tile-rows 2 -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" videoTitle.mp4

It’s best to use essentially the most high-resolution supply file you possibly can. Clearly, as soon as picture high quality is misplaced you possibly can’t enhance it by conversion to a superior format. Utilizing a .gif as a supply file isn’t preferrred as a result of the visible high quality of .gif isn’t nice, however you’ll nonetheless get the good thing about a big discount in file measurement:

ffmpeg -i cats.gif -map_metadata -1 -an opus -c:v librav1e -qp 80 -tile-columns 2 -tile-rows 2 -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" cats.mp4

On Mac, you possibly can obtain FFmpeg utilizing Homebrew:

brew set up ffmpeg

Right here’s a pleasant instance of video in internet design on the masterfully designed Oxide web site:

If you wish to use the video as a background and place different components on high of it, working with <video> is barely more difficult than a CSS background-image, and requires code that goes one thing like this:

.video-parent {
  place: relative;
  width: 100vw;
  peak: 100vh;
} 

.video-parent video {
  object-fit: cowl;
  place: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  peak: 100%;
}

The <video> aspect is a superbly okay possibility for changing GIFs however it does have one unlucky side-effect: it prevents a person’s display screen from going to sleep, as defined in this submit from an ex- product supervisor on the Microsoft Edge browser.

The advantages of utilizing a picture

Whether or not it’s an animated WebP or animated AVIF file, utilizing photographs slightly than video comes with some advantages.

I’m undecided how many individuals really wish to art-direct their GIFs, however utilizing the <image> aspect does open up some potentialities that couldn’t simply be achieved with <video>. You might specify totally different animations for gentle and darkish mode, for instance:

<image>
  <supply srcset="https://css-tricks.com/dark-animation.avifs" media="(prefers-color-scheme: darkish)">
  <img src="https://css-tricks.com/gifs-without-the-gif-the-most-performant-image-and-video-options-right-now/light-animation.avif" alt="">
</image>

We’d desire a video on cell to be a unique side ratio than on desktop. We may simply crop elements of the picture with CSS, however that looks like a waste of bytes and considerably haphazard. Utilizing a media question we will show a unique animated picture file primarily based on the display screen measurement or orientation:

<image>
  <supply sort="picture/avif" srcset="https://css-tricks.com/typeloop-landscape.avifs" media="(orientation: panorama)"">
  <img src="https://css-tricks.com/gifs-without-the-gif-the-most-performant-image-and-video-options-right-now/typeloop-portrait.avif" alt="">
</image>

All of that is doable with video — you should utilize matchMedia to do any media queries in JavaScript and programmatically change the src of a <video> aspect:

const mediaQuery = window.matchMedia("(prefers-color-scheme: darkish)");
if (mediaQuery.matches) {
  doc.querySelector("video").src = "https://css-tricks.com/gifs-without-the-gif-the-most-performant-image-and-video-options-right-now/dark-animation.mp4";
}

I imagine that at any time when there’s a option to do one thing with markup it needs to be most well-liked over doing it JavaScript.

You should use raster photographs within an SVG utilizing the <picture> aspect. This contains animated picture codecs. There’s not a lot you are able to do with a picture inside an SVG that you just couldn’t already do with CSS, however when you group a picture with vector components inside an SVG, you then do get the profit that the totally different components transfer and scale collectively.

The <img> aspect has the good thing about native lazy-loading:

<img loading="lazy" src="https://css-tricks.com/gifs-without-the-gif-the-most-performant-image-and-video-options-right-now/cats.avif" alt="cats">

In order for you a background video that takes up the complete display screen, it’s barely simpler to place a background-image than a HTML <video> aspect:

.background-video {
  background-image: url("coolbackground.webp");
  background-repeat: no-repeat;
  background-size: cowl;
  peak: 100vh;
  width: 100vh;
} 

If you wish to assist older browsers you may use the <image> aspect with a fallback of both an animated WebP or, only for Safari, an img with a video src, or when you care about historical browsers, possibly an APNG (animated PNG) or a GIF. Utilizing a number of picture codecs this fashion could be impractical when you’re optimizing photographs manually; however it’s comparatively trivial when you’re utilizing a service like Cloudinary.

<image>
  <supply sort="picture/avif" srcset="https://css-tricks.com/gifs-without-the-gif-the-most-performant-image-and-video-options-right-now/cats.avif">
  <img src="https://css-tricks.com/gifs-without-the-gif-the-most-performant-image-and-video-options-right-now/cats.webp">
</image>

There’s nonetheless no well-supported option to specify fallback photographs for CSS backgrounds. image-set is an equal of the <image> aspect, [but for background-image. Unfortunately, only Firefox currently supports the type attribute of image-set.

.box {
  background-image: image-set(
    url("https://css-tricks.com/gifs-without-the-gif-the-most-performant-image-and-video-options-right-now/cats.avif") type("image/avif"),
    url("https://css-tricks.com/gifs-without-the-gif-the-most-performant-image-and-video-options-right-now/cats.webp") type("image/webp"));
}

Use animated WebP

The WebP image format was introduced by Google in 2010. WebP, including animated WebP, has broad browser support.

<img src="https://css-tricks.com/gifs-without-the-gif-the-most-performant-image-and-video-options-right-now/nyancat.webp" alt="A cat flying through space leaving a rainbow trail">

Use animated AVIF

WebP is now twelve years old. The more modern AV1 Image File Format (AVIF), released in 2019, is the best image format for most use cases on the web. Converting a .gif file to AVIF can reduce bytes by over 90%.

<img src="https://css-tricks.com/gifs-without-the-gif-the-most-performant-image-and-video-options-right-now/nyancat.avif" alt="A cat flying through space leaving a rainbow trail">

As its name suggests, AVIF is based on the the AV1 video codec. Like WebP, AVIF can be used for both still images and animation. There’s not much difference between an animated AVIF file and an AV1 video in an MP4 container.

You can put a shadow on AVIF animation, e.g.:

filter: drop-shadow(2px 4px 6px black);

AVIF is already supported by Safari, Firefox, Samsung Internet, and Chrome. Firefox only shipped support for still images, not animated AVIF. Safari supports animation as of version 16.1. Unfortunately, because Firefox does support AVIF, just not animated AVIF, it’s impossible to successfully use the <picture> element to display AVIF only to browsers that support animation. Given the following code, Firefox would display the AVIF, but as a static image, rather than showing the animated WebP version:

<picture>
  <source srcset="https://fonts.gstatic.com/s/e/notoemoji/latest/1f4a9/512.avif" type="image/avif">
  <img src="https://fonts.gstatic.com/s/e/notoemoji/latest/1f4a9/512.webp" alt="💩" width="32" height="32">
</picture>

Tooling for AVIF is still improving. Video editing software does not enable you to export footage as animated AVIF or animated WebP. You’ll need to export it in some other format and then convert it. On the website ezgif.com you can upload a video file or a .gif and convert it to AVIF or WebP. You could also use FFmpeg. Using Cloudinary you can upload a video file or an old .gif and convert it to pretty much any format you want — including animated WebP and animated AVIF. As of time of writing, Squoosh, an image conversion app, doesn’t support animated AVIF.

Adoption remains lacking in design software. When viewing a prototype, Figma will play any animated GIFs included in the design. For AVIF, by contrast, you can’t even import or export a still image.

Use a video with an <img> element

In 2018, Safari 11.1 gave developers the ability to use a video file as the source of the HTML <img> element. This works in Safari:

<img src="https://css-tricks.com/gifs-without-the-gif-the-most-performant-image-and-video-options-right-now/cat.mp4" alt="A Siamese cat walking in a circle">

All the same codecs that Safari supports for <video> are supported by <img>. This means you can use MP4, H.264, and HEVC.

In Safari, video files will also work anyplace in CSS where you could use an image, like background-image or border-image:

.video-border {  
  border: 40px solid transparent;
  border-image: url(abstract_bg_animation.mp4) 100 round;
}

One strange consequence of this feature in Safari is that the poster image of a <video> element can also be a video. The poster will autoplay even if you have blocked video’s from auto-playing. Safari claimed this feature came with performance benefits, not just over using .gif files but also over using the <video> element. According to Apple:

By placing your videos in <img> elements, the content loads faster, uses less battery power, and gets better performance.

Colin Bendell, co-author of O‘Reilly’s High Performance Images, wrote about the shortcomings of the <video> tag for our use case:

Unlike <img> tags, browsers do not preload <video> content. Generally preloaders only preload JavaScript, CSS, and image resources because they are critical for the page layout. Since <video> content can be any length – from micro-form to long-form – <video> tags are skipped until the main thread is ready to parse its content. This delays the loading of <video> content by many hundreds of milliseconds.

[…]

Worse but, many browsers assume that <video> tags include long-form content material. As a substitute of downloading the entire video file without delay, which might waste your cell information plan in circumstances the place you don’t find yourself watching the entire video, the browser will first carry out a 1-byte request to check if the server helps HTTP Vary Requests. Then it would comply with with a number of vary requests in varied chunk sizes to make sure that the video is sufficiently (however not over-) buffered. The consequence is a number of TCP spherical journeys earlier than the browser may even begin to decode the content material and vital delays earlier than the person sees something. On high-latency mobile connections, these spherical journeys can set video masses again by a whole bunch or hundreds of milliseconds.

Chrome has marked this as “WontFix” — that means they don’t intend to ever assist this function, for varied causes. There may be, nonetheless, an open challenge on GitHub so as to add it to the HTML spec, which might power Google’s hand.

Respecting person preferences

Video has the good thing about mechanically respecting a customers preferences. Firefox and Safari enable customers to block movies from mechanically taking part in, even when they don’t have any audio. Listed below are the settings in Firefox, for instance:

The person can nonetheless resolve to observe a sure video by right-clicking and urgent play within the menu, or allow autoplay for all movies on a selected web site.

For customers who haven’t disabled autoplay, it’s good to have the choice to pause an animation when you occur to search out it annoying or distracting (a person can nonetheless right-click to carry up the pause possibility in a menu when video controls aren’t proven). Success Criterion 2.2.2 Pause, Cease, Conceal of the WCAG accessibility tips states:

For any shifting, blinking or scrolling data that (1) begins mechanically, (2) lasts greater than 5 seconds, and (3) is offered in parallel with different content material, there’s a mechanism for the person to pause, cease, or conceal it until the motion, blinking, or scrolling is a part of an exercise the place it’s important.

With the <video> aspect, you’ll obtain that criterion with none further improvement.

There’s additionally a “cut back movement” person setting that builders can respect by decreasing or eradicating CSS and JavaScript internet animations.

You may also use it to show a nonetheless picture as a substitute of an animation. This takes additional code to implement — and it’s good to host a nonetheless picture in further to your animated picture.

<image>
  <supply
    srcset="https://css-tricks.com/nyancat.avifs"
    sort="picture/avif"
    media="(prefers-reduced-motion: no-preference)"
  />
  <img src="https://css-tricks.com/gifs-without-the-gif-the-most-performant-image-and-video-options-right-now/nyancat.png" alt="Nyan cat" width="250" peak="250" />
</image>

There’s one other draw back. When utilizing the <image> aspect on this approach if the person has checked “cut back movement”there’s no approach for them to see the animation. Simply because a person prefers much less animation, doesn’t imply they by no means need any — they may nonetheless need to have the ability to opt-in and watch one now and again. Not like the <video> aspect, displaying a nonetheless picture takes away that selection.

Checking for progressive enhancement

If you wish to examine that your <image> code is correctly working and fallback photographs are being displayed, you should utilize the Rendering tab in Chrome DevTools to show off assist for AVIF and WebP picture codecs. Seeing as all browsers now assist WebP, it is a fairly useful function.

Whereas it’s normally the best choice to create animations with CSS, JavaScript, DOM components, canvas and SVG, as new picture and video codecs supply smaller recordsdata than what was beforehand doable, they turn into a helpful possibility for UI animation (slightly than simply nyancat loops). For one-off animations, an AVIF file might be going to be extra performant than importing a whole animation library.

Lottie

After Results is a well-liked animation software from Adobe. Utilizing an extension known as Bodymovin, you possibly can export animation information from After Results as a JSON file.

Then there’s Lottie, an open-source animation library from Airbnb that may take that JSON file and render it as an animation on totally different platforms. The library is accessible for native iOS, Android, and React Native purposes, in addition to for the net. You may see examples from Google Dwelling, Goal, and Walgreens, amongst others.

When you’ve included the dependency it’s good to write a small quantity of JavaScript code to get the animation to run:

<div id="lottie"></div>

const animation = bodymovin.loadAnimation({
  container: doc.getElementById('lottie'),
  path: 'myAnimation.json',
  renderer: 'svg',
  loop: true,
  autoplay: true,
})

You may optionally change these settings to solely play after an occasion:

const lottieContainer = doc.getElementById('lottie');
const animation = bodymovin.loadAnimation({
  container: lottieContainer, 
  path: 'myAnimation.json',
  renderer: 'svg',
  loop: true,
  autoplay: false,
  })
// Play the animation on hover
lottieContainer.addEventListener('mouseover', () => {
  animation.play();
});
// Cease the animation after taking part in as soon as
animation.addEventListener('loopComplete', perform() {
  animation.cease();
});

Right here’s a cute instance of a cat typing on a keyboard I took from Lottiefiles.com (the web site is a helpful web site for previewing your individual Lottie JSON file animations, slightly than needing to put in After Results, as effectively discovering animations from different creatives):

You may also programmatically play an animation backwards and alter the playback charge.

In case you do select to make use of Lottie, there’s a Figma plugin for Lottie however all it does is convert JSON recordsdata to .gif in order that they are often previewed in prototyping mode.

Abd what about Lottie’s efficiency? There’s measurement of the library — 254.6KB (63.8 gzipped) — and the dimensions of the JSON file to contemplate. There’s additionally the quantity of DOM components that get created for the SVG elements. In case you run into this challenge, Lottie has the choice to render to a HTML <canvas>, however you’ll want to make use of a unique model of the JavaScript library.

const animation = bodymovin.loadAnimation({
  container: doc.getElementById('lottie'), 
  path: 'myAnimation.json',
  renderer: 'canvas',
})

Lottie isn’t a full alternative for gifs. Whereas After Results itself is commonly used with video clips, and Lottie can render to a HTML <canvas>, and a canvas can play video clips, you wouldn’t use a Lottie file for that goal. Lottie is for superior 2D animations, not a lot for video. There are different instruments for creating advanced internet animations with a GUI like SVGator and Rive, however I haven’t tried them myself. 🤷‍♂️

I want there was a TL;DR for this text. For now, not less than, there’s no clear winner…