Qt wiki will be updated on October 12th 2023 starting at 11:30 AM (EEST) and the maintenance will last around 2-3 hours. During the maintenance the site will be unavailable.
Performance tip Images: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
(Cleanup) |
||
| (4 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
{{LangSwitch}} | |||
[[Category:Developing_with_Qt::Qt Quick]] | |||
[[Category:Developing_with_Qt::Performance Tips]] | |||
Note: See also [http://doc.qt.io/qt-5/qml-qtquick-image.html http://doc.qt.io/qt-5/qml-qtquick-image.html]. | |||
== 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. | |||
==Load large images asynchronously== | 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. | 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 | * 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. | * 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. | ||
==Avoid resizing/scaling== | == Avoid resizing/scaling == | ||
Resizing/scaling is a very heavy operation in | 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== | == Use sourceSize with large images == | ||
Images are often the greatest user of memory in | 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 | * sourceSize should be used with large images because property sets the actual number of pixels stored for the loaded image | ||
* If you have a | * 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 | * 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 | * 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 | * 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 | ||
* Images are cached and shared internally, so if several Image elements have the same source, only one copy of the image will be loaded. | |||
* Images are cached and shared internally, so if several Image elements have the same source, only one copy of the image will be loaded. | |||
==Enable Image.smooth only when necessary== | == 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. | Enabling Image.smooth is bad for performance. Use images in their natural size or disable smooth filtering in animation. | ||
| Line 39: | Line 41: | ||
* If the image is displayed at its natural size, Image.smooth has no visual or performance effect | * 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) | * 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) | ||
==Avoid composing an image from a number of elements== | == 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. | It is more efficient to compose an image from a single image than from a number of elements. | ||
| Line 47: | Line 48: | ||
* For example, a frame with a shadow could be created using a Rectangle placed over an Image providing the shadow | * 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 | * It is more efficient to provide an image that includes the frame and the shadow | ||
Latest revision as of 21:14, 28 June 2015
Note: See also http://doc.qt.io/qt-5/qml-qtquick-image.html.
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.
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
- Images are cached and shared internally, so if several Image elements have the same source, only one copy of the image will be loaded.
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)
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