<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;
}
This Pen doesn't use any external JavaScript resources.