I am using a css grid on my site and responsive images. Unfortunately, the incorrect image sizes are being served, resulting in pixelated images. I know that responsive images can be disabled, which solves this issue, but it would be nice to take advantage of this functionality.
Has anyone ever run into his before? It’s more obvious on the 16x9 images. (original upload side of 2596x1460px)
I think it’s due to the images spanning across multiple cells which I believe is causing the image to render as though it was only the width of a single cell. There was another user that just posted about a similar issue and provided a read-only link but I can’t confirm if my suggestion would help solve the issue:
It worked by simply taking the image out of the grid. Maybe there are some css properties that could be added to images like min or max-width that could trigger it to load properly even while in the grid?
I’d imagine utilizing some width properties could help here but it would require some testing. Personally I don’t utilize Grid that much so I haven’t had to troubleshoot the issue, but it may be a good exercise if I have some extra time.