Responsive Image technique with less mobile data usage.

With the increasing number of devices and display technologies there is a need to implement proper strategy when it comes to loading images which needs to be fast but on contrary should look outstanding when viewed on a higher density screens like Retina, 4k display or Ultra AMOLED screens.

With  SRCSET attribute now we can switch between different image versions responsive to the screen. With srcset all the hard work to figure out which image will be best to load. Moreover, we can also add fallback for older and lazy browsers. Here’s how the syntax look like :

<img src="small.jpg" srcset="medium.jpg 900w, large.jpg 2000w" alt="Bla bla bla">

So how does this works ?

The browser actually does some simple calculations in the background and figures out which image to load.

Here how :

Say I have added three images in a particular srcset, first one is 500px, second one is 1000px and last one 2000px.

So the browser’s calculation will be (which we really shouldn’t care of !) :

500 / 480 = 1.0417
1000 / 480 = 2.0833
2000 / 480 = 4.1667

Say current device screen width is 480px (non-retina) so it’s 1x device and the first image (1.0417) is the closest match and it will be loaded. If we have 480px wide Retina device it will be 2x and the closest number (2.0833) i.e. the second image will be loaded.

But there is a downside, it’s not widely supported by all the browsers.  For now I would recommend not to use the attribute if you have specific requirements and defined users then you can give it a thought.