<img srcset="https://assets.imgix.net/examples/bluehat.jpg?w=400&dpr=1&txt=dpr%3D1 1x,
https://assets.imgix.net/examples/bluehat.jpg?w=400&dpr=2&txt=dpr%3D2 2x, https://assets.imgix.net/examples/bluehat.jpg?w=400&dpr=3&txt=dpr%3D3 3x" src="https://assets.imgix.net/examples/bluehat.jpg?w=400" />

<section class="content">
  <article>
    <h1>Demonstrating srcset & dynamic DPR with imgix</h1>

    <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.</p>
    <p>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.</p>
  </article>
</section>
       <div class="button-group">
      <a href="https://blog.imgix.com/2015/08/18/responsive-images-with-srcset-imgix.html" class="button" target="_blank">Srcset & imgix guide</a>
      <a href="https://imgix.com" target="_blank" class="button">Visit imgix.com</a>
    </div>
  </article>
</section>
<footer>
  <hr>
  <a href="https://imgix.com"><img src="https://assets.imgix.net/presskit/imgix-presskit.pdf?page=3&fm=png&w=320&dpr=2" width="160" height="60"></a>
</footer>
body {
  text-align: center;
}

External CSS

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

External JavaScript

This Pen doesn't use any external JavaScript resources.