I noticed the compression for the thumbnail image on my Projects CMS template is quite aggressive on the live site, making it quite pixelated. Does any one know a way to improve this? I already tried several dimensions and sizes for the images, but they don’t reach the level of sharpness I want to achieve.
Also, thumbnail images look fine on the Designer interface, which I find a bit misleading.
Uploaded a screenshot of both version of the same image.
Thanks in advance!
Here is my public share link: LINK
(how to access public share link)
Webflow doesn’t compress your main images but it does create “responsive” images for mobile devices. Read up on that… now that you’ve set sizes you may need to regenerate them, or you can disable them in problem areas if you want to.
I went ahead to try to change the responsive attribute just to try out, but as I mentioned, the thumbnail image is being pulled from CMS, so I can’t find the attribute (including the “All Settings” side panel). I also went into the CMS project template but couldn’t find this attribute as well
What confuses me is that, it should render the highest size on desktop screens, right? however this is where it looks the worst. It looks great on mobile!
I have this same issue. It’s also only happening on desktop for me.
I found this article: Best image sizes for websites in 2023: tools, speed testing & FAQ (foregroundweb.com).
It talks about uploading the image in the size needed for best results, so I’m going to try uploading the thumbnail images in the dimensions of the thumbnail container and not adding the original full size image and letting Webflow/browser do the scaling down.
I haven’t tried it yet but I think it will fix it and will let you know if it does when I get around to it.