Streaming live at 10am (PST)

Are background responsive like images

In my site, there are many backgrounds. Are they responsive like “Responsive images” ? I want get my site loaded faster in mobile.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi @Duy_Dang - I was wondering the same thing at one point, and while I can’t find the exact link I found my answer from at the time, I came to the conclusion that Webflow does not automatically serve up the best version/size of background images like it does inline images. That’s why it’s best to optimize your background images, and if you have a lot of background images, it would especially be important!

Probably not the answer you wanted to hear, but hope this helps!

1 Like

@myonke is correct. Webflow does not create responsive versions of images when using CSS background images. Doing so would require art direction decisions that are really not possible automatically.

You as the designer, should be uploading images to use for background images, that are correctly sized and optimized for each break point. It takes quite a bit of work and planning to do this. Probably why many designers just skip the process all together and end up with unnecessary page load dumped on the visitor.

2 Likes

I don’t know if it will really work. Because breakpoints will put tag “display : none” but it seems images with “display : none” will be loaded and only hidden.

This is sometimes true. Depends on the browser. The best write up on this topic I have found is https://csswizardry.com/2018/06/image-inconsistencies-how-and-when-browsers-download-images/

My testing (late 2018) confirms the results provided.