Hi, I just created my new website but for unknown reasons, my image is just coming out with low quality on the live website compared with the editor. I checked the code, it seems like Webflow just compressed my image to a very low without any reason (the original image size is already very small). Is these any solution for this ?
Image in Editor:
Image in Live:
If you do not have a size set for the image, the browser often cannot calculate how large it will be and it will choose the most efficient option which can be an “optimized low-res version of the image”.
You can turn off responsive images, but mobiles may suffer.
I had the same problem in multiple projects.
Every time I used the CSS grid and put images inside the grid, the images were shown in very bad quality.
As @memetican mentioned, the reason behind it is that if you don’t set a size for the image, Webflow doesn’t know in which quality it should show the images, so it just shows the lowest quality possible.
In my view, this is something that Webflow should work on…
Depending on the layout it is sometimes impossible to set a fixed size for an image (for example inside a CSS grid that has responsive behavior).
Here’s a workaround
When you need the images to act responsive but you don’t want to disable “responsive image” (like @memetican mentioned), you can do the following:
<style>
img {
min-width: auto !important;
}
</style>
Still, this is not very practical and convenient, just a workaround that is maybe better than nothing 
Not Webflow actually, but rather the web browser itself. From what I’ve seen this is actually a web technology issue related to the way sizing is calculated and media srcset is handled by browsers.
There are a ton of other issues like this- competition between flex and pixel layouts, stacking order redefinitions when 3D transforms are used… all kinds of stuff.
Webflow could probably add some hacks to try to minimize this kind of thing, e.g. force images to 100% when a size isn’t specified- but that rather goes against basic design principles because then the designer tool itself is making design decisions and we’d end up having to hack it when it makes a decision we don’t actually want.