3

when I stretch the image to the size of the division the quality of the image has come down. Is that possible to Resize the Image while keeping its quality in Windows 8 Metro HTML5 apps ? Image dimension is 360x480 pixels.

HTML5 code:

     <div id="imageSection" >
        <input type="image" id="homepageimage" >
    </div>

css file code:

    #imageSection { 
     height: 90%;   
       }
 #homepageimage { 
width: 100%;   
background-image: url(../images/kidsphoto.jpg);
background-size:100% 100%;
background-repeat:no-repeat;
height:100%

}

krrishna
  • 2,050
  • 4
  • 47
  • 101
  • 1
    If the images size is 360x480 and you increase the size via css then the quality will downgrade. You would need to create the image in the highest resolution you want to support as it's a jpg. It doesn't magically recreate your image, it just increases the scale – TommyBs Jul 23 '12 at 12:12

2 Answers2

2

Assuming that you have the issue when 'reducing the size' of the image then this is because the interpolation mode of IE10 only supports low quality (nearest neighbour) so the resized image will look lower quality than the original.

In IE7 to IE9 you could have used the CSS property -ms-interpolation-mode

-ms-interpolation-mode: bicubic;

but this is no longer supported in IE10 (go figure).

Unfortunately there isn't an easy fix. There are some CPU intensive workarounds but if you can then it's best to store the images in the sizes that you actually need. Make also sure you support high DPI systems by providing larger image variations (at 180% and 140% the size).

Community
  • 1
  • 1
Patrick Klug
  • 14,056
  • 13
  • 71
  • 118
1

To prevent image quality degradation, use an image with the highest resolution that you want to display at. If the image is 360x480 and you want to display at a resolution higher than that (say 720x960), the quality will decrease. The only fix for this would be to use an image with a resolution of 720x960.

Jennifer Marsman - MSFT
  • 5,167
  • 1
  • 25
  • 24