LearnNowOnline

Blog

Working with Image Resources

Excerpt by Ken Getz | July 12, 2013

Although you cannot store images in resource files, they too represent resources in your application. If you have images that contain text, you can treat each localized image like a localized resource file, using the same folder structure and file-naming scheme as you learned about for resource files. The standard convention for localized images, however, is to place the "default" set of images in the root Images folder, with localized images stored in subfolders named for the corresponding language (es-mx, for example, or just es for all Spanish-speaking locales). But this isn't the issue you'll focus on in this section. Instead, this section focuses on another issue facing developers when images make up part of the application: image scaling. Your application must handle appropriately scaled images for any screen resolution that Windows 8 supports.

Visual Studio, along with the Windows Runtime, makes this extremely easy, but you have to know the tricks involved. Most often, you will need to provide multiple versions of images to correctly support different screen resolutions, which generally range from 1024x768 all the way up to 2560x1440 or higher. (Imagine Windows 8 spread across four or more large monitors, in a wall display!) An image that looks fine on a small tablet will certainly not scale up to look decent at a super-high resolution. This is just a fact of digital life: Without some sort of image scaling, as the pixel density of the display device increases, the physical size of images seems smaller. Windows scales the UI to match the size of the screen, and the scaling is performed in known increments. The Figure below, from the Microsoft documentation, demonstrates how different screen sizes, and different pixels per inch (PPI) display. Clearly, the higherresolution slate, at the same physical size, displays more pixels per inch and therefore provides a clearer image.

The Figure above. Compare pixel density on two displays of the same size. Because of the differences in screen resolution and pixels per inch, Windows scales every application for the current screen and its properties. In order to ensure that images look their best at every screen resolution, you should always provide three copies of every image in your application, sized three ways:

• 100%, when no scaling applied.
• 140%, for 1920x1080 devices with a minimum dots per inch (DPI) of 174.
• 180%, for 2560x1440 devices with a minimum DPI of 240.

Yes, this adds a great deal of work for you, but it ensures that your images don't appear distorted when Windows scales your applications.

This post is an excerpt from the online courseware for ourWindows 8 Using XAML: Views, Resources, and Toastscourse written by expert Ken Getz.