title: How many viewport sizes is too many?
body: <p>I figured out that using the <em>srcset</em> &amp; <em>sizes</em> attributes are the best option for me. My question is how many viewports is the best to support? After writing this it seems like alot, but if the browser will pick the best one, and the others aren't loaded, why not just do a bunch so I can deliver the best experience for 1x and 2x users? Also should I consider 1.5x and 3x users? I only included the 1x sizes I would target. As you can imagine if I add 1.5x, 2x, and 3x sizes, this list will be insanely long. Here's the example:</p>
  
  <pre><code>&lt;img src="image-320.jpg" sizes="100vw"
   srcset="image-320.jpg 320w, image-480.jpg 480w,
           image-768.jpg 768w, image-960.jpg 960w,
           image-1024.jpg 1024w, image-1280.jpg 1280w,
           image-1366.jpg 1366w, image-1680.jpg 1680w,
           image-1920.jpg 1920w, image-2048.jpg 2048w,
           image-2560.jpg 2560w, image-2880.jpg 2880w" alt="..."&gt;
  </code></pre>
  
  <p>Before I start this, I'm curious as to best practices and if I'm looking at this the right way. Thanks!</p>