Incorrect image size being picked by react-datocms Image component

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:

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

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