Using images with an optimal size

Applications often use a variety of images (user avatars, icons, and backgrounds) to enhance the user experience. However, like many other elements, excessive use of images can lead to performance issues.

When using an image, it’s important to remember that we usually don’t need high-quality images if they will be displayed in a 50 x 50 box. A sensible approach is to reduce the size of the original images based on the dimensions they will be shown in. Even when you use SVG images in .NET MAUI, they’re automatically converted to raster images at the size set by the MauiImage.BaseSize attribute in the *.csproj file. This conversion happens because not all target platforms support native SVG rendering. So, it’s important to specify a size that meets your app’s requirements, even when working with SVGs.

In this recipe, we’ll implement image picking and resizing using the SkiaSharp library. Afterward, we&...