Add pixel density (dpr) to ImageLoader parameters

[6mint]

Goals

The Image size can be optimized by decreasing the image quality with increasing dpr.
In practice, the quality setting for the 2x version can almost be halved compared to the 1x version without impact on perceptual image quality. This comes with a significant decrease in file size.

Background

This works because on high dpr devices the rendered image size is smaller than the actual image (like a looking at a zoomed-out image) which makes compression artefacts less noticeable.

Jake Archibald wrote a detailed article about this.

Proposal

A corresponding example could look like this:

export default function customLoader({ src, width, quality, dpr }) {
  const adjustedQuality = dpr < 2 ? 80 : 45;
  return `https://example.com/${src}?width=${width}&quality=${adjustedQuality}`
}

[Kavindi487]

That’s a solid proposal — optimizing quality based on device pixel ratio (DPR) can indeed reduce payload size without perceptible quality loss.

To build on your idea, you could make the logic slightly more dynamic and compatible with different image types or rendering contexts:

export default function customLoader({ src, width, quality = 80, dpr }) {
// Adjust quality based on DPR
let adjustedQuality;

if (dpr >= 3) adjustedQuality = Math.round(quality * 0.5);
else if (dpr >= 2) adjustedQuality = Math.round(quality * 0.65);
else adjustedQuality = quality;

return https://example.com/${src}?width=${width}&quality=${adjustedQuality};
}

This maintains higher compression on high-density displays (where compression artifacts are less noticeable), while keeping standard quality on 1x displays.

Potential Next.js integration idea:

Extend the ImageLoaderProps interface to optionally include a dpr argument.

Use window.devicePixelRatio on the client side to automatically pass it during image optimization.

This approach would let developers build adaptive loaders while maintaining compatibility with the current image optimization pipeline.

It could even pair well with sizes and srcSet to further fine-tune performance.

References:

Jake Archibald’s article on DPR and image quality

Next.js Image Optimization Docs