Webflow automatically compresses your image even though the image is already compressed

Community resources
3

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:

  • Set a min-width (in px) for the image in the Webflow Styles panel and change it for the different breakpoints, so that the width matches more or less with the width that the image will have in the responsive behavior.
  • Then set the min-width back to “auto” with custom code. For doing so, put the following code in the “Before closing body Tag” custom code section of your page:
<style>
img {
  min-width: auto !important;
}
</style>

Still, this is not very practical and convenient, just a workaround that is maybe better than nothing :smiley:

1 Like