Blurry Images after Publishing

[Alexander_Richter]

Hey guys,

this topic has been often in the forum but all the proposed fixes don’t work for me…
The problem is an blurred image within a grid with 100% hight settings - so it aligns with the content hight of the text:

So I fixed this by unchecking the box “responsive image” - works on chrome:

but now it displays the sharp image on safari like this:

Now I’m pretty near to a nerve breakdown due to already overdue project launch.
Some magician here who can fix what webflow dev team should have fixed 5 years ago?

Big thanks in advance - Alex

---

Here is my site Read-Only: [LINK](Webflow - perma.gold)

[Schuschi_Eyes (Martin S.)]

Hey Alex

This might help you here:

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

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 imag…

Its not a perfect solution, but maybe you can use it as a workaround just for now…

[Schuschi_Eyes (Martin S.)]

And here’s a second, simpler solution if you’re okay with disabling responsive images.

To fix the height difference between the image and the blue text element, do this:

But keep in mind that the “Align” setting is only set per element and not for all elements with the same class (thats why “Align” is shown in purple and not blue). So you would have to make this setting manually for all those elements.
To set the alignment for all elements with the class .feature-content-wrapper, put this code in the “Before closing body tag” section:

<style>
.feature-content-wrapper {
	align-self: stretch;
}
</style>