No antialias in Image in very specific case

[fabianoriccardi]

Describe the bug

The image is no antialiased when loaded from code in the following specific case. In the following screenshot you can clearly see the difference.

Why is this important?

The image loaded in such way looks like early 2000, it contrasts with Fluent UI.

Steps to reproduce the bug

<Image Name="PixelatedImage" Height="48" />
<Image Name="GoodImage" Height="48" />

StorageFile fi = await StorageFile.GetFileFromPathAsync("..../github.png");

BitmapImage bitmapImage1 = new();
using IRandomAccessStream stream = await fi.OpenAsync(FileAccessMode.Read);
await bitmapImage1.SetSourceAsync(stream);
PixelatedImage.Source = bitmapImage1;

BitmapImage bitmapImage2 = new();
using IRandomAccessStream stream2 = await fi.OpenAsync(FileAccessMode.Read);
GoodImage.Source = bitmapImage2;
await bitmapImage2.SetSourceAsync(stream2);

The difference betwween the 2 is the order between Source assignation and BitmapImage.SetSourceAsync.

Actual behavior

The actual behavior is visibile in the screenshot.

Expected behavior

No response

Screenshots

NuGet package version

WinUI 3 - Windows App SDK 1.8.2: 1.8.251003001

Windows version

Windows 10 (21H2): Build 19044

Additional context

A very similar issue was already present in uwp https://stackoverflow.com/questions/42189063/image-smoothing-in-uwp-app

[JohnnyWestlake]

This is by design, and noted inside image optimisation section here:

https://learn.microsoft.com/en-us/windows/uwp/debug-test-perf/optimize-animations-and-media#right-sized-decoding

TL;DR: When attached to the UI first, the bitmap can be decoded at the layout display size (and because of this, can use less memory than the source image might suggest). Note that this is not real-time filtering, and any increase in the layout-display size of the image set this way will result in a full re-decode of the image at the new size.

Without being attached to the UI first, the bitmap is decoded at full resolution, then scaled down with no real filtering applied. For performance reasons, XAML applies no high-quality filtering in realtime, so you end up with the more raw-looking result.

[fabianoriccardi]

Thanks for the link, it is enlightening. But it is stated it is for UWP, I guess it applies entirely to WASDK, but it should clarified.