Performance tip Images

[toc align_right="yes" depth="3"]

English Български

Bitmap formats vs. vector graphics formats

Images can be supplied in any of the standard image formats supported by Qt, including bitmap formats such as PNG and JPEG, and vector graphics formats such as SVG.

However, rendering an SVG is slow compared to a bitmap image.

Load large images asynchronously

The UI is blocked if you load images synchronously. In many cases images do not need to be visible immediately, so they can be lazy-loaded.

• You should load images asynchronously in a separate thread if an image doesn't need to be displayed immediately. This can be done by setting QML Image asynchronous to true. This way the user interface stays responsive.
• Note that this property is only valid for images read from the local filesystem. Images that are loaded via a network resource (e.g. HTTP) are always loaded asynchronously.
• More info: http://doc.qt.nokia.com/latest/qml-image.html#asynchronous-prop

Avoid resizing/scaling

Resizing/scaling is a very heavy operation in QML. Use images that are in their native size rather than resize/scale large images to correct size.

Use sourceSize with large images

Images are often the greatest user of memory in QML user interfaces.

• sourceSize should be used with large images because property sets the actual number of pixels stored for the loaded image
• If you have a HUGE image 3264 x 2448, but you set sourceSize 204x153, then it scaled down and will be stored as 204x153 in memory
• If the image's actual size is larger than the sourceSize, the image is scaled down. This way large images do not use more memory than necessary.
• This is especially important for content that is loaded from external sources or provided by the user
• Beware that changing this property dynamically causes the image source to be reloaded, potentially even from the network, if it is not in the disk cache
• More info on Image::sourceSize property: http://doc.qt.nokia.com/latest/qml-image.html#sourceSize-prop
• Images are cached and shared internally, so if several Image elements have the same source, only one copy of the image will be loaded. More info: http://doc.qt.nokia.com/latest/qml-image.html#source-prop

Enable Image.smooth only when necessary

Enabling Image.smooth is bad for performance. Use images in their natural size or disable smooth filtering in animation.

• Image.smooth property causes the image to be smoothly filtered when scaled or transformed
• Smooth filtering gives better visual quality, but is slower
• If the image is displayed at its natural size, Image.smooth has no visual or performance effect
• If you really need to enable Image.smooth, disable smooth filtering at the beginning of the animation and re-enable it at the end of the animation (scaling artifacts are only visible if the image is stationary on the screen)
• More info on Image.smooth property: http://doc.qt.nokia.com/latest/qml-image.html#smooth-prop

Avoid composing an image from a number of elements

It is more efficient to compose an image from a single image than from a number of elements.

• For example, a frame with a shadow could be created using a Rectangle placed over an Image providing the shadow
• It is more efficient to provide an image that includes the frame and the shadow
• More info: http://doc.qt.nokia.com/latest/painting-imagecomposition.html