<section class="content">
  <article>
    <figure>
      <img srcset="https://assets.imgix.net/examples/bluehat.jpg?w=640&auto=format&txt=dpr%3D1 1x,
https://assets.imgix.net/examples/bluehat.jpg?w=640&auto=format&fit=max&q=40&dpr=2&txt=dpr%3D2 2x,
https://assets.imgix.net/examples/bluehat.jpg?w=640&auto=format&fit=max&q=20&dpr=3&txt=dpr%3D3 3x" src="https://assets.imgix.net/examples/bluehat.jpg?w=640" />
    </figure>

    <h1>Demonstrating Srcset &amp; DPR using imgix </h1>
    <h2>using <code>fit=max</code>, <code>auto=format</code> and variable quality for smaller file sizes.</h2>
    <p>Using the imgix <code>w</code> and <code>dpr</code> URL parameters, we can simplify the amount of effort it takes to generate the srcset attributes on our images. This example, when viewed on a dpr 2 or 3 device will display the appropriate image.
      Look to the text on the lower right of the image set with imgix to confirm. Using the <code>fit=max</code> param on an imgix URL will ensure that an image is never delivered larger than its original size.</p>
    <p>If you plan on targeting chrome browsers, android and ios devices, making use of <code>auto=format</code> will deliver light-weight webP images for chrome browsers and default to the original format for other instances.
    </p>
    <p>When setting dpr with imgix, you may want to consider adjusting the quality of your images. Setting the <code>q</code> parameter to lower values for higher dprs allows you to reduce the file size while maintaining a denser pixel set for your image.</p>
  </article>
  <div class="button-group">
    <a href="https://blog.imgix.com/2015/08/18/responsive-images-with-srcset-imgix.html" target="_blank" class="button">View Blog Post</a>
    <a href="https://imgix.com" target="_blank" class="button">Visit imgix.com</a>
  </div>
</section>
<footer>
  <hr>
  <a href="https://imgix.com" target="_blank"><img src="https://assets.imgix.net/presskit/imgix-presskit.pdf?page=3&fm=png&w=320&dpr=2" width="160" height="60"></a>
</footer>

External CSS

  1. https://codepen.io/imgix/pen/d06269809bb83c85326ebbbf7e81241b

External JavaScript

This Pen doesn't use any external JavaScript resources.