Here’s something to brighten your monday:

WebKit has made some serious news by finally implementing the srcset attribute. As Chair of the W3C’s Responsive Images Community Group, I’ve been alternately hoping for and dreading this moment for some time now. It turns out to be good news for all involved parties—the users browsing the Web, most of all. - 

Mat Marquis, Smashing Magazine

Responsive images have certainly been a bane for Front End Web Developers. Forcing non-high density display users to load high resolution assets is a bandwidth waste, not to mention slows down the user experience. 

As Jason Grigsby said, “IMG Tags Suck for Responsive Web Design”.  Prior to the srcset set tag, we front end developers have had to rely on javascript or serverside CDN solutions, often creating a lot of extra work in the process.

Now we have a simple browser based weapon.

Here’s what a sample code would look like

<img src="low-res-default.jpg" srcset="high-res.jpg 2x">

srcset will be ignored by unsupported browsers, and the high resolution asset will be automatically loaded if the browser uses greater than or equal 2x pixels per CSS pixel. 

You’re probably thinking, “What about non-webkit browsers?” Currently overwhelmingly mobile users, (people most likely to have high density displays) use webkit, whether they know it or not.

Those looking into responsive design for the first time or new to responsive design should read, A pixel is not a pixel is not a pixel.