HTML5 fallback images are being loaded by the browser, even though HTML5 video is supported

Question

I have some HTML5 videos with animated GIFs as fallback. Sadly, the GIFs are being loaded even though HTML5 video is supported.

Without using javascript, is

Answer 1

Using poster="animation-1.gif" also causes the gif to download.

How about using

---

I was surprised to see this in network inspector too.

Not an issue if your loading larger long videos, and the fallback is just a placeholder.

But when you're trying to use mp4 videos as a replacement for the gifs because mp4 can be a fraction of the size of the gif (ref. https://rigor.com/blog/2015/12/optimizing-animated-gifs-with-html5-video). Downloading both in this scenario is just wrong. I bet a lot of website are doing it this way too.