Uno.Resizetizer for Automated Image Resizing in Cross-Platform .NET Apps

Uno Platform Team
Published May 16, 2023

You’ve likely experienced the tedious and time-consuming process of scaling and resizing source images to fit the multitude of resolutions required for each platform while ensuring that each version is placed in the correct folder. It can become especially challenging when dealing with cross-platform development.

Drawing inspiration from ResizetizerNT developed by Redth for Xamarin.Forms (now shipped with .NET MAUI), Uno.Resizetizer automates image handling across all target platforms, including WebAssembly (WASM) and SKIA. With the Uno Resizetizer, you can easily process multiple image sizes and resolutions with a single asset located in one place. This eliminates the need to worry about handling different image sizes and directories, freeing up your time to focus on developing the core functionalities of your application.

In this blog post, we’ll guide you through using Uno.Resizetizer to effortlessly handle images, icons, and splash screens for your mobile, web, and desktop applications.

How Uno Resizetizer Works

In simple terms, Uno.Resizetizer is a tool that generates PNG images of the required size and resolution for each platform based on an SVG asset you provide. It uses a simple naming convention to automatically generate different versions of your images at different resolutions and scales. For example, suppose you have an image called “logo.svg”. In that case, Uno.Resizetizer will generate versions of the image called “logo.scale-100.png”, “logo.scale-125.png”, and so on, based on the scaling factor specified in your app’s configuration, and add them to the correct location during the build process. This means you can use the generated images anywhere inside your application, such as ImageButton or Image. All you need is one SVG file, and Resizetizer handles the rest, automatically creating and managing the necessary image size and resolutions for each of your target platforms.

Here are the build actions available:

Property	Description
UnoImage	Item property to specify which images will be used inside your application
UnoIcon	Item property to specify which assets will be used to represent the app icon of your app. The UnoIcon accepts two assets, one that represents the Foreground and another that represents the Background. During the generation phase, those files will be merged into one .png image.
UnoSplashScreen	Item property to specify which assets will be used to represent the splash screen of your app. The UnoSplashScreen has two more properties that you can use to adjust your asset, which are: BaseSize: It’s the size that will be used to perform the scaling of the image. The default value is the size of the asset. So if you feel that your SplashScreen doesn’t look right you can tweak this value. Color: It’s the background color that will be used to fill the empty space on the final SplashScreen asset. The default value is #FFFFFF(transparent).

Note: While Resizetizer can work with PNG files, it won’t rescale them by default, resulting in an unsightly appearance

How to Resize Images in Uno Platform Projects

Using Resizetizer in your Uno Platform project is easy. Starting from Uno Platform 4.8, the Uno.Resizetizer package is included by default and is compatible with projects running .NET 6 and later. If you’re using a legacy template and wish to add it, all you need to do is install the NuGet package.

You can also find additional documentation here.

You can include as many UnoImages as you want for one tenant in your app project, but you can only have one UnoIcon and one UnoSplashScreen. If you specify more than one, you’ll see a build warning, and the tool will only process the first item in the pipeline.

Below is a sample of how these build actions look in the csproj file. Just a friendly reminder that you can also specify the build action inside the IDE.

When to Use Uno Resizetizer

As mentioned above, Resizetizer supports resizing for all your app icons, images and splash screen, but it is also not necessary to use it for all of your assets. If, for instance, your app icon has complex sizes and alignment, and in some platforms, it may look odd, and the properties exposed to customize the asset may not be enough to make it look nice. In that case, it’s better to ask a designer to generate the PNG per platform and use the manual way.

Similarly, if you want to use an animated splash screen, the Uno.Resizetizer can’t help you with that because it only supports static assets, and you’ll need to handle it yourself. However, one thing I’m sure of is that you can use it for all the images that you want to show on your app. So, use UnoImage everywhere, and it should just work!

The Uno.Resizetizer is a powerful time saver when handling images in your Uno Platform projects. With just a few simple steps, you can create multiple versions of your images in various resolutions and seamlessly use them in your app without worrying about scaling or stretching.

Next Steps

Give it a try in your next Uno Platform project, and let us know what you think; alternatively, if you need to open an issue, reach out on our GitHub.

To stay up to date with the latest Uno Platform features, make sure to update your packages to version 4.8 using the Visual Studio NuGet package manager. If you’re new to Uno Platform, our official getting started guide is your go-to resource for diving in. It’s easy to follow and only takes about 5 minutes to complete!