So far, not many browsers support the picture element. That will change, in time. The one browser engine that does have support on by default is Blink.
Blink-based browsers also supports WebP, an image format with better compression than JPEG, for example.
The image above is around 304Kb in JPEG (non-optimized, as-is off Wikipedia). The WebP version is around 119Kb.
The picture element is not just for "squishy images" and the art direction use-case. It also does content-type checking, and will pick a source element if the type-attribute matches.
Since everyone else would fall back to the img element, this should work as a technique for introducing WebP support. There should be no need for the involved wrapping of source elements with the video tag etc for IE compat, since IE doesn't support WebP anyway, etc.
Some browsers with WebP-support will miss out (notably Android WebKit-browsers and Opera Mini), but hey, if fallback solution complexity is what's holding you back, maybe this is a way to start? No JS, no hacks, just plain built-in progressive enhancement.
