Streaming live at 10am (PST)

How to implement a responsive image-slider without using background image

Hi there,

we have been encountering page speed issues when using background-images for our image sliders.

Our intended solution was to remove the background images and simply place a normal image element inside a div within the slide tag to make sure webflow can serve the images in the right resolution automatically.

But we havent been able to implement it properly because of a number of responsiveness problems.

Does anybody has implemented a slider with images that arent background image but normal image tags instead?

Best regards

PS: This is our page

If you have page speed issues it’s likely just because you didn’t properly prep your background images for the web. I usually set them to 2000px wide jpeg set to medium or high until the size is under 300k from export for web in photoshop. Then drop them into to get them even smaller. Never had issues since. Currently your images are almost 1mb. Which explains why.

1 Like