Defining app resources (HTML)

[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]


Windows is used worldwide, on a variety of different machines and form factors. It is vital to design your apps so that resources, such as strings and images, are separated from the code. This enables the app to be independently maintained and localized, and also customized for different scaling factors, accessibility options, and a myriad of other user and machine contexts.

App developers should separate resources from code, and use the resource management system in Windows to handle the selection of the most appropriate resources that best match a particular user's runtime environment. This enables:

  • The display of different resources based on different configurations and user settings for language, region, DPI, and other form factors.
  • Increasing the reach of your app to audiences that vary in culture, region, or language by providing resources tailored to each audience.
  • The ability to localize resources separately from the code, so that translators do not need to be able to compile your code. This minimizes the potential for bugs to be introduced during localization.
  • The ability to maintain the code separately from the content of the resources. This permits code to be fixed or enhanced in a single code base, with a minimum of risk of altering localized content.

There are two types of resources:

  • File resources are simply resources stored as files on disk (such as images, HTML, JavaScript Object Notation (JSON) files, and XML files).
  • Embedded resources are resources stored within some container Resource file (such as ResW or ResJSON).

In Windows file resources are deployed as loose files on disk, and string resources are compiled from their source files and embedded in a Package Resource Index (PRI) file.

The topics in this section concentrate on the techniques used for app resources that are done differently depending on your programming model, and in this case we assume you're using JavaScript and HTML to write your app.

  • See App resources and localization for other topics that describe app resources as an architectural concept, which doesn't get into the specifics of how to accomplish tasks in a particular programming model.
  • See Defining app resources (XAML) if you're using C#, C++ or Visual Basic and XAML to write your app.

In this section

Topic Description

Quickstart: Using file or image resources

You can add images and other file resources to your app, and reference those files from within your app.

Quickstart: Using string resources

Put string resources into resource files, and reference those strings from your JavaScript code or HTML markup.

How to name resources using qualifiers

You can name resources by using qualifiers. The qualifiers identify the context in which a version of a resource should be used.

How to load string resources

You can load string resources from objects such as resource files, libraries, controls, and app packages and manifests.

How to load file resources

Learn to load file resources from various locations.

Using per-window loading and auto-refresh behaviors

Windows 8.1 and later supports per-window loading and auto-refresh behaviors.


App resources and localization

Defining app resources (XAML)