Here’s something to brighten your monday:
WebKit has made some serious news by finally implementing the Mat Marquis, Smashing Magazine
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. -
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.
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.