Skip to main content

Relume Community Icon

Home

Announcements
Feedback
Figma Support
General
Showcase
Webflow Support

Powered by Tightknit

Resolving Image Resolution Issues on Component Header 108

·Sep 12, 2024 03:36 PM

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

· Sorted by Oldest

Resolving Image Resolution Issues on Component Header 108 | Relume Community

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