Windows 8.1 apps: Optimize images for different screen resolutions

Article
09/30/2015

Applies to Windows and Windows Phone

You can add different versions of each image that identify your app (for example, logos and splash screen images). Then, you can test them to ensure that they look good on a variety of devices that have different screen resolutions. By adding different versions of each image, you can reduce the degree to which your graphics will stretch or shrink to fit the screen size of the user.

In this topic

Name and organize your image files
Add image files to your project
Identify image files in the manifest
Preview your app for different screen sizes and resolutions

Name and organize your image files

Name the files according to the type of asset that they represent, such as Square7070.png. If you intend to store several files in the same folder, include scale qualifiers in the file names. For example, you might give one of your files the following name: Square7070Logo.scale-100.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 Square7070Logo.png and Square150150Logo.png in an Assets\Scale-100 subfolder.

Add image files to your project

Open your solution and add the image files to the Assets folder of your app project.

If you're using a shared app project to build an app for more than one form factor (for example, Windows and Windows Phone), consider adding your image file to the Assets folder of the shared project in your solution, but only if that image is appropriate for both form factors.

Identify image files in the manifest

In Solution Explorer, open the App Manifest Designer (Package.appxmanifest), and then choose the Visual Assets tab.
In the list of visual assets, choose All Image Assets to display the settings for images.
If you want a short name to appear on your main logo, specify one in the Short Name text box.

Note

For Windows Phone apps, the values of Short name and Default size are ignored.
In the text box of any of the logos (for example, Square 150x150 Logo), specify a for the main logo.

The default value for the Square 150x150 logo is Assets\Logo.png.
In the Scaled Assets area of the page, choose the Browse () button next to any of the Scale boxes, navigate to the Assets folder, specify the image that’s appropriate for that scale, and then choose the Open button.

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.

The image appears in the box and the file is copied. The copied file is named in accordance with the resource naming conventions for Store apps: Name.scale-nnn.ext, where nn is the scale factor. For example, the file might be named Logo.scale-100.png.

Preview your app for different screen sizes and resolutions

Applies to Windows only

You can preview apps that you design for the Windows Store by using a simulator. For more information, see Run Windows Store apps in the simulator.

You can preview apps that you design for the Windows Phone Store by using an emulator. Select an emulator from the drop-down list next to the Start Debugging button on the debugger's Standard toolbar. Select an emulator that matches the resolution you want to preview your app in.

Important

Before you publish your app to the Store, always test your app on an actual device.