Slightly Blurry Images on Responsive Web Layout – Common Cause?

Hi everyone,

I'm working on a responsive landing page layout for a small game project and encountered something that seems simple but has me second-guessing.

On certain screen sizes (mostly on high-DPI displays), some of the background images and banner graphics appear slightly blurry or pixelated, even though the assets are high-resolution. This is most visible when using background-size: cover or when scaling <img> elements inside a flex container.

• Exported images at 2x and 3x resolution

• Used image-rendering: -webkit-optimize-contrast (helped a little, but inconsistent across browsers)

• Tried switching between px and % units

• Tested on Chrome, Firefox, and Safari (latest versions)

I even tried a few layout demos to see if it’s just me. For example, this interactive UI sample (made for a side project) shows similar behavior when you resize too quickly or change zoom levels:

It’s a working layout mockup — nothing fancy — just to illustrate how scaling might impact image sharpness on certain sections.
👉 Click Here

Any advice or debugging tips would be really appreciated. Even pointing out something obvious I might have missed would help.

Thanks in advance!

– A web designer slowly going blind from staring at blurry buttons 😅