Blog

Working with Image Resources

Excerpt by Ken Getz

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.

PixelDensity

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.

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

 



Ken Getz
Ken Getz is a featured instructor for several of our Visual Studio courses. He is a Visual Basic and Visual C# expert and has been recognized multiple times as a Microsoft MVP. Ken is a seasoned instructor, successful consultant, and the author or co-author of several best-selling books. He is a frequent speaker at technical conferences like Tech-Ed, VSLive, and DevConnections and he has written for several of the industry's most-respected publications including Visual Studio Magazine, CoDe Magazine, and MSDN Magazine.


This course excerpt was originally posted July 12, 2013 from the online courseware Windows 8 Using XAML, Part 09: Views, Binding, and Templates by Ken Getz

XAML Windows 8