Photoshop Question posted in
The official user guide can be found here.

In the visual asset files for a Windows Universal App what does scale-240 signify? – Photoshop

When I make a new Universal App in Visual Studio 2013 I get a number of graphics files for the logos, splash screens, etc. in the Assets folder, for example Square71x71Logo.scale-240.png. The Package.appxmanifest then maps these files to the various required things. For example Square71x71Logo.scale-240.png is mapped in Package.appxmanifest to Square 71x71 Logo.

The actual file is 170 pixels wide, 170 pixels high, Photoshop reads it as having 72 pixels per inch, and it has an 8 bit colour depth.

What does the .scale-240 part of the file name signify?

Assets directory listing

I’m replacing the file and I am not sure how to scale-240-ify the new image.

Tags:

3

Answers


  1. 0

    .scale-xxx appears to refer to pre-scaled image resources.
    If you are using a an image logo.png with size 100x100px then logo.scale-240.png should be an image of size 240x240px, i.e. scaled by a factor of 240 percent. The idea behind this concept is apparently to avoid potentially expensive and inaccurate rescaling by the displaying device, by supplying several prescaled images at defined scales.

    In your case: 170px / 2.40 = ~71px

    See also the corresponding MSDN article. (The linked article is in German, I will leave it to the interested reader to find the matching English one 😉

    Login or Signup to reply.
  2. 0

    Universal apps need to be able to run on very different screens. You cannot predict up front what kind of device the user might have. Big difference if he has a cheap contract phone, an expensive slate or a desktop machine. WinRT helps by automatically scaling your app to match the screen resolution.

    Supported scaling percentages for a desktop/slate app are 80, 100, 140 or 180%. For a phone it is 100, 140 or 240%.

    Text can auto-scale easily but images do not. They get blurry when they get rescaled, a single pixel in the image no longer coincides with a single screen pixel. Pretty noticeable when the image contains fine line art or text. Scaling down necessarily loses pixels, details may disappear.

    So the Visual Assets tab of the manifest editor allows you to select multiple images, each suitable for a specific scaling percentage. You found the -240 version in your phone project’s Assets directory, the 240% scaling version that were auto-generated when you created the project. The desktop version has -100 assets by default, 100% scaling.

    You may want to add your own. You don’t have to.

    Login or Signup to reply.
  3. 0

    The scale-240 part of the file name is a resource qualifier that indicates that the file is used for 240% DPI systems.

    Resource qualifiers allow the app to provide different versions of the same resource for different scenarios and refer them all internally by the base name:

    • Scaling for different DPI systems: .scale-100, .scale-140, .scale-180, .scale-240
    • Language (if the image has text in it): .lang-de-DE, .lang-en-us
    • Contrast (to simplify for high contrast modes): .contrast-high, .contrast-standard
    • Layout direction (if the image should be different in LTR vs RTL language settings): .layoutdir-RTL, .layoutdir-LTR
    • DirectX feature level: .DXFL-DX9, .DXFL-DX11

    The app can reference the image by its base name (e.g. logo.png) and the version which best matches the current scale, contrast level, language, etc. will be automatically used.

    The default phone template provides scale-240 images since high-DPI phones are fairly common and it is generally better to scale down from a larger image than to scale up a small image. Best would be for you to provide multiple resolutions when you replace the stock ones with your own, especially if your images are complicated and don’t scale well by default.

    See How to name resources using qualifiers (XAML)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search