Maintaining High-Resolution Images in Horizontal Scroll Sections

would you mind sharing a read-only link?

Hi Matt

Sure, here it is ..https://preview.webflow.com/preview/visuallab?utm_medium=preview_link&utm_source=desig[…]b4a56f740d&pageId=653950a95ef47b62f230e3f4&workflow=preview

what browser are you using?

This is what I see - https://www.loom.com/share/3fa1e7b7840f493b950fa8796d7f8fe6?sid=fe4b6364-0eec-4945-ab7b-4915186c8f99

Yes Matt, in the Read only link version. However, in the published/live version, the image is low quality and pixelated. See https://visuallab.webflow.io/our-projects/ballsbridge-park

And this is the image that is being loaded https://assets-global.website-files.com/65141b75128caabed3343247/65412ed0662376ec0545e628_200301_Ballsbridge_MAR_08-p-1080.webp

However, when you refresh the page, the proper high resolution image loads.. Is there a caching issue?

Thanks

This is the image that should be loaded initially and before refresh https://assets-global.website-files.com/65141b75128caabed3343247/65412ed0662376ec0545e628_200301_Ballsbridge_MAR_08-p-2000.webp

Has this anything to do with it..https://designworx.tinytake.com/msc/ODkzNzEzNl8yMjQwOTEzNQ

When I try and increase the image width it will not allow me to go beyond 1500px

I am wondering if the issue is related to the component interaction being initially set to 50%. Is Webflow initially loading the image based on responsiveness. See this article https://slickmedia.io/blog/fix-blurry-lower-quality-image-webflow
When I switch off responsiveness in the image, it loads the correct resolution. However, this is not ideal..

I'm guessing this issue will most probably be in other similar Relume components. That's concerning for me. Surely there is a fix. If not..?

my loom was of your published URL.

This component specifically has been out for several months now - I've used it a couple of times in client projects. I think its an issue localized to your implementation.

What do you mean by "switch off responsiveness"?

I see now, from the article

I really think that its ironic that the image you are saying that is loading initially is also the same image that is directly below this header 81 section and it also has a timed animation that scales that image up. based on scrolling into view.

Since I can't even reproduce the issue in the first place, its hard for me to say for sure - but I would take a hard look at the section right below it - and if its not even necessary to have, i would delete it and clean up both the styles and the interactions and hope that its resolved. That is likely the next thing that I would check out. Very curious to see how this gets resolved - if after you've removed that section and its still not resolved let me know so we can try other things.

Hi Matt

thanks for getting back to me.

I did a fresh site install and copied across the 81 component. Issue persists.

The image is low quality when scaled up.

See here https://relume-library-136cdd.webflow.io/test

Read only link https://preview.webflow.com/preview/relume-library-136cdd?utm_medium=preview_link&utm_[…]6b756344a2&pageId=655916df7c9a1ab15313185e&workflow=preview

It has to be an issue with the component or perhaps a CDN/caching thing?

It's a pity, I would have liked to use the component.

If you would like to try it yourself, I have uploaded to high res..image I am using..

I think I have figured out the issue. The solution I do not know.

It appears the scale interaction size is initially set to 50%. Webflow then for some reason (Breakpoints?), loads an optimised 1080px image.

I have checked this by changing the initial scale interaction to 80% and Webflow then loads a 1600px optimised image.

So, it appears to be a problem with the component.

It may be ok for some users to have a low quality image loading but it is important for this project to load the best quality optimised image.

Perhaps someone can figure out a solution...

The only solution i can see is switching off Responsive image on that specific image. Can be revealed under Image settings and CTRL+SHIFT+O

The image ofcourse should be optimised as much as possible prior to upload.
The caveat is that on responsive devices like mobile the same image will be loaded for all devices. Not ideal!

Matt

I finally figured out the issue.

It was related to the image being seen by webflow as only 50% width and as a result optimising and scaling image for responsive devices to 1080px width. This was what was causing the degradation of image when scaled on larger devices.

I simply increased the width of container header-content-right from 50% to 70%. It now appears to be loading the image at 1600px.

See here https://designworx.tinytake.com/msc/ODk2NDA5Ml8yMjQzOTgyMA

hmm seems odd still. Why would webflow care if the container was at 50% versus 70%? Why were you seeing the degradation and I wasn't?

I mean I'm glad we're heading in the right direction but the setting you changed is CSS, and what you are saying was done, is server-side (webflow serving up a responsive image) - I just don't see the connection there

its mostly just my natural curiosity to dig further so its not a HUGE deal if this just remains a mystery to me and my lack of understanding - I'm in acceptance of that.

Dont know..
One second

