TIL that 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:  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…