Optimize images for different screen resolutions

applies to both windows and 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.

To learn more about different types of images and which ones are required by the Store, see Choosing your app images.

For more information about how to those images look good, see Guidelines for scaling to pixel density.

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

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

If you are 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.

  1. In Solution Explorer, open the App Manifest Designer (Package.appxmanifest), and then choose the Application UI tab.

  2. In the list of visual assets, choose All Image Assets to display the settings for all logos and the splash screen.

  3. If you want a short name to appear on your main logo, specify one in the Short Name text box.

    Note Note

    For Windows Phone apps, the values of Short name and Default size are ignored.

  4. In the Square 150 x 150 Logo text box, specify the logical name for the main logo.

    The default value is Assets\Logo.png.

    Note Note

    Similar text boxes appear for each type of asset.

  5. 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 Store apps: Name.scale-NNN.ext, where NNN is the scale factor. For example, the file might be named Logo.scale-100.png.

  6. Complete the Square 150 x 150 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 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.

  7. Repeat steps 4-6 for the other dimensional logos, the Store logo, and the splash screen.

Content applies only to Windows

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 Standard toolbar. Select an emulator that matches the resolution in which you want to preview your app.

Important note Important

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

Show:
© 2014 Microsoft. All rights reserved.