Community forum for knowledge and support

Updated last year

Optimizing Background Images for Responsive Design in Webflow

At a glance

The community member is starting to learn Webflow and is concerned about using background images, as they may not be the best practice for SEO. They are looking for a tutorial or strategy to ensure that their background images (not images wrapped in a div) are properly resized for tablet and mobile viewports to improve loading times.

The comments explain that Webflow automatically generates different image sizes and uses the srcset and sizes attributes to let the browser choose the correct image based on the viewport. However, this is only for embedded images (standard img elements), not for images set as backgrounds.

The community members confirm that Webflow does not automatically resize background images, and the advice is to avoid using background images and instead use the Webflow Image element, which will ensure that no large images are loaded on mobile devices.

Hi Lumers! I am just starting to learn Webflow. From what I understand, using background images is not the best practice as far as SEO is concerned. However, at times, I find myself using background images as they are easier to work with. Does anyone have a tutorial or a strategy for ensuring that my background images (not images wrapped in a div) get properly resized for tablet and mobile viewports to improve loading times? ANY HELP or advice will be very very appreciated!

A
r
9 comments

Without webflow you would normally generate different images with different sizes and then use the srcset and sizes attributes on the img element to let the browser choose the correct image based on the viewport. Webflow generates these attributes and images automatically

As you can see in the image

So this checks for example if the max screen width is 479px, it takes the image in the srcets

closest to 87vw (viewport width)

so on mobile it will take the image that has 500 width

Hey Angelo, thank you for the clarification. Just to confirm, you are talking about the embedded images (images in a div) as opposed to images set as a background in a div, right? From my understanding, Webflow only does automatic image resizing for embedded images, not for background images. Or are you saying that Webflow does this for both embedded images and background images? A massive thank you in advance!

No not for images set as background. That is not possible, not in webflow or any other webpage.

The term 'embedded image' is wrong tho. If you put an Image element in webflow this is a standard img html element.

But this doesn't really matter anyway, just don't try to use images set as backgrounds. Use the webflow Image element. This way webflow will make sure no big images are loaded on mobile devices.

Add a reply
Sign up and join the conversation on Slack