title: Media Queries for @2x, @3x, and @4x images
body: <p>I am trying to support a variety of pixel ratios on the current site I'm developing. I also want to ensure I provide any required browser prefixes to support the widest variety of devices/browsers within reason. Also, I'm using SVG's wherever possible, but I need a solution for photographic images. Ideally, I'd like to provide:</p>
  
  <ol>
  <li>@1x image (Pixel Ratio 1.0)</li>
  <li>@2x image (Pixel Ratio of 1.25+)</li>
  <li>@3x image (Pixel Ratio of 2.25+)</li>
  <li>@4x image (Pixel Ratio of 3.25+)</li>
  </ol>
  
  <p>My question is what would be the best way to go about writing the media queries to achieve this? My primary concern is that my arguments are correct for what I'm trying to achieve. I'd appreciate any suggestions or advice you have. Currently my code is as follows:</p>
  
  <pre class="lang-css prettyprint-override"><code>/* @1x Images (Pixel Ratio 1.0) */
  #dgst_shopping_bag {background-image:url(img/shopping_bag.png);}
  
  /* @2x Images (Pixel Ratio of 1.25+) */
  @media only screen and (-o-min-device-pixel-ratio: 5/4),
         only screen and (-webkit-min-device-pixel-ratio: 1.25),
         only screen and (min-device-pixel-ratio: 1.25),
         only screen and (min-resolution: 1.25dppx) {
      #dgst_shopping_bag {background-image:url(img/shopping_bag@2x.png);}
  }
  
  /* @3x Images (Pixel Ratio of 2.25+) */
  @media only screen and (-o-min-device-pixel-ratio: 9/4),
         only screen and (-webkit-min-device-pixel-ratio: 2.25),
         only screen and (min-device-pixel-ratio: 2.25),
         only screen and (min-resolution: 2.25dppx) {
      #dgst_shopping_bag {background-image:url(img/shopping_bag@3x.png);}
  }
  
  /* @4x Images (Pixel Ratio of 3.25+) */ 
  @media only screen and (-o-min-device-pixel-ratio: 13/4),
         only screen and (-webkit-min-device-pixel-ratio: 3.25),
         only screen and (min-device-pixel-ratio: 3.25),
         only screen and (min-resolution: 3.25dppx) {
      #dgst_shopping_bag {background-image:url(img/shopping_bag@4x.png);}
  }
  </code></pre>
  
  <p><strong>Alternative 1:</strong> I've been considering utilizing the <code>&lt;picture&gt;</code> tag to accomplish this. I know you can provide alternative content for browsers that don't support <code>&lt;picture&gt;</code>, which would be my primary concern in utilizing it. Do you guys think that  would be the best practice for providing photos for multiple pixel ratios?</p>