The explosion of high-DPR devices makes serving a highly-performant site more complex. High-DPR images are heavy, particularly on mobile devices where there is a collision between screen resolution and download speed.
Our previous tutorials on using srcset, Client Hints and <picture> cover several approaches to implementing responsive design with imgix, and touched briefly on changing quality settings to improve file size and loading speed of high-DPR images, which has become an industry best practice. This post goes into more detail about how to optimize for different DPR settings using imgix's dpr, q, and usm parameters.
Shrinking High-DPR Images
High-DPR images have denser pixel data, so they can withstand more compression. Because of this, you can drastically adjust the q value downward for these images. For example, this basic srcset code provides appropriately-sized images for three DPR settings:
<img
srcset="https://static-c.imgix.net/treefrog.jpg?w=200,
https://static-c.imgix.net/treefrog.jpg?w=200&dpr=2 2x,
https://static-c.imgix.net/treefrog.jpg?w=200&dpr=3 3x"
src="https://static-c.imgix.net/treefrog.jpg?w=200"
>
Note that the logical pixel dimension (w=200) is the same in each case, and the larger images for higher DPR versions are set by the dpr parameter, rather than pointing to a separate file. Changing the DPR via parameters means you only need to maintain one master image, assuming its resolution is high enough to output at the higher resolutions.
However, serving the right-sized image for each DPR is only half the battle when you're trying to optimize. Because the higher-DPR images are fitting much more visual data into the same number of logical pixels, the file size of these images increases quite a bit, even with compression applied.
The default quality for all of the examples below is q=75 and they are shown at dpr=1 to illustrate the difference in the amount of available visual data. Clicking an image will take you to the Sandbox, where you can see it at its logical size of 200 pixels and the DPR value shown in the caption.
`w=200`, 17.26kB
`w=200&dpr=2`, 47.04kB
`w=200&dpr=3`, 85.67kB
The good news is that because the high-DPR images will actually be displayed at a logical size of 200 pixels, we can use a much lower quality setting with no obvious loss in image quality. They now stay within range of the original (and even the original can be reduced a bit further).
`q=55`
12.21kB
`dpr=2&q=25`
15.54kB
`dpr=3&q=15`
22.88kB
Changing the quality is a simple parameter change, so upgrading to this approach only requires a few additions to the code sample above:
<img
srcset="https://static-c.imgix.net/treefrog.jpg?w=200&q=55,
https://static-c.imgix.net/treefrog.jpg?w=200&dpr=2&q=25 2x,
https://static-c.imgix.net/treefrog.jpg?w=200&dpr=3&q=15 3x"
src="https://static-c.imgix.net/treefrog.jpg?w=200"
>
Depending on the image, using this method may introduce more blurriness than you would prefer. If that's the case, adjusting the image with the usm parameter should get you the rest of the way to the sharpness you need. It will increase the file size slightly, however.
`q=55&usm=20`
13.80kB
`dpr=2&q=25&usm=20`
17.12kB
`dpr=3&q=15&usm=20`
24.67kB
These settings are a good starting point for working with high-DPR images and quality. A key advantage of this method is that once you’ve defined your settings, they can easily be coded into your site or app and will scale along with it. Large, complex sites such as WalMart and The Guardian already use similar techniques to make their sites performant, and with imgix and a few URL changes, you can do the same.
