locked
Scaling Imagery (100%, 140%, 180%) RRS feed

  • Question

  • One last thing I don't quite get about the image scaling.

    Example: You have an image 100x100 @ 92dpi made in PhotoShop. Now, do you simply save that 100x100 image at 128dpi for the 140%, and 165dpi for the 180%?

    Or, does the dpi of the actual image in PhotoShop not really matter, and the image should be made at 180x180, then reduced in size to 140x140 and 100x100 and saved with the proper scale naming rules?

    In the first case why not just save the 100x100 image at 300dpi and be done with things, won't it thus scale up just fine on it's own then? Or does DPI of the actual image not really take into effect.

    Real World Scenario
    Say the Windows Store only lets you upload one 50x50 icon, does that mean that at higher resolutions all the icons in the Windows Store won't look at smooth?

    Thursday, May 3, 2012 5:57 PM

Answers

  • For 140/180% scales, you want more pixels in the image because the high-density displays have more physical pixels to fill. The DPI in the image file itself won't have any effect. So your second statement is correct. For every 100 pixels in a 100% scale image, the 140% should have 140 pixels and the 180% 180 pixels.

    Again, it's about having real pixels in the image to fill real pixels on a display.

    Generally speaking, if you only provide one 100% scale image, then Windows will have to stretch it to fill the physical pixels on higher-density displays, and therefore it will not look smooth. If you provide those pixels in the source image, no scaling will be necessary and the display will look sharp.

    With the Windows Store, on the other hand, give it what graphics it asks for. I'm not actually sure what it does with higher pixel densities, but in that case you can't provide scaled images so everyone is on the same playing field at least.

    • Marked as answer by Harlequin Friday, May 4, 2012 3:19 PM
    Thursday, May 3, 2012 9:05 PM

All replies

  • For 140/180% scales, you want more pixels in the image because the high-density displays have more physical pixels to fill. The DPI in the image file itself won't have any effect. So your second statement is correct. For every 100 pixels in a 100% scale image, the 140% should have 140 pixels and the 180% 180 pixels.

    Again, it's about having real pixels in the image to fill real pixels on a display.

    Generally speaking, if you only provide one 100% scale image, then Windows will have to stretch it to fill the physical pixels on higher-density displays, and therefore it will not look smooth. If you provide those pixels in the source image, no scaling will be necessary and the display will look sharp.

    With the Windows Store, on the other hand, give it what graphics it asks for. I'm not actually sure what it does with higher pixel densities, but in that case you can't provide scaled images so everyone is on the same playing field at least.

    • Marked as answer by Harlequin Friday, May 4, 2012 3:19 PM
    Thursday, May 3, 2012 9:05 PM
  • Thanks.

    Brings up an interesting thing though...does the Metro app engine have better image resizing algorithms than a normal browser? In a web browser, images resized just by changing the height/width look like garbage, but in Silverlight image resizing is quote smooth. If HTML5 Windows 8 apps have nice image resizing then this is another interesting thing on it's own :)

    Friday, May 4, 2012 3:19 PM
  • It's a great question--I don't know the answer but I'll ask the people who do know.

    .Kraig

    Friday, May 4, 2012 4:19 PM
  • Cheers.

    And I'll start a betting pool where when you do find out, if you're allowed to tell us... =)

    Friday, May 4, 2012 8:02 PM
  • Since WinJS apps use the IE10 render engine, the scaling is done on the GPU and should look nice. At least it does in our app. Although you should use SVG whenever possible, though for shape like graphics. Unfortunatly SVGs do not work as images in Tiles :(
    Friday, May 4, 2012 8:32 PM