I need some help with understanding the BaseSize parameter of MauiImage in Visual Studio and also the process needed to import an image that scales to different screen densities, possibly also some basics about image density scaling on mobile.

Let's say I have a PNG image width 380px, height 168px like this.

The documentation says:

The base size of the image can be specified by setting the BaseSize attribute to values that are divisible by 8:

So...what do I do now? 380px is not divisible by 8. Do I change the width to 384 or 376 like BaseSize="376,168"? Is the resulting image going to be cropped by 4 pixels? Or what is the correct solution here?

The value of the BaseSize attribute represents the baseline density of the image, and is effectively the 1.0 scale factor for the image (the size you would typically use in your code to specify the image size) from which all other density sizes are derived. This value will be used to ensure that images are correctly resized to different display densities. If you don't specify a BaseSize for a bitmap image, the image isn't resized.

I'm building on Android and this page says that Android baseline density is 160dpi or mdpi.

So...does this mean MAUI automatically creates the image for ldpi, hdpi, xhdpi, xxhdpi, xxxhdpi?

But...wouldn't that mean the images are going to get pixelated on higher screen densities?

Wouldn't it make more sense if the image above would be defined for the highest screen density and then scaled down to lower densities without loss of quality?

CodePudding user response：

"wouldn't that mean the images are going to get pixelated on higher screen densities?"

• The optimal use of BaseSize is to provide either a vector image, or an image that is at least as high resolution as the highest resolution you care about.

Then yes, BaseSize tells Maui what size to store for different devices.

• If you had a 1280 x 1280 image, and knew you would display it no larger than two inches (320 DIPs), then you could save some memory on lower-resolution devices, by specifying BaseSize="320,320".

That would store 320x320 image on a Density=1 device.
Would store the full 1280x1280 on a Density=4 device.

• You have a png at a medium size. You could OMIT BaseSize. Then your image will be stored "as is", regardless of device. Your page layout will specify the area in which it is being rendered. Scaled when rendered.

• If you use BaseSize with that image, use a Paint editor to pad the edges with transparent pixels, to make it divisible by 8.

• I don't know whether Maui ever stores an enlarged image (bigger than original) for a high density device. I hope not; its capable of scaling when rendering an image, so the logical implementation would be to store the original image in that case.