Animated AVIFs make lightweight videos

Sometimes in my posts I need to show a screen recording. Videos can get heavy rapidly and take a lot of time to load.

I also write my posts in markdown which has syntax to include images:

![Alt text describing the image](path to the image)

Using that syntax for videos doesn’t work though. Since html is valid markdown, it’s possible to manually add <video> tags, but it’s a bit more tedious.

It’s also possible to use ffmpeg to convert a mp4 video into a looping animated AVIF. The command to do it is

$ ffmpeg -i demo.mp4 -loop 0 demo.avif

AVIF also compresses very well, without losing too much detail.

$ ls -lh
total 1.8M
-rw-r--r--. 1 thib thib 566K Apr 11 09:26 typst-live-preview.avif
-rw-r--r--. 1 thib thib 1.2M Apr  8 22:02 typst-live-preview.mp4

The support for AVIF in browsers is excellent, sitting at more than 94% as of writing.

My only remaining gripe is that Astro chokes on AVIF images when trying to optimize images in Markdown posts. A workaround for it is to store the AVIFs as static assets so Astro doesn’t try to optimize them.