Why is QML Image taking up so much memory? Slowing down application

[Edwin F.]

My Qt Quick application is slowing down and consuming way too much memory when I load Images. I am loading around 5 PNG images that are large, about 50MB each.

See the size here:

Before loading the Images the memory consumption of the app is about 300MB, not too bad...Then when I load the 5 Images it jumps to 4.4 GB and stays there! ( I tried calling gc() on completed, it did nothing)

So I did some experiments. I wrote this basic application, just a QML Image. I executed without an image source, and the memory was 28.7 MB, This is a screen capture from Mac's 'Activity Monitor'

import QtQuick 2.12
import QtQuick.Controls 2.3

Image {
    id: imageId
    anchors.fill: parent
    fillMode: Image.PreserveAspectFit
    anchors.centerIn: parent
    //source: 'test_images/1.png'
}

When I added the 50MB image as the source the memory consumption jumped to 1.39GB and stayed there! Even after gc() which did nothing...

import QtQuick 2.12
import QtQuick.Controls 2.3

Image {
    id: imageId
    anchors.fill: parent
    fillMode: Image.PreserveAspectFit
    anchors.centerIn: parent
    source: 'test_images/1.png'
}

What is happening to this Image object to make it consume 1.39GB of memory! The image is only 50MB! This is the root of my problems with my app and it is making my application almost unusable. This is a major problem for the QtQuick platform. Any comments or suggestions on how to resolve this? Thanks!

[SGaist]

Hi,

What version of Qt are you using ?
What size are your png ?

You do realize that the png format is compressed and that to show it on screen, it must be uncompressed and changed to something that can be shown on screen like for example RGBA ?

[Edwin F.]

I am using QT 5.12

As shown in the attachment my image is only 51.9MB.

Using Mac's default image viewer 'Preview' the memory for opening this same image is 400MB.

This QML Image as take up more than 3 times that. What is happening?

[SGaist]

I meant width/height.

[IntruderExcluder]

Can you add sourceSize: {width: width; height: height} to your image? Just post results.

[Edwin F.]

Thanks for the feedback guys,

@SGaist
The width height of the actual image is:
width = 11000
height = 11000

@IntruderExcluder
I tried what you suggested and set the sourceSize to the width/height of the image like so

import QtQuick 2.12
import QtQuick.Controls 2.3

Image {
    id: imageId
    anchors.fill: parent
    fillMode: Image.PreserveAspectFit
    anchors.centerIn: parent
    source: 'test_images/1.png'
    sourceSize: Qt.size(imageId.width, imageId.height)

    Component.onCompleted: {
        console.log('width: ' + width)
        console.log('height: ' + height)
        console.log(imageId.sourceSize.width)
        console.log(imageId.sourceSize.height)
    }
}

Terminal Output:

...
qml: width: 11000
qml: height: 11000
qml: 11000
qml: 11000

Now after adding that sourceSize line the memory usage is down from 1.38GB to 30.9MB ! What kind of sorcery magic is happening here? Is this because without setting sourceSize the maximum possible image space is used in memory? However although the memory usage is drastically lower, the responsiveness seems to decrease, it becomes more 'choppy'/'glitchy' when resizing the window. Whereas before, without setting sourceSize the resizing happens very smoothly, probably because the ENTIRE image, with all 11000x11000 pixels are already loaded in memory?

Thanks!

[IntruderExcluder]

@edwin-f said in Why is QML Image taking up so much memory? Slowing down application:

Is this because without setting sourceSize the maximum possible image space is used in memory?

Sort of, but I still dunno why Qt takes so much memory. Was it debug or release version of app?

@edwin-f said in Why is QML Image taking up so much memory? Slowing down application:

However although the memory usage is drastically lower, the responsiveness seems to decrease, it becomes more 'choppy'/'glitchy' when resizing the window.

This is because everytime window size changed image should be rescaled from its source. You should use some delayed rescaling, or maybe use Qt.callLater.

[Edwin F.]

Thanks for the suggestion I'll look into the Qt.callLater

Right now there is no concept of debug vs. release mode because I am not compiling. I am using Python backend with QML frontend and PySide 2 for the communication between the two