Images in grid are low resolution when published

Design help General
1

I’m using a grid with divs for my CMS images and the assets are large resolution. The image spans the width of the grid child in Designer mode but when I publish to the staging site, the images are significantly smaller than the div width.

Any ideas on what’s going wrong?

2 Likes
2

Hoi Mochi,

you haven’t defined any width or height for your link divs or your images.
What i would try to do is set a fixed height for your link divs and then add 100% height and width to your images. Set ‘Fit’ to ‘Cover’ for your images.

Also, it’s best to name your classes.

Schermafbeelding 2021-06-04 om 09.27.45

3

Thanks @rikmockers - the images are filling the divs in staging now but the core issue is still persisting: When I inspect the image on a 1920px display, the asset shown is a 500px wide image scaling up to 1160px wide even though the original asset is 2560px. Any ideas on why the file itself became lower quality?

Screen Shot 2021-06-04 at 12.23.19
Screen Shot 2021-06-04 at 12.23.19758×406 88.8 KB

4

Might this be because the aspect ratio is off, and you image isn’t able to scale the rest of the way?

5

Hey @mochi-mochi

Looked at your project and I suspect what is happening here is a combination of grid and responsive images. The grid is using fr units and the link block containing the image is using % units. These are both relative units of measure which means that the browser is not using pixel dimensions when it requests the responsive image variant from the server. Meaning the lowest resolution version is likely being served up to the browser which then looks bad because the image is now displayed in the grid and link block which now have calculated pixel dimensions. Hope that makes some bit of sense.

The solution is to introduce an absolute unit of measurement such as px so that the browser can request the appropriate image size. Here are two options to try:

  1. Add a px dimension to the min-width property on the link block
  2. Change grid or link width properties to px dimensions

Hopefully the 1st option will work for you because the 2nd option will require more changes to keep the layout responsive.

Also remember to make the adjustments at each breakpoint. Go to the smaller end of each breakpoint and adjust the min-width as high as possible before it begins to shift the layout.

Hope that helps. Let me know how it goes.

Cheers,
—Matthew

3 Likes
6

Thanks @matthewpmunger - I’ll try out these tips.

For reference in the meantime, it’s strange that the behaviour affects CMS pages differently even though they use the same template and both pages have a hero image with an original size of 2560px width. When viewed on a 1440px display:

  • page A uses an appropriate image size (rendered width: 912px, intrinsic width: 1080px)
  • page B uses a lower resolution (rendered width: 912px, intrinsic width: 500px)
7

Hi @matthewpmunger , I’ve tried this in a few projects and never worked. My only workaround is to disable the responsive functionality for images that are grid Childs. And the problem I’m facing now is that images within symbols do not give access to modifying the responsive option.

Do you have any extra info on this points? Either how to work with responsive images within the grid and /or how to remove the responsive functionality from images within symbols?

thanks a lot