When you specify a maxW of 2038, our system generates a srcSet with URLs tailored for various device pixel ratios. Each entry multiplies your base width by the respective DPR (for example, 2038 × 0.25 yields roughly 509 pixels, 2038 × 0.5 gives about 1019 pixels, and so on). The max-w values in the query strings are automatically computed to serve the correct resolution images based on the device’s display.
So nothing to worry about, passing this result into our image component will give the component the capability to ensure optimal image quality on different screens
The numbers you see in the query string (like 1037342) aren’t the image widths themselves—they’re internal values used by our Imgix integration to generate the correct version of your image.
When you set a maxW of 2038 and use a DPR of 0.25, we first calculate the effective width by multiplying 2038 by 0.25, which gives roughly 509 (2038 × 0.25 ≈ 509.5, rounded down to 509). We then multiply that 509 by your original maxW value: 2038 × 509 equals 1037342. This resulting number is used internally to tell Imgix how to optimize the image for that DPR. The same approach is applied to generate the other numbers in the srcSet.
The actual width you see (509w, 1019w, etc.) is what’s delivered to the client, based on multiplying your maxW by the respective device pixel ratio. So even though the URL shows a large number, the image is rendered at the expected width.
@m.finamor I understand what you are saying but if I set a maxH to 1017 and a maxW to 2038 and view the different urls then the pictures doesn’t keep the aspect ratio and the width is way wider then the comparable heights resulting in white space between each side of the picture. However the picture for the dpr 1 looks correct.
Shouldn’t the hight be set with the same logic?
These are the heights I get:
max-h=254
max-h=508
max-h=762
max-h=1017
max-h=1525
The image should be 4x longer than it is wide, like in the second image. But with maxW set, it becomes tall and skinny regardless of the ar setting. I guess ar doesn’t quite work like max-width in CSS does, because it does not seem to respect ar and scale the height correspondingly. That’s just an Imgix quirk, not anything we’re doing on our side.
To get the behavior you want, I think you have to instead set max-h: 1017. Then I thiiiiink you can remove the ar param altogether (doesn’t seem to do anything with max-w and max-h present?)
Alternatively, maybe just use ar without max-w / h and let the image component pick the best resolution for the device? It’s possible there are devices (retina and 4k/8k monitors) that could benefit from 2048+ pixels, while the component should automatically scale it down for lower-DPI devices.
If I change the width to 509 in the url everything looks exactly like it should. Are you really sure that the max-w you are setting in the URL is correct?
But yes you are right. We should be able to remove the aspect ratio when setting both width and height.
When you combine ar with both maxW and maxH, Imgix is forced to reconcile a fixed aspect ratio with two bounding dimensions. This often leads to letterboxing or unexpected widths and heights, especially at lower DPRs. If you’d prefer the image to keep its natural ratio, removing ar (or leaving out maxH/maxW) will help avoid the white space as you said
On the other hand, if you do want a strict aspect ratio, it’s usually best to rely on ar alone (plus one bounding dimension) so Imgix can scale things cleanly.
I can’t leave out maxW and maxH. If I leave them out the image doesn’t crop. If I set a hight and width without the max property then my srcSet will have the same height and width on all srcSets. I would like a source set that have difference pixel sizes of the image and not only different DPR.
It is correct that I should be able to leave out the aspect ratio prop when setting a maxH and maxW because the scaling for both should be the same for all the generated srcSet’s.
So if I set the params like: imgixParams: { fit: crop, auto: format, maxW: 2038, maxH: 1017 }
Why would the image in the different version have different aspect ratios? It doesn’t make any sense.
I can see that if I set the width in the url to the same as of the width in the source set then everything looks correct.
The only logical here would be that instead of the srcSet printing out:
Playing around again I can see that I get the correct images generated if I set a fixed with to 2038 and fixed height to 1017 due to the DPR scaling the pictures in Imgix and the aspect ratio is kept.
I was not aware of this so it will solve my use case.
Maybe it is just me that doesn’t understand this at all
@m.finamor I realize this was what you where trying to tell me in your first reply. Didn’t understand that I shouldn’t use the maxW and maxH at the time.
Thank you both for going the extra mile and trying to get me to understand.
