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.



Foreground image (img tag) with scale variants

projector with scale caption

Background image (CSS background property) with scale variants

Foreground image (img tag) with scale and language variants

projector