Streaming live at 10am (PST)

Change background image per breakpoint on Collection Page (Images come from Collection item)

Hello Community

I have a collection page with a hero image. the image is a background image and comes from a collection item. At the moment, the same image that is loaded on desktops is loaded on mobile. of course, this is much too big and gives poor performance …
I have added more images to each collection item for mobile, tablet and small desktops. But it seems that I can only choose one that will be displayed on all breakpoints.

Is it possible to display another image from the same collection item on mobile (or just in any other breakpoint)?

Can I display different sized images (as background images) from a collection item depending on the breakpoint?

Greetings

Hi @huberthemp! Can you share your read-only link?

The solution here sounds like it would be to avoid a background image altogether. Instead, you can just use an absolutely positioned img inside your section. Then place another absolutely positioned div with a higher z-index over that. If that makes sense, awesome! If not, hit me with your read only link and I can help ya out!

hi @myonke,

thanks for your reply! here is the link Webflow - Sinceritas

The image in question offers no added value in terms of content and serves only decorative purposes. Thus, I would prefer the integration as a background image.

I had already considered the solution you suggested as an alternative. In the meantime, I have implemented it this way.Unfortunately, I still can’t determine which image from the collection should be played in which breakpoint.

Since I no longer use a background image, Webflow starts its automatic responsive image magic and adds a src-set to the images. Unfortunately, this does not bring any improvement at all. The large image is still transferred to mobile devices.

Is it possible to edit/overwrite the predefined src-set values?

Hello @huberthemp,

Just out of curiosity, how did you test what image was loaded on the mobile device? I set up a demo with a similar solution to what @myonke suggested, using display none instead of z-index. It loads the correct version in both Chrome (iPhone/iPad responsive version) and iOS Safari (inspected with Safari on MacOS). Safari on iOS still seems to load all the images (desktop, tablet and mobile) but it loads the correct (smallest) version of each. Total load is still much smaller than just loading one high res image and it seems to load the correct image first.

https://preview.webflow.com/preview/image-loading?utm_medium=preview_link&utm_source=designer&utm_content=image-loading&preview=e79e4ee43a2b5cc54818128b29157702&mode=preview

Note that I purposely set up my demo to use different images in each breakpoint. If you simply want to use scaled down versions of the same image you don’t need any breakpoint logic and can simply use one image and let Webflow resize it for you.

Using background images

However if you still want to use background-image you should be able to do something like this:

  • Create three divs inside your hero, one for each breakpoint, give them the same class (eg. {Hero Image})
  • Style them so that they fill the entire hero (position: absolute etc. etc.)
  • Add a separate combo class to each, based on the breakpoint (eg. {Hero Image}{Desktop} etc.)
  • Add the correct image field as background image to each of them (based on the combo class)
  • Set visibility of each Combo class to only show up on in the correct breakpoint (using display block/none).

Hidden elements with background-image should not load the image. This does seem time consuming however so if the images doesn’t have any other requirements based on the screen size (eg. portrait ratio on mobile) one responsive image should be enough and much easier to maintain.

Hi @ollebrickarp,

thanks for your reply.
I connect my iPhone to my Mac and run Safaris dev tools (network tab) to see which image is loaded on the phone.

Not sure if display:none is helpful since all images would load but only one is displayed.
Did your images (in the example) come from a collection item?

simply use one image and let Webflow resize it for you.

This is the current implementation. I have 1 Image and webflow scales it down and generates smaller versions. On my iPhone 11 a 1080px width image is loaded (iPhone 11 viewport is 414px width).

In general, images (or images inside elements) set to display:none will not be loaded by the browser.

The reason why your phone uses a 1080px is probably because that’s the closest version to your screens actual resolution (which is 828px). It’s more important to focus on the image file size rather than the pixel size however. You could certainly optimize these images further manually and the actual size also depend on the contents of the image and its file format. In my test the 1080px wide image is about 138kb which I think is okay.