Keeping The Big Small — How To Avoid Duplicate Downloads In Responsive Images | Responsive Web Design

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 Big Small — How To Avoid Duplicate Downloads In Responsive Images

View original article

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.