I am setting the main image on a set of collection pages via the collections image field.
It is a very wide rectangle.
Here’s an example of one of the images.
For mobile sizes, I am trying to switch the image to a different one than the desktop. I only want the center section of each. I don’t want to load the entire image because it’s 5 times wider and just slows the page down. Here’s an example of what would be visible:
My goal is to reduce the size and loading time on mobile devices.
I created 2 image fields in the collections panel, one for desktop and one for mobile. I can’t figure out how to switch to load the mobile ones on the mobile size.
If I switch the image here, it switches it on all screen sizes.
Any ideas how to set it up with the collection fields?
I can set up 2 divs and do display none but the browser will still load both images and I want to cut down on the load time. Is there a way to stop the desktop image from loading in the background?
Here is my public share link: Webflow - Kickstand Insurance