Images and other file resources can be loaded based on scale factor, high contrast mode, user language and other dimensions. All file references in HTML, CSS or code can be virtualized to pick up the most appropriate image based on the current context of the application.

The images below are loaded using img tags or the CSS background property. In each case, a logical image reference is used that excludes any scale or other qualifications (e.g. images/projector.png), but a physical image in the package with specific scale or other qualifications (e.g. images/ja/projector.scale-100_contrast-black.png) is loaded. The physical files can be qualified using folder names (e.g. en-US/) and/or filenames (e.g. name.contrast-black.png).

To see a different image, follow the instructions below, and re-start the app.

• To change the user language preference, go to PC Settings > Time & language > Region & language, and add a language that is supported by the app (de-DE, en-US, fr-FR, or ja); then move the new language to the top of the list (Set as primary).
• To change the scale factor, run the app on different systems (or a multi-monitor system) using low-DPI and high-DPI displays, or use the Visual Studio simulator.
• To change contrast, go to PC settings > Ease of access > High contrast and select a theme.

Foreground image (img tag) with scale variants

Background image (CSS background property) with scale variants

Foreground image (img tag) with scale and language variants