Improve the image generation for specific use cases

[mattleibow]

Description

Several people have hit the issue where they put images in the Resources/Images folder and try use it in specific locations in the app - for example tab icons.

This makes sense as they want an image on the tab, but some platforms/controls do not resize the image. So as a result this happens: https://github.com/dotnet/maui/issues/8609 - the tab icons are the original size in the svg file.

In Xamarin.Forms, I believe images were not generated automatically so this was never hit because images were already sized correctly.

And this is where doing things automagically is really deceiving: if you have a large image - say 1024x1024 (because you got that from a designer or that is just the size the drawing app used) - then you actually force the OS to load that HUGE image and then scale it down to 20x20 at runtime. This definitely impacts startup performance - even in release builds.

Your app will have several large image files (increasing file size) and then the app has to load those images (long load times) and then has to resize those image (even more load time).

I am going to close this issue "as designed" because the BaseSize attribute is specifically what it was designed for. Maui has no way of knowing what the image is going to be used for and thus it is up to you to create images or set scaling so that the tooling can generate the correct images.

Steps to Reproduce

1. Create a new MAUI app
2. Add a large SVG into Resources/Images
3. Set the image as the tab icon

Link to public reproduction project repository

See https://github.com/dotnet/maui/issues/8609

Version with bug

Unknown/Other (please specify)

Last version that worked well

Unknown/Other

Affected platforms

iOS, Android, Windows, macOS, Other (Tizen, Linux, etc. not supported by Microsoft directly)

Affected platform versions

All

Did you find any workaround?

The current way is to use BaseSize as it was designed to do this, but this is not discoverable.

Maybe the IDE needs more things in the properties pane?

Relevant log output

No response

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[Syed-RI]

Thanks @mattleibow for opening the issue! Fingers crossed it'll get looked into soon!

[T-T-P]

I am creating tabs dynamically from the .cs code and therefore am unable to use the workaround of BaseSize.

Please see the following for example:

 TestPage testPage = new TestPage
  {
      IconImageSource = ImageSource.FromResource("App.Resources.Images.testimage.png"),
      Title = "Test Page"
  };
  Children.Add(testPage);

In Xamarin the tab images were sized automatically to fill the tab, as mentioned above this is not the case in MAUI and the workaround does not work in this use case?

[faruknane]

It is not just about tab icons. There is a bug for images in IOS part. Image in IOS does not recognize it's boundary at all. That's why it gets so larger. It happened to me twice in the same page in the different locations. Wrapping images with grids recovers for one dimension but other dimension is still wrong. So, in short base size is not a solution and in my case I should not downscale my images since they will appear in different sizes in different devices.

[tscholze]

Has anyone got around it? I'm really struggeling. Thanks!