Keeping The Big Small — How To Avoid Duplicate Downloads In Responsive Images
This article goes DEEEEEEP into the <picture> implementation to come up with a way that only downloads a single image. The good news is that it succeeds! The bad news is there’s a lot of non semantic markup to get there. A great look at the problems surrounding possible image solutions. I think we should just default to loading 1mb pictures of people eating salads (kidding, obviously).
The <picture> element is a new addition to HTML5 that’s being championed by the W3C’s Responsive Images Community Group (RICG). It is intended to provide a declarative, markup-based solution to enable responsive images without the need of JavaScript libraries or complicated server-side detection.
An excerpt from Keeping The BigSmall — How To Avoid Duplicate Downloads In Responsive Images
