HTML 5 video - fallback image always downloaded

Question

I am using the HTML5 video tag with an image tag inside as fallback for browsers who do not support it (like IE8).

Code looks like this:

<video loop="loop" preload="auto">
    <source src="/videos/home-slider-1.mp4" type="video/mp4">
    <img src="/images/png-jpg/home-slide-1.jpg" width="100%">
</video>

The fallback image works as desired, it does not show on modern browsers that support the video tag. But it does show in IE8, no problems there.

However, when I look in Chrome or Firefox what is being downloaded when I load the page with this code, it shows it also downloads the fallback images... I don't understand why, it's a waste of bandwidth.

Am I doing something wrong here? Should I use another way to provide a fallback image? Does this issue exist for other HTML5 fallbacks as well?

Answer 1

browsers download all the assets in a document, so what you are seeing is normal. you haven't done anything wrong, contrarily, most people don't implement the fallback, so actually you've gone above and beyond and are doing the right thing(s).
if you are that worried about it i suppose you could load the fallback image post page load, but i think thats really extreme. unless you are pulling in tons of assets into your documents and your load speeds are extremely hurting, i would not even worry about it.