Alternative to GIFs

As some have seem, the first result in google to "Alternative to GIFs" is a great page by ezgif: https://ezgif.com/help/alternative-animated-image-formats

I would just like to add to that.

Animated images are usually sequential frames and do not compress as much as video codecs.

In HTML5 we can mimic an animated image by using <video autoplay muted loop>

And then we just need to pick the right codec.

If we do not need a transparent background, we can just use H.264 (MPEG-4) and it is supported by most browsers. (Chrome, FF, Safari, Edge, IE9+)

If we do need transparency, our only video option is webm VP9 for Chrome, FF and Edge, but Safari does not support it, but instead they want us to use HEVC (H.265) https://developer.apple.com/videos/play/wwdc2019/506

Apple does provide a HEVC example file that works in Safari, but if you are on Linux or Windows, you will have a difficult time to encoding your own video and keeping the alpha channel. I tried in After Effects and AfterCodecs and those could not keep the alpha in Safari. I also asked help from a friend that uses MacOS, he tried to convert from APNG and VP9 to HEVC using Quicktime, HandBrake and After Effects, but he was also unsuccessful.

So, if I can't provide a transparent video animation to Apple users, what are my alternatives? The Video element does not support images as a fallback.

So, digging a bit deeper, I found in the HTML specs that we “can listen to the error event on the last source element and trigger fallback behavior”

So what I did was:

<script>
  let videofallback = async(e) => {
    e.parentElement.innerHTML = `<picture>
        <source srcset='ship.webp' type='image/webp'>
        <source srcset='ship.apng' type='image/apng'>
        <img src='ship.gif' alt='ship'>
      </picture>`;
  }
</script>

<div>
  <video autoplay muted loop>
    <source src="ship.webm" type='video/webm; codecs="vp9"'
     onerror="videofallback(parentNode)" />
  </video>
</div>

Some useful commands that may help you to do the conversions:

(you may need ffmpeg version 5+ for using alpha channel in some codecs)

ffmpeg -i input.apng -pix_fmt yuva420p output.webp

ffmpeg -i input.apng -crf 27 -c:v libvpx-vp9 -pix_fmt yuva420p output.webm

crf = the closer to 1, the higher the quality and higher file size, play with that number to find the sweet spot.

You may be able to reduce the size of the APNG, depending on how you have created it: ffmpeg -i input.apng -strict -1 -plays 0 -t 1 output.apng

Some may also ask themselves about AV1 videos and Avif animated images.

ffmpeg currently can’t encode alpha channels in AV1 videos.

Avif supports alpha, but Firefox does not support animated avifs, and the picture element does not have a way to differentiate the two. There is only one MIME time for both. So I decided to just leave it out.

And as many use the Video Speed Controller browser extension, you may want to hide the controller for those looping videos, but if you have more videos on that page that needs the controller, make the CSS more specific for the looping animations: .vsc-controller{display:none;}

I hope this helps anyone who lands on this page. Cheers. 🥂