Webflow built-in slider serves low res images on high res displays?

Design help General
1

Hi, I’m having issues with the built-in Webflow slider not serving a high res image to a high res display (testing with retina display, 27").

Webflow is auto-creating different versions of the image to speed up the site – which is fine, but not when it does not serve the correct image.

<img src="https://assets.website-files.com/5ff4358…/5ff5a27…_Bilde3_2000px.jpg" loading="eager" sizes="(max-width: 479px) 100vw, (max-width: 767px) 93vw, (max-width: 991px) 309.328125px, (max-width: 1439px) 31vw, 413.328125px" srcset="https://assets.website-files.com/5ff4358…/5ff5a27…_Bilde3_2000px-p-500.jpeg 500w, https://assets.website-files.com/5ff4358…/5ff5a27…_Bilde3_2000px-p-800.jpeg 800w, https://assets.website-files.com/5ff4358…/5ff5a27…_Bilde3_2000px-p-1080.jpeg 1080w, https://assets.website-files.com/5ff4358…/5ff5a27…_Bilde3_2000px-p-1600.jpeg 1600w, https://assets.website-files.com/5ff4358…/5ff5a27…_Bilde3_2000px.jpg 2000w" class="image" aria-hidden="true">

In latest Chrome on latest macOS on a 27" 5k display, it serves the 800px wide image, instead of at least 1600px version (if not the 2000px one – I also made the original images 2000px wide). On Safari (exact same display), it serves the 1080 version for some reason.

The maximum width of the slider is 1280px – so I should at least get 1600px version afaik.

I did experiment with using the “hidpi” feature, but it did not change anything. I’ve also seen an option referenced in another post called “responsive image”, but it’s not present in my Webflow interface.

To summarize:

  • Why does it not serve the correct images? And how to fix?
  • Is there a way to disable the responsive image function and/or change the breakpoints of the images?

Thanks.

(I can’t publish the site here atm, but I’m hoping someone has a solution. If need be I could make a duplicate and just show the slider).

2

I think I figured out the reason.

I had the slider in a CSS grid, spanning three columns. It seems like it uses the width value of only the first grid column to define what image to serve. So it thinks it’s 1/3 of the actual size. Taking it out of the grid and/or just have one column solved the issue.

Excerpts from the img tag:

In a three-column grid, spanning all three columns.:

sizes=“(max-width: 479px) 100vw, (max-width: 767px) 93vw, (max-width: 991px) 90vw, (max-width: 1439px) 31vw, 413.328125px”

Without a grid and/or with a single 100 % width css grid column:

sizes=“(max-width: 479px) 100vw, (max-width: 767px) 93vw, (max-width: 991px) 90vw, (max-width: 1439px) 92vw, 1280px”