locked
scaled image quality

    Question

  • Hi.

    I have thousands of images and use several sizes of same image so i cannot prepare each size so i need to scale it down automatically, but quality of result is horrible. I've tried to set 

    -ms-interpolation-mode: bicubic

    in CSS but it does not work.

    Thursday, June 06, 2013 12:15 PM

Answers

  • Another option (but depends exactly how are you showing each image and might work if you are showing one at a time) is to use the ViewBox control, which supports one child (in your case, an img tag), and will scale the content automatically according to the viewers resolution so it matches a fixed resolution you set to the ViewBox. If you set your ViewBox to, for example, 1024x768 and the viewer has a 2048x1536 screen, it will scale up, if it has lower, it will scale down, if it has a wide screen it will scale up/down until one dimension hits a border and it will add black (or whatever color you set) lines accordingly.

    How the WinJS.UI.ViewBox actually works


    PD: See the link for the specific CSS transformation that the ViewBox uses, if you show multiple images (which wouldn't apply to the ViewBox) you could still use the CSS transformation manually.
    Thursday, June 06, 2013 3:23 PM

All replies

  • Hi,

    Did you try with the "scale-XXX" subfixes on the images?

    Let's say you have your image called "image1.png", if you create a "image1.scale-100.png" (100%), "image1.scale-160.png" (160%), "image1.scale-xxx.png" (target % you want), the App will automatically pic the version of the image that best suits the current resolution, you just reference "image1.png". Check this MSDN article for more details.

    Another solution would be to develop a Windows Store Component in, let's say, C# (or C++), that creates a version of the file for the exact resolution of the device (prior to the image being shown) so no scaling is necessary.

    Thursday, June 06, 2013 2:16 PM
  • Hi.

    I'm trying to avoid this as app should store and handle thousands images. In C++ i just loaded image in specified resolution and looking for something similar in HTML5/JS.

    Thursday, June 06, 2013 2:57 PM
  • Hi,

    You can invoke a Component developed on C++ from JS, you could reuse your C++ code to create a version of the image/s best suited for the device's resolution and call it from your JS code:

    Creating Windows Runtime Components

    Using the Windows Runtime in Javascript

    Thursday, June 06, 2013 3:15 PM
  • Another option (but depends exactly how are you showing each image and might work if you are showing one at a time) is to use the ViewBox control, which supports one child (in your case, an img tag), and will scale the content automatically according to the viewers resolution so it matches a fixed resolution you set to the ViewBox. If you set your ViewBox to, for example, 1024x768 and the viewer has a 2048x1536 screen, it will scale up, if it has lower, it will scale down, if it has a wide screen it will scale up/down until one dimension hits a border and it will add black (or whatever color you set) lines accordingly.

    How the WinJS.UI.ViewBox actually works


    PD: See the link for the specific CSS transformation that the ViewBox uses, if you show multiple images (which wouldn't apply to the ViewBox) you could still use the CSS transformation manually.
    Thursday, June 06, 2013 3:23 PM
  • I know ... i'm already using C++ component with my old code, but i cannot use BitmapImage class as it can be created from UI thread only (and it's different than JS thread). Save smaller version is my last chance, but first need to find another way just using HTML5/JS without saved thumb.
    Thursday, June 06, 2013 3:31 PM
  • The ViewBox / transformation option I posted below wouldn't work either?
    Thursday, June 06, 2013 3:35 PM