Why animated GIFs deserve the axe

Load up an animated GIF in DevTools on a site like Imgur or Gfycat and you'll often find the "GIF" is actually a video element in disguise. There's a straightforward reason for that: GIFs are notoriously heavy. Converting your largest animated GIFs to video formats is one of the fastest performance wins available, saving a significant chunk of your users' bandwidth.

Audit your page first

Run a Lighthouse performance audit in DevTools to see which of your GIFs are worth converting. The audit report will flag offenders under the suggestion "Use video formats for animated content."

Produce an MP4 with FFmpeg

FFmpeg is a reliable tool for turning GIFs into video. To convert my-animation.gif into an MP4, run:

ffmpeg -i my-animation.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4

The -i flag designates the input file. The libx264 encoder requires even dimensions (e.g., 320×240). If your source GIF has odd dimensions, FFmpeg will error out with a "height/width not divisible by 2" message. Add a crop filter to handle this:

ffmpeg -i my-animation.gif -vf "crop=trunc(iw/2)*2:trunc(ih/2)*2" -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4

Also generate a WebM

WebM, released in 2010, is a younger format than MP4 (1999), but it generally produces significantly smaller files. Not all browsers support WebM, so generating both formats is the safe play. Convert your GIF to WebM with:

ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm

The size payoff is real

In a standard conversion, the original GIF clocks in at 3.7 MB, while the MP4 version is 551 KB and the WebM version only 341 KB. That's a dramatic reduction in payload size just by swapping formats.

Swap the <img> for a <video>

Animated GIFs have three behavioral traits you must replicate with a video: they autoplay, they loop, and they're silent. The <video> element handles all of this:

<video autoplay loop muted playsinline></video>

Those attributes ensure the video plays automatically, loops endlessly, outputs no audio, and stays inline instead of going fullscreen. You'll also need one or more <source> children so the browser can select a format it supports. Always offer both WebM and MP4 as a fallback:

<video autoplay loop muted playsinline>
  <source src="my-animation.webm" type="video/webm">
  <source src="my-animation.mp4" type="video/mp4">
</video>

Know the LCP tradeoff

One caveat: <img> elements are LCP candidates, but <video> elements without a poster image are not LCP candidates. Adding a poster attribute to your video just to make it an LCP candidate is counterproductive—the image would never actually be displayed.

The right approach is to keep using <video> in place of GIFs, understanding that the next-largest element will become the LCP candidate. Since GIFs and videos are typically larger and slower to download than other content, shifting LCP to a different (and likely smaller) element will probably improve your LCP anyway.