Slow site for background photos

[Amber_Di_Carlo]

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

---

3L World - Viaggio di nozze e matrimoni all'estero

[sarahfrison (Sarah - Webflow Expert/mod)]

@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 .
Make sure the size of the image you’re using isn’t too big either. No need for a 3000 by 4000px image

[Amber_Di_Carlo]

@sarahfrison

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 .
Make sure the size of the image you’re using isn’t too big either. No need for a 3000 by 4000px image

@sarahfrison Thank you for the answer! 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?

[sarahfrison (Sarah - Webflow Expert/mod)]

@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

[Amber_Di_Carlo]

@sarahfrison

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!

[Siton_Systems (Ezra Siton)]

@Amber_Di_Carlo

many background images with text above Google doesn’t recognize this format

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

[sarahfrison (Sarah - Webflow Expert/mod)]

@Amber_Di_Carlo see @Siton_Systems’s reply

[Amber_Di_Carlo]

@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

[Siton_Systems (Ezra Siton)]

This is wrong.

Same element -

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

No need for two separate sections.

[Amber_Di_Carlo]

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

[Siton_Systems (Ezra Siton)]

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

object fit trick

CSS object-fit Property

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:

[Amber_Di_Carlo]

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

[Siton_Systems (Ezra Siton)]

Mark as solution to close this topic.

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

[Amber_Di_Carlo]

I uploaded two different image for desktop and mobile version. Sorry for the delay in the response !!!