Thinking of using a gif on your website? Use a video instead, with these FFmpeg settings

A client wanted to embed an animation into a blog post about HTMX and Chart.js - they’d recorded a video using Snagit but exporting it to a gif, creating a file over 1mb

Here’s what we advised them instead:

  • Step 1: export the video as an mp4
  • Step 2: Install ffmpeg using brew install ffmpeg or winget install ffmpeg
  • Step 3: Create an optimised mp4:
ffmpeg -i video.mp4 -vcodec h264 -acodec aac -crf 30 -strict -2 video.optim.mp4
  • Step 4: Convert the mp4 to webm:
ffmpeg -i video.mp4 -vcodec libvpx-vp9 -b:v 1M -acodec libvorbis video.webm
  • Step 5: Use the HTML5 video control with poster and fallback data sources for different video types:
<video autoplay muted loop playsinline poster="chartjs.jpg">
  <source src="chartjs.webm" type="video/webm">
  <source src="chartjs.mp4" type="video/mp4">
</video>

(you need all the autoplay muted playsinline attributes to get a video to autoplay without user interaction)

Result

The webm / optimised mp4 files are ~100kb, compared to the 1mb gif!

If you need video, do get in touch!