Responsive Images supported in Chrome

Hallelujah! Chrome beta is now going to be supporting the srcset attribute. As we all know, today’s web is comprised of laptops, desktops, hi-def TVs, smartphones, tablets and other devices with diverse screen sizes and pixel ratios. Delivering the same image resources to all devices can lead to slower page load times and clogged up bandwidth.

The srcset attribute will help resolve this problem by enabling developers to provide multiple instances of a resource in varying resolutions for a single image. The web browser can then pick the appropriately sized resource that matches the device’s capabilities. Below is an example of the code:

<img alt="Captain America." src="captain.jpg" srcset="captain.jpg 1x, captain.jpg 2x, captain.jpg 4x">

It is important to note that the src attribute is not needed for browsers that support srcset, but it’s a good idea to include for backwards compatibility.

Presumably it will be ages before we can legitimately use this (thanks, IE) but this is still a big step forward in the great responsive image battle.