Blurry header image on blog

hello, the main blog post image for me is coming up blurry. The pixel size of the image should render is clear (1200px wide image) and the max width of the image is 1200px but its still blurry.

I’ve tried changing a few options to no avail.

Any tips appreciated!

Here is my site Read-Only: Webflow -

If I’m understanding correctly, you mean the image under the text “Introducing V3: Your new writing and reflection oasis”? That class, Featured Post Overlay, has a backdrop filter of a 6px blur on it, under Effects at the bottom. Try removing that :slight_smile:

1 Like

Thanks for taking a look! On the blog collection page the blur is intentional :slight_smile:

I’m referring to the blog post page: Introducing V3: Your new writing and reflection oasis | — Your guided journal for wellness and growth.

Its not very blurry just not super sharp… i’m wondering if its a retina screen issue? the issue seems worse on my laptop (retina) than my external monitor (not retina).

any suggestions on how to resolve appreciated thanks again for taking a look!

Ah, I see! It looks to me like Webflow is “helpfully” turning it into a responsive image. I’m not sure why it’s deciding to default to the smallest possible version.

On the linked page, if you go to the gear tab on the right with the blurry image selected, and hit Ctrl + Shft + O that will expose the Responsive Image checkbox, which you can then uncheck. See below. I think that will fix your problem.

1 Like