Is there a way to get DPR to a custom next.js image loader?
Unanswered
Japanese anchovy posted this in #help-forum
Japanese anchovyOP
I want to adjust the
q (quality) attribute for Imgix image asset urls, based on the browser's current devicePixelRatio. I haven't come across anything that definitively goes over this in the Next.js docs, so I'm wondering if anyone has prior experience with this kind of optimization. In short, I want to lower the q query param in the image request the higher the devicePixelRatio is—while using the Next.js Image component, the sizes prop, and a custom image loader.8 Replies
@Japanese anchovy To adjust
https://nextjs.org/docs/app/api-reference/components/image#quality
q you need to use quality attribute of Image/Next.https://nextjs.org/docs/app/api-reference/components/image#quality
By default it's 75 so you need to adjust depending on your need
I might mis-understood your question, you are saying you want to use low quality image for the loader?
Japanese anchovyOP
I want the quality to go down the higher the DPR is. The theory is that the higher resolution images can tolerate more compression with less perceptual quality loss due to the tiny physical size of the image displayed
I guess I just need to pass in an override to
quality that I make myself—but I don't think that works well with SSRI don't think I am much following you
@Japanese anchovy I want to adjust the `q` (quality) attribute for Imgix image asset urls, based on the browser's current `devicePixelRatio`. I haven't come across anything that definitively goes over this in the Next.js docs, so I'm wondering if anyone has prior experience with this kind of optimization. In short, I want to lower the `q` query param in the image request the higher the `devicePixelRatio` is—while using the Next.js `Image` component, the `sizes` prop, and a custom image `loader`.
q is just for quality of the images and sizes are just for responsive sizes.maybe we don't have anything provided from Next.js for DPR you are saying