Image loads 100% width just for a second

Hello,

In my portfolio’s site on the project pages I have a header with a scrolling animation: the header image starts with a little padding on the sides and when the user scrolls down, the image goes full width. While this works fine in most cases, sometimes the image is loaded full-width from the beginning and only pops back to the correct width after a few milliseconds. Other times you have to scroll down for the image to pop back to it’s actual size. It seems like this is especially the case once the user has not visited the specific page before.

The problem is not visible in preview mode, but it is there when I publish the and look at it in the browser (wether it’s Chrome or Safari or anything else).

It seems like a bug. Maybe it’s because the interaction is only loaded after the image is already loaded?

Does anyone know how to bypass this problem?

Thank you in advance!


Here is my site Read-Only: [LINK](Webflow - Werner Hiemstra Nieuwe layout)
(how to share your site Read-Only link)

No it is not a bug.

There is a simple solution that is called Image optimisation. As you can see on your page you have yellow triangle warning, this mean that the image is too big (745kb = almost 1MB). you should never use PNG format on website if you do not need transparent image background as there are better formats. Standard is JPG, modern format WebP or AVIF. WF had some issues with WebP but I do not know if they are solved (check forum about WebP issues)

Generally speaking you can be safe with JPG

here are two examples keeping very large image but using different formats

JPG

WebP

1 Like

Thanks, Stan! This has fixed my problem!

Also a great general tip on using better formats like JPG or WebP. I found out you can even convert your images to WebP directly in Webflow, inside of the assets panel. It reduced the ‘heaviness’ of my site by a lot.

1 Like