Responsive Image: DPR and width combination

Hi Dato team. My question is not for bug reporting or customer support, but I’m curious about Dato’s handling of responsive images.

I notice that the srcset attribute in image tags use fractional DPR (0.25, 0.5, 0.75) for small images:

<source srcset=" 237w, 475w, 712w, 950w, 1425w, 1900w" sizes="(max-width: 810px) 100vw, (max-width: 1000px) 750px, (min-width: 1001px) 950px">

AFAIK, the adjusted width of an image is intrinsic width * dpr.

So the first image’s width is 0.25 * 950 = 370, second image is 0.5 * 950 = 475, so on.

How is this different from just setting the width to 370, 475 etc?

1 Like

Hey @lethutrang101 welcome to Community and thank you for the question!

We used this “hack” to preserve any additional parameter you might have passed, such as focal point, crop, etc. Using the fractional DPR we can get multiple sub-resolutions that are acceptable defaults to handle smaller screns.

In general this is good to reduce data transfer waste, without setting the widths manually for different resolutions. If you go for the manual route that’s fine, but if you pass additional parameters you need to think about those as well.

So the tradeoff here is that with our default you get suboptimal widths, but all the parameters should work fine and you don’t have to do any customisation. With setting the manual widths you get more accurate widths, but you have a lot more manual work to do.


Thank you. That’s very well-explained. I think this is a reasonable tradeoff to make.

1 Like

Thanks for a great explanation, @mat_jack1!

1 Like