Image resolutions for IOS- and android applications
When it comes to designing graphics for iOS and Android apps, one important factor to consider is image resolution. Different devices have different screen sizes and pixel densities, so it's important to use the appropriate image resolutions to ensure that your graphics look sharp and clear on all devices.
On iOS, there are three main image resolutions to consider: @1x, @2x, and @3x. These refer to the scale factor of the image, with @1x being the baseline resolution and @2x and @3x being double and triple the size, respectively.
For example, if you have an image that is 100px by 100px at @1x, it should be 200px by 200px at @2x and 300px by 300px at @3x. This allows the image to be scaled up or down as needed on different devices without losing quality.
On Android, things are a bit more complex due to the wide variety of devices on the market. In general, you'll want to provide multiple versions of each image at different resolutions to ensure that your app looks good on all devices.
One approach is to use the same @1x, @2x, and @3x scales as iOS, but you may also need to provide additional versions at higher resolutions for devices with particularly high pixel densities. It's also a good idea to use the Android Asset Studio to generate launcher icons and other graphics for Android, as this tool can help you create properly-sized and formatted graphics for the platform.
Different resolutions
Let's play with an image that renders to the size of 100x100px
iOS
| name | scale | size |
|---|---|---|
| @1x | 1x | 100 x 100 |
| @2x | 2x | 200 x 200 |
| @3x | 3x | 300 x 300 |
Android
| name | scale | size |
|---|---|---|
| ldpi | 0.75x | 75 x 75 |
| mdpi | 1x | 100 x 100 |
| hdpi | 1.5x | 150 x 150 |
| xhdpi | 2x | 200 x 200 |
| xxhdpi | 3x | 300 x 300 |
| xxxhdpi | 4x | 400 x 400 |
In addition to using the appropriate resolutions, it's also important to consider the file format of your images. On both iOS and Android, PNG is a popular choice due to its support for transparency, while JPEG is a good option for photographs and other images with complex color gradients.
By carefully considering image resolution and file format, you can ensure that your app's graphics look great on all devices, improving the user experience and helping your app stand out in the crowded app store.
I have created a tool for converting images to all different format, Try it out here