Resolving Image Resolution Issues on Component Header 108

Hey guys. I would like to know how to resolve image resolution over Component Header 108. On preview, when the scroll animation scale de image, look awesome, but on published site, the image drop drastically its resolution. Here is the preview link: https://preview.webflow.com/preview/grupoinel?utm_medium=preview_link&utm_source=desig[…]85b240ae4bc130bd2f32be189bdcdc09&locale=en&workflow=preview And published site: https://grupoinel.webflow.io/ Thank you!

31 comments

Markus M.
·
Matías O. Hey Matías I didn’t see a huge difference between the preview and the published site. I’m only on a 16-inch MacBook right now though. Are you talking about header108_image4 in Component 108? Did you try enabling HiDPI for the image?
Matías O.
·
What does HiDPI? Thanks!
Markus M.
·
The HiDPI (High Dots Per Inch) image setting in Webflow is used to optimize images for high-resolution displays, such as Retina screens, which have a higher pixel density than standard displays. When this setting is enabled, Webflow automatically serves images at double the resolution (2x) for devices with higher pixel densities. This helps ensure that images look sharp and clear on these high-resolution displays, reducing the likelihood of pixelation or blurriness. However, using HiDPI images can increase the file size, so it’s a trade-off between image quality and performance (load time). You should enable this setting when you want your images to look crisp on devices like Apple’s Retina displays, but be mindful of the file sizes to avoid slowing down your site.
Matías O.
·
Thank you for the explanation!
Matías O.
·
Hey Markus M. Now im having this problem
Matías O.
·
Preview on mobile looks nice!
Matías O.
·
But this is how it looks on mobile publishes
Matías O.
·
Matías O.
·
The difference is tremendous on preview vs published 😞
Matías O.
·
I’m using .aviff as compressed
Markus M.
·
Can you try uploading the image in a higher resolution, something like 2x of what you have now? 5120 x 2880 or so, and then make sure the width is half of that in the image settings, for example, 2560.
Matías O.
·
Markus M. It’s done but still looks crap 😞
Matías O.
·
Actually im trying without optimizing. A 5mb jpg File
Matías O.
·
on preview looks sharp
Matías O.
·
published looks like a 800x800 resized image lol
Markus M.
·
Did you try clearing your cache?
Markus M.
·
HiDPI is still enabled?
Matías O.
·
Still enabled
Matías O.
·
Opening with Safari
Matías O.
·
the same
Matías O.
·
im using Chrome as default
Matías O.
·
and my client is telling me the same
Matías O.
·
😕
Matías O.
·
should i try compress to aviff?
Matías O.
·
Still looks pixelated on published 😞
Matías O.
·
Matías O.
·
Versus on Preview
Matías O.
·
Current settings
Matías O.
·
Markus M. I fixed it!! After googling, the issue was having “Diable Responssivness” unchecked. After checking it now look sharp af!
Matías O.
·
So i keeped the 2560x1440 aviff, with HiDPI + Disable Responsiveness
Markus M.
·
I am glad that you figured out a solution! :) Thanks for letting me know! Have a great weekend!

Resolving Image Resolution Issues on Component Header 108 | Relume Community