Soyuzno - Digital Art Director - Jakarta. {Beta version}. jQuery Waypoints. Keeping The Big <picture> Small — How To Avoid Duplicate Downloads In Responsive Images. Advertisement 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. The <picture> element supports a number of different types of fallback content, but the current implementation of these fallbacks is problematic. In this article, we’ll explore how the fallbacks work, how they fail and what can be done about it. The <picture> Element And Fallback Content Like <video> and <audio>, <picture> uses <source> elements to provide a set of images that the browser can choose from.
For situations in which a browser doesn’t know how to deal with <picture> (or <video> or <audio>) or cannot render any of the <source> elements, a developer can include fallback content. The <picture> element differs from <video> and <audio> in that it also allows srcset. Next Steps. jQuery Events.