Images looking fuzzy on non-retina screens (possible dpi issue?)

Hi everyone,

Relatively new to Webflow and looking for some help regarding images. In the site builder my images look nice, but once published they look blurry on my second screen (an el-cheapo Benq monitor) but still nice on my Macbook Pro screen. In addition to being blurry, they have an ugly grey line in between the white of the card and the soft shadow.

I asked one of my colleagues (more familiar with Webflow) for help and she suggested I look for and check the ‘dpi image’ setting, but as this image is part of a component, it doesn’t seem to have this option.

I looked at the image class (Image 10 :sweat_smile: ) and turned it on there, but it didn’t seem to make any difference. The image was initially a .webp image, then I have tried a .png (scaled to 2x) and the result was the same.

I also notice when the images are uploaded, they’re renamed, eg:
649300a747972ea344bd07e6_Aviation%20web%20banner%20advertising-p-800.webp
Instead of Aviation web banner advertising.webp - is this part of the problem (that they’re being compressed?)

A thousand apologies if this is a stupid question and thank you in advance.


Here is my site Read-Only: LINK
(READ ONLY LINK)

I am having the same fuziness issues with image properties in components, hope someone can answer this soon.