Images with any text in them are always blurry

https://preview.webflow.com/preview/alexgcreative?utm_medium=preview_link&utm_source=designer&utm_content=alexgcreative&preview=c066b7cb639831449e101e80cc1aa6c8&pageId=627ad6aa65c38c5323708682&workflow=preview

Having major issues with blurry images whenever I upload to webflow. I have a lot of imagery in my case studies that has text in them and I need to be pretty clear and readable but each time I upload, no matter what settings I select on export, it shows up smudgy and blurry.

I already tried unchecking responsive images but it isn’t working. If you look at this page:
https://alexgcreative.webflow.io/connected-chillers-case-study

In the Forming Ideas section, there is an image there that looks smudgy. Any idea how to deal with this?

Hey @cyrezeraser

Yeah if you use PNG’s and the image is 1681x929 and the screen viewport is anything above that, the browser will have a slight blur to the scaling. That’s why it’s best to use SVG’s if you absolutely need the image to maintain perfect clarity. PNG’s are not guaranteed to hold absolute clarity within browser. There’s always going to be some scaling because anti-aliasing can vastly vary between browser.

Where PNG’s get into trouble is when they are exported at, let’s say 1500px. If the device screen is 1920, 2560 and 3440, to accomplish responsiveness that PNG gets scaled up. Now that raster blur occurs. Alternatively, if you start the PNG at 4000, pixelation will be minimal. There’s no way around it.

To absolutely make sure you don’t get pixelated blurriness, use SVG, then use a Div wrapper to control the sizing. Otherwise, go back to the graphics program and export the PNG at a size way above most monitor resolutions. 4000 should be enough. Just make you optimize them before importing into Webflow, the file sizes can be large.

Lastly, you can lock the PNG size using CSS width and max-width. But if the screen size is larger, sometimes you’ll get a small disproportionate image on the page.

Hope this gives you a few options that help.

-G.J.

Hey Gary,

Why would the PNG scale up when its above 1681 if I set the image to be max-width 1681? I also have responsive images turned off on it so it shouldn’t be scaling up higher when my screen resolution is higher.

I’m not sure if I can export these images out as SVG because they aren’t vector graphics, they are screenshots from work I did. They are exported out of photoshop pretty crisp and then when I upload to webflow they get blurry and smudgy. I thought by setting the width of the image and then setting the max-width would fix the problem but it didn’t.

I was trying to avoid saving the image out super huge because like you said, it would be like 2mb an image and I have a lot of them on here.

Hi there,

It’s just the interpolation of a raster image that occurs within the browser. You can never guarantee raster image compression won’t have slight blur on the edges. To make sure that doesn’t happen, you’ll need some code to tell the browser what to do. I forgot the snippet, but I’ll try and find the one I used before.