HTML5 <picture> srcset fallback for IE 10 and 11

Question

I really want to keep my footer responsive to different devices so I have used the generator from cloudinary. Here is the HTML5

<picture>
<img
sizes="(max-width: 1920px) 100vw, 1920px"
srcset="
footer_rainbow_fjrr5j_c_scale,w_190.png 190w,
footer_rainbow_fjrr5j_c_scale,w_780.png 780w,
footer_rainbow_fjrr5j_c_scale,w_1190.png 1190w,
footer_rainbow_fjrr5j_c_scale,w_1920.png 1920w"
src="footer_rainbow_fjrr5j_c_scale,w_1920.png"
alt="">
</picture>

However according to caniuse.com, it doesn't support IE 10 or 11.

What is the best fallback? All I can think of so far is using media queries using csswith different breakpoints. Is there a better way? I have also tried css cover, width; 100% and contain, but neither are perfect.

Answer 1

You already have a fallback. The way you have it setup it should work in IE 10 and 11... both will ignore the sizes and srcset attributes but default to using the src attribute.

I tested the same structure using my images and it presented the default fallback image fine on both IE 10 and 11:

<img
sizes="(max-width: 1920px) 100vw, 1920px"
srcset="
http://www.studioadam.com/codepen/waterfall-wide-1100.jpg  1100w,
         http://www.studioadam.com/codepen/waterfall-wide-550.jpg  550w"
src="http://www.studioadam.com/codepen/waterfall-wide-1100.jpg"
alt="">

Alternatively (or if you want to art direct images), you could also use source elements within the picture element: http://codepen.io/studioadam/pen/pNVNNj?editors=1100