Search code examples
androidimageandroid-glide

How to handle many images in an Android app

I am writing an app that has a lot of images (about 200) which are different items that you can select and order. So far I have been using Glide to load the images from file. To support different resolutions, I made a image of the item with my smartphone and converted them into the 5 different Android resolutions in the folders drawable-mdpi, drawable-hdpi, drawable-xhdpi, drawable-xxhdpi and drawable-xxxhdpi.

The problem is that the original image has as size of 4,2 MB and all 5 images together just for one item for the different resolutions have a size of 18 MB (0,7 MB, 1,5 MB, 2,5 MB, 5,6 MB and 7,8 MB). If I now do this for 200 images, I will have to store 3,6 GB of images within the app. Thus, the size of the app would be extremely big.

So I would like to know what is a good way of dealing with so many images in an app? Is there a way to include multiple images for different resolutions while still having an app whose size is not enormous?

Solution

  • Follow the following steps:-

    1. First of all, compress all of your 200 images. I will suggest you to use this website or any other.
    2. After that add all the images to your drawables.
    3. Convert all of your images to 'webp' using Android Studio.

    1st Screenshot

    Set the quality percentage according to your desire

    2nd Screenshot

    See the difference of image sizes

    3rd Screenshot

    In this way, quality will not be much compromised & large size problem will be solved.

    -> Drawable Folder Position 

    loadGlide(R.drawable.testing, imageView)

    Call this function from everywhere

    Kotlin

    private fun loadGlide(resId: Int, imageView: ImageView) {
    Glide.with(context).load(resId).with(imageView)
}

    Java

    public static void loadGlide(int resId, ImageView imageView) {
    Glide.with(getContext()).load(resId).with(imageView);
}