Prevent pixel images in the Windows Store app

Question

Any image of sufficient size displayed in any application I have worked with becomes pixelated when resized. The screenshot above shows a high-resolution image, which upon exit - becomes very pixelated.

I tried a good old (little-known) IE-specific property - ms-interpolation-mode: bicubic; but it does not make any difference.

I saw this problem in the Microsoft News application on several computers, so I don’t think it is a problem limited to my machine or the way the image is displayed.

I tried this on Windows 8 / 8.1 and 10 with the same results.

Trying the same code in Edge and IE11 works fine, the image is beautifully sharp without pixelation. Here are the exact CSS and images that make up the screenshot of the sample application.

 .exampleImage { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; max-width: 100%; max-height: 100%; -ms-interpolation-mode: bicubic; } 

 <img src="http://blog-admin.cddev.org/wp-content/uploads/2014/12/Aston-Martin-DB10-Front-Three-Quarter-e1417707100993.jpg" class="exampleImage" /> 

Does anyone know how to stop pixelation?

Answer 1

I think this is a disadvantage of sub-pixel anti-aliasing, which does not seem to be supported in IE and modern user interface applications.

There's a feature request here, with 5699 votes in the User Voice, titled "Return Subpixel to Anti-Aliasing in IE and the ModernUI Application"

This request is for fonts, but under the hood it's the same thing.