I’m having an issue where my images are loading the -p-500 versions (i.e the compressed versions for small screens) on large screens. This means they are displaying as very blurry when I need them to be big and crisp.
For some reason this only happens in the published site in the browser, not in the webflow preview. Happens in Chrome and Safari.
It’s particularly noticeable on the largest image on the page - the image of London being bombed in WW2.
Does anybody know why this would be?
This is an issue I’ve noticed when using responsive imagery alongside grid elements. My guess is that even though the image is taking up multiple cells, it’s acting as though it’s just taking up one.
I haven’t tested this yet, but I believe adding a grid area may fix this issue. If that doesn’t work, given the simplicity of this element presentation, you can always swap out the grid element for a flex—or even a standard—div and it should display the appropriate image size.
Let me know if you run into any issues 
That’s strange! Sounds like a Webflow bug? Or a bug in CSS?
Thanks very much for the tip. I took the image out of the grid and it works fine now.
This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.
