Responsive Image: DPR and width combination

🆘 Support
1

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="https://www.datocms-assets.com/205/1628405514-dato-multisite.jpg?dpr=0.25&w=950 237w,https://www.datocms-assets.com/205/1628405514-dato-multisite.jpg?dpr=0.5&w=950 475w,https://www.datocms-assets.com/205/1628405514-dato-multisite.jpg?dpr=0.75&w=950 712w,https://www.datocms-assets.com/205/1628405514-dato-multisite.jpg?w=950 950w,https://www.datocms-assets.com/205/1628405514-dato-multisite.jpg?dpr=1.5&w=950 1425w,https://www.datocms-assets.com/205/1628405514-dato-multisite.jpg?dpr=2&w=950 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
2

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.

2 Likes
3

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

1 Like
4

Thanks for a great explanation, @mat_jack1!

1 Like