Optimizing images for different screen resolutions (Windows Store Apps)
Before you publish your Windows Store app, you should ensure that its logos and splash screen will look good on a variety of devices that have different screen resolutions. If you provide only one version of those graphics, Windows will stretch or shrink that version to fit whatever screen size is being used, and screens that have high pixel density could show jagged versions of your graphics. By providing versions of each image at different sizes, you can reduce the degree to which Windows will stretch or shrink your graphics. For more information about how to make your images look good, see Guidelines for scaling to pixel density.
This topic describes how to provide different versions of the four required images that identify your app: the main logo, the small logo, the Store logo, and the splash screen. The topic doesn't cover wide logos or badge logos, but you follow the same the process. For an overview of the logos and images that Windows Store apps need, see Choosing your app images.
Note
Visual Studio 2012 Update 1 supports the functionality that this topic describes.
Obtaining image files
If possible, you should have an artist use professional software for graphic design to create scaled image files that are based on the source artwork. If that isn't an option for you, you’ll need to create your own image files. Regardless of the approach that you take, you'll need your app logo, small logo, Store logo, and splash screen in the following sizes. (Notice that you need the Store logo and the splash screen in only three sizes, rather than four.)
Logo Scale Factors |
Image Dimensions |
|---|---|
Scale 180 (180%) |
270 x 270px |
Scale 140 (140%) |
210 x 210px |
Scale 100 (100%) |
150 x 150px |
Scale 80 (80%) |
120 x 120 px |
Small Logo Scale Factors |
Image Dimensions |
|---|---|
Scale 180 (180%) |
54 x 54px |
Scale 140 (140%) |
42 x 42px |
Scale 100 (100%) |
30 x 30px |
Scale 80 (80%) |
24 x 24px |
Store Logo Scale Factors |
Image Dimensions |
|---|---|
Scale 180 (180%) |
90 x 90px |
Scale 140 (140%) |
70 x 70px |
Scale 100 (100%) |
50 x 50px |
Splash Screen Scale Factors |
Image Dimensions |
|---|---|
Scale 180 (180%) |
1116 x 540px |
Scale 140 (140%) |
868 x 420px |
Scale 100 (100%) |
620 x 300px |
The following samples demonstrate the use of scaled images.
Adding image files
When you have image files in the appropriate sizes, you then add them to your project and identify them in the manifest file. Name the files according to the type of asset that they are, such as Logo.png or SmallLogo.png. If you intend to store the files in the same folder, include scale qualifiers in the file names. For example, you might give two of your files the following names: Assets\Logo.scale-100.png and Assets\Logo.scale-140.png.
If you intend to organize the files in folders based on the scale factor, include the scale qualifier in the folder name instead of the file names. For example, you could store Logo.png and SmallLogo.png in an Assets\Scale-100 subfolder.
To add the image files to your project
Open your Windows Store project.
Add the image files to the Assets folder in your project.
To identify the files in the manifest
In Solution Explorer, open the App Manifest Designer (Package.appxmanifest), and then choose the Application UI tab.
In the list of visual assets, choose All Image Assets to display the settings for the logo and the splash screen.
If you want a short name to appear on your main logo, specify one in the Short Name text box.
In the Logo text box, specify the logical name for the main logo.
The default value is Assets\Logo.png.
Note
Similar text boxes appear for each type of asset.
In the Scaled Assets area of the page, choose the Browse button next to the Scale 80 box, navigate to the Assets folder, specify the file that contains the image that’s scaled to 80%, and then choose the Open button.
The file's image appears in the box and the file is copied. The copied file is named in accordance with the resource naming conventions for Windows Store apps: Name.scale-NNN.ext, where NNN is the scale factor. For example, the file might be named Logo.scale-100.png.
Complete the Logo settings by choosing the appropriate files from the Assets folder and adding them to the Scale 100, Scale 140, and Scale 180 boxes.
Note
To display a close-up view of the image in the scaled size, choose the image in the box. A preview window opens and lists where each image file will be used.
Repeat steps 4-6 for the small logo, the Store logo, and the splash screen.
Preview your app in the simulator for Windows Store apps
By using the simulator, you can build your app, choose the physical screen size and resolution that you want to emulate, and preview your app on your desktop computer.
Important
Before you publish your app to the Store, always test your app on an actual device.
To run your Store app in the simulator
In the Debug Target list, choose Simulator.
The Debug Target list is next to the Solution Configurations list on the toolbar.
If the build doesn't start, choose Simulator again.
When your app is running, choose the Change resolution button on the right-hand side of the simulator, and then specify the screen size and resolution that you want to view.
The simulator adjusts the display of your app.
Note
The simulator provides other features such as rotation, touch emulation, geo-location of the device, and screen captures. For more information, see Running apps in the simulator.
To close the simulator, choose the Ctrl+Alt+F4 keys.