title: HTML picture or srcset for responsive images
body: <p>Making images responsive has always been a troublesome aspect of responsive web design for many. I have gone through a few of the articles regarding the same and came across "srcset" and "picture" as a solution for this.</p>
  
  <h3>SRCSET Example</h3>
  
  <pre><code>  &lt;img src="flower_500px.jpg"
       srcset="flower_750px.jpg 1.5x, flower_1000px.jpg 2x"
       width="500px" alt="flower"&gt;
  </code></pre>
  
  <h3>PICTURE Example</h3>
  
  <pre><code>  &lt;picture&gt;
        &lt;source media="(min-width: 45em)" srcset="flower_1000px.jpg"&gt;
        &lt;source media="(min-width: 32em)" srcset="flower_750px.jpg"&gt;
        &lt;img src="flower_500px.jpg" alt="flower"&gt;
    &lt;/picture&gt;
  </code></pre>
  
  <p>I'm trying to decide which of those two methods to choose to make images responsive. What are the characteristics that I should consider in this choice?</p>