Incorrect image size being picked by react-datocms Image component

🆘 Support
1

Hi,

I’m using react-datocms <Image /> component like this.

<div className="relative h-[200px] w-[200px] sm:h-[273px] sm:w-[273px]">
          <DatoImage
            data={badgeImage}
            layout="fill"
            srcSetCandidates={[0.75, 1]}
            sizes="(min-width: 640px) 273px, 200px"
          />
</div>

From the container’s CSS properties, it is clear that there are only 2 possible widths for the image:

  1. On smaller screens, the image will be 200px wide

  2. On screen sizes bigger than 640px (tailwind variant ‘sm’) , the image will be 273px wide

That’s why, I have declared (min-width: 640px) 273px, 200px in the sizes prop.

And because I’ve validation on image on DatoCMS side that image can only be 273px wide - so, I have declared srcSetCandidates to avoid generation of unnecessary image sizes.

I just loaded this page on a 518px wide screen size and the generated source is:

<source srcset="https://www.datocms-assets.com/img-name.png?auto=format&amp;dpr=0.75 204w,https://www.datocms-assets.com/img-name.png?auto=format 273w" sizes="(min-width: 640px) 273px, 200px">

** I copied this from browser’s inspect elements pane. Though, I changed the image name here to make it more readable.

We can see that it generated 2 images:

  1. First one is dpr=0.75 & 204w. (Image width: 204px)

  2. Second one is the original image (Image width: 273px)

And when I hover over the src of <img /> rendered in the inspect elements, I see this.

rendered-size
rendered-size1031×1554 208 KB

You can see that:

Rendered size: 200 * 200px
Intrinsic size: 273 * 273px
Current Source: The original image (This should have been that 204w image)

it is clear that browser is loading 273px wide image even on screens smaller than 640px width.

So, can you please guide me why it is not loading that first image i.e. 204px wide image that is inside the source?

Thanks!!!

2

hello @itsahmedkamal are you able to provide me a URL where I can test your setup? It would make the debugging more effective as I can also see what’s getting into the Image as data and see the live page. Thank you!

3

Hello @mat_jack1 , I’m so sorry for the late reply.

Here is the URL of the page: https://leankursus-frontend-dgghhoa9d-compass-academy.vercel.app/videns-side/hvad-er-lean

Thank you!

6

Hey @itsahmedkamal,

Thanks for your patience so far! I’m looking into this along with @mat_jack1, and it kinda got me stumped at first too. After some investigation, I’m wondering if you might be experiencing the browser cache?

If you start from a wider viewport (>=640px), Chrome will first load the 273px version. Then, if you decrease the viewport width to lower than that, Chrome will re-use the already loaded 273px version:

image
image1340×1199 187 KB

However, if you start from a small viewport and disable the cache, it should load the 205px version (same viewport, just refreshed the page):

image
image1711×1196 395 KB

Could that be what’s causing the issue?

Here’s a short video showing me loading the big version first, then narrowing it down. That’s still the 273px version. But when I refresh the page, the image then reloads at the proper 205px size:

1 Like
7

Hi @roger sorry for the delayed response.

I just tested it again and it is working exactly as you explained.

Thank you so much for clearing the confusion!!

2 Likes