Prevent pixelated Images in Windows Store App

Question

Any image of sufficient size that is displayed in any app I've worked on becomes pixelated when resized. The screenshot above shows a high resolution photo that - when outputted - becomes heavily pixelated.

I've tried the good old (little-known) property specific to IE -ms-interpolation-mode: bicubic; but it makes no difference.

I've seen this problem in Microsoft's News App on multiple machines so I don't think it's a problem limited to my machine or the way I'm displaying the image.

I've tried this in 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 is the exact CSS and image that make up the app example screenshot.

.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 the pixelation?

Mazur

Actually, the same issue exists in IE11 and Edge. Just try resizing the image smaller and it will become pixelated. -ms-interpolation-mode: bicubic; no longer works. The status of image-rendering on Edge can be found here. – Mochun

Looks like a lack of anti-aliasing. Let me dive into this and see what's happening under the hood. – Fragmentary

Answer 1

I'm thinking it is a lack of subpixel antialiasing, which doesn't seem to be supported in IE and Modern UI apps.

There is actually a feature request for it here, with 5699 votes on User Voice, titled 'Return subpixel antialiasing to IE and ModernUI apps'

That request is relevant to fonts, but under the hood it is the same thing.

Fragmentary

Thanks for the response. Do you perhaps know of a way to work around the issue? – Mazur

I don't know of anything off the top of my head, but I'll reach out to one of the product groups. – Fragmentary