Planned maintenance has been done but it did not solve the problem. So work will continue on this and a new time for trying updates will be announced asap.

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



  • 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:
    0_1565205188580_Screen Shot 2019-08-07 at 3.04.33 PM.png

    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'
    }
    
    

    0_1565205055789_Screen Shot 2019-08-07 at 3.04.12 PM.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'
    }
    

    0_1565205168884_Screen Shot 2019-08-07 at 3.03.45 PM.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!


  • Lifetime Qt Champion

    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 ?



  • 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.

    0_1565206468404_Screen Shot 2019-08-07 at 3.32.24 PM.png

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


  • Lifetime Qt Champion

    I meant width/height.



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



  • 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!

    0_1565271161791_Screen Shot 2019-08-08 at 9.29.09 AM.png



  • @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.



  • 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


Log in to reply