Images with srcset

How srcset works

First implementation of srcset only lets us define a set of images for different pixel densities using resolution modifiers.

simply add the srcset attribute to an img element and at least one resolution modifier. The browser then display the most appropriate image from the available options. For example, the 2x modifier  targets the image to use if the display has a pixel density of 2 or higher.

<img src="hello.jpg" srcset="hello-2x.jpg 2x" />

Consclusion

Undoubtedly, srscet has a long way to go, but it's pressing forward in the right direction and helping us solve a problem. Overall, this will be a more intelligent way to serve our content images.

A future implementation of srcset will alloy us to load images based on the viewport size: 

<img src="hello.jpg" srcset="hello-2x.jpg 720w, hello-3x 1280w" />