title: picture (source) element VS img srcset attribute
body: <p>The <code>srcset</code> attribute of the <code>img</code> element helps authors adapt their sites for high-resolution displays, to be able to use different assets representing the same image.</p>
  
  <p>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.</p>
  
  <p>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?</p>
  
  <p>I did find some examples on the <code>picture</code> element <a href="http://picture.responsiveimages.org/" rel="noreferrer">draft</a>, but still fail to understand the difference. Here are the examples:</p>
  
  <p>Using <code>srcset</code> attribute:</p>
  
  <pre><code>&lt;img src="pic1x.jpg" srcset="pic2x.jpg 2x, pic4x.jpg 4x"
   alt="A rad wolf" width="500" height="500"&gt;
  </code></pre>
  
  <p>Using <code>picture</code> element:</p>
  
  <pre><code>&lt;picture&gt;
    &lt;source media="(min-width: 45em)" srcset="large.jpg"&gt;
    &lt;source media="(min-width: 18em)" srcset="med.jpg"&gt;
    &lt;img src="small.jpg" alt="The president giving an award."&gt;
  &lt;/picture&gt;
  </code></pre>