OpacityMask reduces Image quality

ccatterina

Hi,
I'm developing a KDE widget in QML (Qt6.8.2), in the widget there is an Image that is downscaled to ~50 pixels square.
The resulting image has a decent quality, but when I apply an OpacityMask to create rounded borders, the image becomes a little more blurry.

Here's my code:

    Image {
        id: imageComponent
        visible: type === PanelIcon.Type.Image
        anchors.fill: parent
        sourceSize: Qt.size(root.size * Screen.devicePixelRatio, root.size * Screen.devicePixelRatio)
        source: root.imageUrl
        fillMode: Image.PreserveAspectFit
        
        onStatusChanged: {
            imageStatusTimer.restart()
            if (status === Image.Ready) imageColors.update()
        }
        onVisibleChanged: {
            if (status === Image.Ready) imageColors.update()
        }

        layer.enabled: imageRadius > 0
        layer.effect: OpacityMask {
            maskSource: Item {
                width: imageComponent.width
                height: imageComponent.height
                Rectangle {
                    anchors.fill: parent
                    radius: imageRadius
                }
            }
        }
    }

Screenshots with/without rounded borders (the difference is less visible here, probably due to the quality of the screenshot):

Could someone help me to understand why it happens and to find a solution?
Thank you!

Shankarlinga M

@ccatterina Try increasing the device pixel ratio scaling factor slightly.

ccatterina

Hi @Shankarlinga-M, I noticed that the display scale option was set to 120%. Setting it back to 100% resolves the issue. Is there a way to make the image appear clear regardless of the display scale? Thank you so much!

Shankarlinga M

@ccatterina Use a hardcoded pixel size for sourceSize rather than relying on relative scaling:
sourceSize: Qt.size(128, 128)

ccatterina

@Shankarlinga-M sorry for the late reply and thank you.

Indeed, I found that the issue is related to the fact that the Screen.DevicePixelRatio is rounded up. When I set the display scaling to 120% the value of Screen.DevicePixelRatio is set to 2 instead of 1.2. Replacing Screen.DevicePixelRatio in the code with 1.2 makes the image look fine.

I found also an other thread about this issue https://forum.qt.io/topic/160425/wayland-and-fractional-screen-scaling-reported-as-integer-by-wayland-info-and-q-screen/3