Performance tip Images: Difference between revisions
Jump to navigation
Jump to search
AutoSpider (talk | contribs) (Remove non-functioning "toc" command) |
(Cleanup) |
||
| Line 1: | Line 1: | ||
{{ | {{LangSwitch}} | ||
[[Category:Developing_with_Qt::Qt Quick]] | [[Category:Developing_with_Qt::Qt Quick]] | ||
[[Category:Developing_with_Qt::Performance Tips]] | [[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 == | == 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. | 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. | ||
| Line 16: | Line 12: | ||
== Load large images asynchronously == | == 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. | ||
| Line 23: | Line 17: | ||
* 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. | * 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. | * 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 QML. Use images that are in their native size rather than resize/scale large images to correct size. | 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 QML user interfaces. | Images are often the greatest user of memory in QML user interfaces. | ||
| Line 42: | Line 31: | ||
* 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 55: | 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 65: | 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