WebKit quietly announced last week that it now supports the srcset attribute on img elements, finally bringing a native markup method for supplying responsive images to devices with different screen resolutions and varying pixel densities.
WebKits implementation is as originally specified by the W3c, keeping the additional markup required simple and fully compatible with older browsers that will simply fallback to the original image specified in the
srcset attribute on the
<img> element is very similar to the WebKit specific
-webkit-image-set CSS method that has been around for the last 12 months. Using the
srcset="" attribute you can now list a set of images and let the browser decide which image best suits the browser/device based on associated resolution multipliers and screen pixel widths specified with each image you list.
<img src="original.png" srcset="small.jpg 640w 1x, small-2x.jpg 640w 2x, large.jpg 1x, large-2x.jpg 2x" alt="">
In the above example 5 images in total are specified between the
srcset attributes targeting various device resolutions, however you may want to keep it simple and supply a single responsive image based on a common display pixel density:
<img src="original.jpg" srcset="hd-2x.jpg 2x">
Right now the WebKit implementation only supports 3 multipliers 1x, 2x and 3x hopefully this will increase over time to support browsers with 1.5x and 2.5x multipliers and beyond.
Official support for the
srcset attribute is a massive step forward for responsive design to address a missing feature that has been eagerly called for by the web design community for some time. Now that WebKit has started the ball rolling hopefully the big browser names will follow suit and implement the same functionality into their latest builds real soon.