title: How to use picture element for sharp images on mobile
body: <p>Picture element is getting widely and quickly spread (<a href="http://caniuse.com/#search=picture" rel="noreferrer">http://caniuse.com/#search=picture</a>), and I think it is a great way to avoid serving oversized/undersized pictures, specially when you want to display the same picture on mobile and desktop at 100% of the viewport width.</p>
  
  <p>That can be solved like this:</p>
  
  <pre><code>&lt;img
      srcset="large.jpg  1920w, 
              medium.jpg  720w,
              small.jpg   360w"
      src="medium.jpg"&gt;
  </code></pre>
  
  <p>This allows the browser to be clever and decide which picture to load, but I find a problem with this approach: many mobile devices have a pixel density of 2 or more! Therefore when displaying it for 360w we would actually need the medium image if we want that image to look sharp. It could be done like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;picture&gt;
     &lt;source srcset="http://goo.gl/LsuU9t" media="(min-width: 720px)"&gt;
     &lt;source srcset="http://goo.gl/LsuU9t" media="(min-width: 360px and min-resolution: 2dppx)"&gt;
     &lt;img src="http://goo.gl/LsuU9t"&gt;
  &lt;/picture&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem here, in my opinion, is that this can grow as much as screen resolution grows and we lose the benefits of browser cleverly deciding the best option.</p>
  
  <p><strong>So, my question is if there is a halfway point between the two, so I can still separate between html and css.</strong></p>