How to scale images for apps?

Question

I’m starting a project for an app I plan to build that will be compatible with UWP + Android + iOS. Also, I would like it to be compatible with phones, tablets and Desktops.

And it’s my first time building an app for UWP, so that’s what I’m studying most about the API. Looking at the documentation, I saw that Microsoft always recommends keeping the 4x4 ratio on the images and that the recommended width is 320 for small screens, 720 for medium screens and 1024 for large screens. But she doesn’t say anything about the height... with that... I’m having a hard time scaling the images I’m supposed to create.

1) What icon sizes should I create to suit so many platforms? How to do? I create an image for the highest resolution and resize for the smallest?

2) For Splashscreen, I’m thinking of following Microsoft’s idea... putting a solid background color and a small image loading.

3) With what dimensions and pixel densities should I work and consider the screens? Is there any consensus on this?

Answer 1

I think you’ve confused the screen dimensions a little bit with image dimensions. 320, 720 and 1024 are the minimum design dimensions you should create to suit small, medium and large devices. Should you create a design for each size? Yes, but in the same file using the responsive design technique (Responsive Design 101). How do you do it? Using Visualstatemanager. There is an example in this link: Hello World C# XAML. Look for more about Visualstatemanager and UWP Responsive Design 101. Lots of material is available in English. I hope it’s not a problem for you.