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.
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.