Streaming live at 10am (PST)

Slow site for background photos

Hi everyone!

I am working on a website which was designed to have many background images. Since I am having issues with how quickly the website loads I wanted to ask 2 questions:

  • is there a way to make the website lighter keeping the graphic intact and mantaining the website structure? (background image)

  • would it be possibile to change the background pictures making it a dynamic element so that when loading it can access smaller pictures and make the website quicker especially on the mobile version ?

Thank you for your help
Ambra


@Amber_Di_Carlo Do you compress the images? Using something like tinypng.com doesn’t change the image quality but does reduce the image size.
I had a look at the published site and you are using all sorts of different image sizes. That makes it harder on you. Pick one with a fitting aspect ratio depending on your design. That will save you a whole bunch of design issues :slight_smile: .
Make sure the size of the image you’re using isn’t too big either. No need for a 3000 by 4000px image :slight_smile:

@sarahfrison Thank you for the answer! :slight_smile: So if I load images with different dimensions but proportionate to each other (for example 1820x980 and 910x490) can I reduce the weight of the pages?

@Amber_Di_Carlo if they’re smaller than your current images then yes, otherwise it’s to get a uniform look and no distorted images

Thank you, i’m optimizing the images as as you recommended, but the main problem is that the whole site was created in many background images with text above. Google doesn’t recognize this format, is there a way to solve this problem without changing the site and can I upload a smaller photo for the mobile version to lighten the site? Thank you!

What do you mean? Why not? This is live text (Not text as part of the image).

About mobile - webflow, for now, support responsive images only for regular images (<img src...) - but you can upload diff image on mobile (manually).

Vote for this wishlist idea:
https://wishlist.webflow.com/ideas/WEBFLOW-I-1073

@Amber_Di_Carlo see @Siton_Systems’s reply :slight_smile:

1 Like

@Siton_Systems thank you for your replay. So how i can upload different image on mobile manually? Now i have make two section for header with different background image (one for desktop and one for mobile, vertical ) and i set “display non or display inline” for the different device, It is correct? Or is there a better way to do it?

Thank you for your Help !!!
Amber

This is wrong.

Same element -

  • Desktop set background imageY (Bigger).
  • Mobile set background imageX (Smaller).

No need for two separate sections.

Thank you @Siton_Systems, i need to use different background image in a dynamic page. Where I can set different image? If i change the image in the section setting (image in attach), the image change in all site version (mobile and desktop) so what am I doing wrong?


Tnks
Ambra

For CMS no way (Use your idea). Anyway compress image (50-100kb) should work fine for both devices.

object fit trick

https://www.w3schools.com/css/css3_object-fit.asp

Another idea is to use regular image with position absolute (Parent relative) (Like this - responsive image feature will work).

how to

wrapper (relative. For the design i set display flex center-center)

image inside (absolute and 100% width/height) - set class object-fit-cover

100% height/width = distort proportion of the image (We fix this later by custom CSS code)

content block (This block give the height for the parent wrapper) - add div inside (Overlay the image):

Last step - fix the distorted proportion of the image:

embed html

<style>
.object-fit-cover{
  object-fit: cover;
}
</style>

Result:

another post:

responsive images:

1 Like

Thank you for your help!!! I solved the problem and i understood a little better how the responsive images work on webflow!!!
Tnksss

Mark as solution to close this topic.

What solved your problem? (object-fit trick?)