qmliconsblurry

Icons and images look blurry


For my frameless QML app, I made close, minimise, and maximize icons in MS Paint (28×28 pixel art), and then added a transparent background with photoshop. I put them as icons on QML buttons, but they are looking blurry, even when disabling antialiasing, mipmaps, smoothing.

I want them to look pixelated, but It appears that QML uses linear scaling for images, but for pixelated looks, I need the "nearest neighbour" scaling.

How can I use nearest neighbour in QML?


Solution

  • It turns out that for nearest neighbour upscaling, you need to set smooth: false (and for downscaling, you need mipmaps as well) + remove sourceWidth and sourceHeight from your QML code.

    (Sometimes Qt Creator turns it on by itself and this option is basically compressing image resolution)

    But in my case, the problem was that MS Paint in Windows 10 doesn't use solid colours. It uses solid colours in the middle and increases transparency towards the edges of strokes.

    And that creates the blurry effect when viewed on small icon.

    Simple Solution: Install Windows 7 and use its MS Paint. Or just use some other program.