Tag Archives: Image Resources in Windows 8

Working with Image Resources

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 1024×768 all
the way up to 2560×1440 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 1920×1080 devices with a minimum dots per inch (DPI) of 174.
  • 180%, for 2560×1440 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 is a Visual Studio expert with over 25 years of experience as a successful developer and consultant. He is a nationally recognized author and speaker, as well as a featured instructor for LearnNowOnline.