and very thankful you came back in here to share what you found too so yeah

Have a look at what I mean

https://designworx.tinytake.com/msc/ODk2NDEwNV8yMjQzOTgzMw

Im guessing the guys at relume have set it at 50% default as the higher you set the header-content-right width, it begins to obscure the contents (text) ofheader-content-left

You probably couldnt see tne image link but at 50% https://assets-global.website-files.com/65141b75128caabed3343247/65412ed0662376ec0545e628_200301_Ballsbridge_MAR_08-p-1080.webp

At 90% width
https://assets-global.website-files.com/65141b75128caabed3343247/65412ed0662376ec0545e628_200301_Ballsbridge_MAR_08-p-2000.webp

do you have large screen breakpoints in your project?

lol..just checking.. issue may not be resolved!

No, 1400px is the largest

Why?

wait, so you do have a large breakpoint?

https://designworx.tinytake.com/msc/ODk2NDEyM18yMjQzOTg1MQ

the laptop icon with the star is the baseline breakpoint. So do you have any other breakpoints above that?

okay

did you use the built in image asset compression in webflow?

yes

okay

I uploaded a very high webp version..about 3mb

now we're starting to get somewhere

before you did the compression, can you send me that photo by chance or?

Image quality is super important for this project

Sure

yeah I can see that, super badass website here and these image assets are awesome

Ya..its a Xmas present for my brother. Hes a 3d artist

so the original file you uploaded to webflow, was in webp format?

y7es

wow a family of artists!

Dunno..the other brother is a programmer for the banks. Dont know if that is artistry. maybe the dark arts

haha oh for sure - programming/development/engineering is an art....in its own right.

so you uploaded this photo that you sent me, its 3000x2626 - 1.5MB in WebP format. After you uploaded this photo, you used the compress tool to make it even smaller yet.

I'm wondering since its kind of odd to compress a webp format file, if you'd have different results if you took this original file and converted it back to jpeg, and used some other tool to compress it to webp? Or upload the jpeg to webflow and then used the compress tool?

Its more likely to me that Webflow would do something with this image because of its size both file size and pixel size - because it costs them money to process this image so they are trying to reduce that cost by serving up different sizes based on where its going possibly.

But if the image was reasonable - say 2400xwhatever and say less than a 1mb after you compress it, if Webflow would leave it alone?

because the fact that you have two different image URLs for the same "asset" tells me that webflow has some sort of hidden agenda to serve up different assets to save on their processing. That's kind of how CDNs and server-side image processing works. They work to be more cost effective and efficient. So we have to trick them into thinking that this super high res photo is fine - and do the compression BEFORE we upload to Webflow. If that makes sense?

are there any other images this size, that take up the full screen like this, where you see degradation? If not, than my theory is even more feasible.

No..

I dont think that is necessarily the issue.

Webflow automatically compresses images for the different breakpoints. Ie desktop 1600px or above, tablet at 1080px, mobile 768 etc

Yes they compress the images not I think they are serving the image as 1080px because they originally see its size as being half the screen size (perhaps small desktop or tablet)

they then serve this image as the most optimised image for the device that they think they see

Im guessing it is the webflow compression algorithm that is doing this

though I agree that they want to compress the image as much as possible to minimise bandwidth usage.

yeah idk

I dont think their server-side rendering is going to know a CSS property

but who knows

a device, sure

I had this issue with video files I uploaded. The compression was crap.
So, instead I served videos directly from Vimeo. The quality was far better

..and quick loading

but by your logic, you are on a desktop, it shouldn't be serving a degraded image

oh yeah, videos are a whole other ballgame

and webflow is awful at compressing them

Have you checked out Timothy Ricks YT channel T.ricks?

He is a magician

oh yeah, for sure

He has an excellent tutorial on vimeo integration

I live and breathe webflow. 😂

Yep for sure, I’ve used it and it works great.

..but back to my point. I think it is a breakpoint issue. Webflow are seeing the initial image width as only 50% and serving it accordingly.

It cant be anything else. The moment I increase image container from 50% to 70%, the image changes from 1080px to 1600px respectively... and when I increase the image container to 90% it changes the image size to 200px

*2000px

but changing the width of a container that is holding an image from 50% to 70% is not changing the breakpoint?

I'm on a 5K Apple Studio Display - so maybe by having that large breakpoint option enabled, its causing this serving of different images then or?

don't think the screen matters either and I could have sworn I resized my browser.

Not sure..
Remember also regarding the file size uploaded to Webflow. They do not have webspace limits. Only bandwidth limits.
If you go over that limit, you have to move to a higher tier..so, you could argue that Webflow would prefer not to compress the images.