Based on the screen's pixel density (DPI) and resolution, Windows scales images and other UI elements to maintain physical sizing across devices. We recommend that you make your app scaling aware by providing multiple versions of these assets so that they retain quality across different scales. If you don't provide multiple versions, Windows will stretch your assets by default.
This scenario demonstrates different methods you can use to ensure that Windows loads the correct asset depending on scaling. It also shows what would have happened if you hadn't provided multiple assets. You can choose a scaling method based on your app's specific scenarios. Use the descriptions below as a guide. In some cases, you might want to use multiple methods.
Note: Use the simulator to view this scenario at different scales on the PC. For the 100% scale, use the 10.6" 1366x768 resolution setting. For 140% use 10.6" 1920x1080 and for 180% use 10.6" 2560x1440. Other scales are possible on phones and other devices.
![]() |
Not scaling aware (not recommended) |
If only one version of an asset is provided, the app is not scaling aware. The asset is distorted at scales other than 100%.
|
|
![]() |
Scaled packaged assets |
The framework can select an asset from your package based on the current DPI. Include multiple versions of each asset using the following naming convention: image.scale-100.png, image.scale-140.png and image.scale-180.png. When you use "image.png"
within your app, Windows will select an asset based on the current scale.
The HTML framework selects the image when the app is launched and will sometimes change the asset if the scale changes (for example, if the app is moved to a different monitor). In particular, when an image resource is used with a CSS background-image style, it will be reloaded automatically by Windows. An img element, however, is not automatically reloaded. To ensure that your app retains the best display when used in multi-monitor configurations, a small amount of code is needed to make resources in img elements reload. scenario1.js shows how this is done for the image above. Note: Text has been added to the image above in order to make clear which version of the image is loaded. |
|
|
Scalable Vector Graphics (SVG) |
Instead of including multiple bitmap resources, vector graphics can also be used to make the app scaling aware. Include a single .svg asset and it will retain its quality regardless of scale factor.
|
|
Scaled external assets | |
If you load images that did not come with your app's package or resource pack (e.g. downloaded from a web server), then you must use the RawPixelsPerViewPixel value to select an appropriate image. Example: |