Commit dcc317e

With the large number of devices available in the world and the numerous different display sizes and resolutions it is generally a good idea to serve images that scale with the device screen.

On Android images inside the various drawable directories are used to serve the image that scales for the device display.

Google provides a great resource to learn more about [supporting different pixel densities](https://developer.android.com/training/multiscreen/screendensities).

In our NativeScript project, you will have the `App_Resources/Android` directory. Everything in here will mirror a standard Android project. Inside the `App_Resources/Android/src/main` directory you shuld have a `res` directory which contains many `drawable-...` directories. This is where you should place images that have been resized for the different device displays. To read more on this topic you can read [the Android documentation for alternative bitmaps](https://developer.android.com/training/multiscreen/screendensities#TaskProvideAltBmp).

There are many approaches to resizing your images for the different drawable folders. You could use Android Studio or other third party tools. For this example we will look at a tool specifically built to help NativeScript developers resize their images, [images.nativescript.rocks](https://images.nativescript.rocks/).


Once you select your image and click the `Go` button, your images are processed and then a zipped folder should begin downloading. Open the zip and you should see the same directory structure that you see in your NativeScript `App_Resources` like the following image:


Now you can take those images in the output and place them in the corresponding directories of your NativeScript `App_Resources`.

::: tip Note

Any time you edit files inside `App_Resources` it is a best practice to execute `ns clean` which will clean your project build so the next build will be a fresh native build of the application.

:::

- [Optimizing Images](optimizing-images.md)

title: Optimizing Images

The importance of optimizing images for mobile devices is critical to your app's performance. This is true no matter what framework or OS your app targets.

It is even important when building for web and desktop as well but not as critical since those devices typically have much greater memory and CPU to operate with, however you should still optimize your images regardless of any target platform you are distributing applications for.

Devices today have incredible displays with high-resolution screens. With the high-resolution screens we need to provide our users with high-resolution images which will increase file size.

One of the best options is to test your image in various devices and screen sizes. Once you have the image you can include the image in your application and see how it looks. Check the size of the image. If it's a high-resolution image and its size is `1024x1024` and you are displaying a small thumbnail or icon in your app. You probably do not need it to be that size and you can scale it down by resizing the image on your computer. Try different sizes to get the best result while keeping the image looking as sharp as possible.

If you want to take it a step further and provide a better end user experience typically on Android and iOS you would package different sized images in your application.

In NativeScript, these images will be located in your `App_Resources/<platform>` directory for your application. The directory structure inside `App_Resources` mirrors that of a native Android and iOS project. These files are used during the native build of your application.

For more on optimizing images for Android using the Android drawable directories, see the [Android Tips](android-tips.md#images-in-android-drawables) section of the docs.

For more on optimizing images for iOS, see the [iOS Tips](ios-tips.md) section of the docs.

There are numerous compression methods for manipulating images. For most images you are working with you can choose some compression option and end up hardly noticing a difference in the end result, however, you can significantly reduce the file size of the image. Which in turn reduces the overhead of using that application in your application by consuming less memory on the device. If you have ever worked with a lot of images on Android, you may be familiar with [`OOM Exception`](https://developer.android.com/reference/java/lang/OutOfMemoryError) which most Android developers can tell you this happens when you are displaying a lot of images and forget to reduce their size or optimize your layouts.

One example of image compression is [lossy compression for PNG files](https://en.wikipedia.org/wiki/Lossy_compression).

A great resource at [tinypng.com](https://tinypng.com/) is available to optimize images where you can quickly see how much smaller your image file sizes can be when compressed.

The website has the following example:


With one example you can see how easily you can reduce the file size significantly, which will improve your app's performance when it is displaying images. Another benefit of compressing your images is smaller installables for the end user to download for the Apple App Store and Google Play Store.