In Webflow designer, my images look sharp. Once I upload/publish my project, they are low quality and look blurry. I am using Chrome. (Same issue on Safari). It seems the image that is uploaded on the server is low quality, even though the image has a 2400px width resolution and is sharp.
BUT I am not using CMS to pull images. I am simply using an Image box (not background). I don’t have the option to uncheck “responsive image” (or at least I do not see it in the same spot).
I don’t find it particularly blurry but I see 2 issues regarding your image quality:
the image is not shown at 1:1 scale on your site, but is shown smaller. So the redimension happens on the fly and made byt the browser. This usually result in less than ideal quality. make sure your images are shown at the exact dimension they have.
your base image is very large and compressed as a jpeg to 37ko. This is a lot, the image has many compression artifacts already, and that’s probably has an effect on point 1.
How do I ensure that that the images are shown as the exact dimensions?
The jpg that I export from photoshop is around 450kb, so I am not sure why it is 37kb on webflow.
Note that I exported all the images as PNGs (to see if it would make a difference) and the problem seems to be fixed, but I don’t know why it is fixed… perhaps they are not reduced in quality when published?
@Mark_Iris I think it’s because of Vincent’s pt nr 1, the resizing. I could not figure out a way to make it work. I am now using sliders in my portfolio and I am not having issues at the moment.
@dram I’m having the same problem, however, CTRL+SHIFT+O does not seem to work nor do I see responsive images checkbox in the image settings Your thoughts are appreciated!
I am running into this issue as well, but showing images at the exact dimensions they are saved is unrealistic when considering responsiveness. How can you do this while accounting for images changing sizes when the browser resizes?
I just fixed this issue.
Press CMD-Shift-O and unselect “responsive images” in the element section for all images. Strange that this is hidden initially but it works…
I spent several days troubleshooting thinking my Figma files were corrupted because of the hidden “responsive images” button making all of my images blurry.
Please for the love of all that is UX make this checkbox appear by default instead of requiring a keyboard shortcut! This will save people from enduring many bad confusing experiences…
I have done a bit of digging on this issue and I got to result I was after.
All of the product thumbnail and main images were looking a bit blurry and the client was comparing to the old wix site, (wix does a good job with image resizing) and they looked much more crisp and clear so this really put the project on hold and some emotions were flying around about it. SO what I did was create a new custom field in the product for product thumbnail and uploaded the render size of the category page image, to find the render size right click on the image and inspect you should see a render size and a image size, you want the image size to be the same as the render size. This got the image to look as good as the Wix site and got the approval from the client. same for the main product image find the desktop render size and upload it at the same size and it is 20% better than a resized image.
This method only works for the 1 device size, meaning if the image reduces size for mobile or other screen sizes then it will be reduced and loss some of the final finishing quality. But this is really for desktop only because of the comparing side by side on 1 screen is why I’m trying to solve this issue.
I tried all the other methods and this was the only one that worked.
I am having the same issue, my large images are blurry when I use the img element, but then I set them as the background image there is pretty much no issue.
However, I am not sure how to set the background image to stay loaded as it seems to have lazy load applied and can take a while when loading the page which is not ideal for a hero image!
This is the absolute worst thing about Webflow, that they clear don’t listen or care about fixing things that the community has been asking for for years…
Your thoughts are appreciated!
