picture (source) element VS img srcset attribute

Question

The srcset attribute of the img element helps authors adapt their sites for high-resolution displays, to be able to use different assets representing the same image.

The picture element helps authors to control which image resource a user agent presents to a user, based on media query and/or support for a particular image format.

Both these give the author control over displaying images based on the device resolution;thus making the images responsive. So what is the main difference between them?

I did find some examples on the picture element draft, but still fail to understand the difference. Here are the examples:

Using srcset attribute:

<img src="pic1x.jpg" srcset="pic2x.jpg 2x, pic4x.jpg 4x"  alt="A rad wolf" width="500" height="500"> 

Using picture element:

<picture>   <source media="(min-width: 45em)" srcset="large.jpg">   <source media="(min-width: 18em)" srcset="med.jpg">   <img src="small.jpg" alt="The president giving an award."> </picture> 

Answer 1

Both srcset and picture does approximately the same things, but there is a subtle difference:

• picture dictates what image the browser should use, whereas
• srcset gives the browser a choice. A lot of things can be used to select this choice like viewport size, users preferences, network condition and so on. Hopefully in the future browsers would become smarter and smarter with selecting the appropriate image.

The support for srcset is pretty good and almost all current browsers more or less support it. Situation with a picture element is a little bit worse.