Image caching/sharing in cross-platform fashion

dinobuljubasicdinobuljubasic USUniversity ✭✭
edited August 3 in Xamarin.Forms

We have number of images used as app assets, for case of simplicity, let's say 10 images only.

As far as I understand, Xamarin.Forms will **not **cashe these images, so if I have these 10 images showing in my toolbar (this is just to explain issue, we would not really put 10 images in a tiny toolbar) and I have 5 pages showing same toolbar, that means the 10 images will each be loaded 5 times resulting in total 50 images loaded in memory (5 pages x 10 images = 50 images). I would like to load only 10 images and use them any number of times in the GUI.

In addition, if I have to add these 10 images in our repository, I would have to add at least 3 copies of same image to our repository (1 for Android, 1 for IOS, 1 for UWP). I'd like to have one single copy of image that can be shared among all projects and loaded into memory only once but displayed in all 5 pages.

So, these 2 issues make be believe there should be a better cross-platform solution so that I can share same image across all 3 platforms and I load an image only once in memory regardless how many times it shows in the UI.

Tagged:

Best Answers

  • N_BauaN_Baua INMember ✭✭✭✭✭
    Accepted Answer

    Hi @dinobuljubasic ,

    You're concerns would be addressed by following plug-in greatly:

    Make use of their cache-handling API.

    Hope it helps.
    Regards,
    N Baua

  • HunumanHunuman GBMember ✭✭✭✭
    Accepted Answer

    Hi @dinobuljubasic

    Caching of image files should not be conflated with memory usage.

    Images files that are retrieved from the web can be cached locally in storage - in "The Cache".
    Images files that are shipped with the App whether embedded or assets/resources are always there, so don't need to be downloaded and cached.

    As regards memory please consider:

    A image File is loaded into a Instance of a Image object in memory.
    If you load the same image file into 2 separate Image object instances, that will take twice the memory.

    The same applies If you write logic to load the image file into a memory stream and then use that as the source for your Image objects. Each Image object needs a copy of the image data in order to process and display it.

    So the only solution would be to load the file into single Image instance that is shared among your pages, by adding the instance to each page's hierarchy at the required point, but remember a Image can only have one parent at a time.
    What if you need to display the same image more then once on a page?

    Frankly it would not be worth the effort in 99% of use cases.

    Hope this points you in the right direction.

    Tim

Answers

  • N_BauaN_Baua INMember ✭✭✭✭✭
    Accepted Answer

    Hi @dinobuljubasic ,

    You're concerns would be addressed by following plug-in greatly:

    Make use of their cache-handling API.

    Hope it helps.
    Regards,
    N Baua

  • HunumanHunuman GBMember ✭✭✭✭

    Hi @dinobuljubasic

    Caching does not apply to assets you are shipping with the App, since they are already there.
    To avoid having a copy of each image in each platform project simply embed the images in the PCL project.

    As regards loading multiple times, embedded images are managed efficiently by the framework, but that does not stop you from managing them in code if you wish, though its probably unnecessary IMO.

    Hope this helps,

    Tim

  • dinobuljubasicdinobuljubasic USUniversity ✭✭

    @Hunuman Would you mind elaborating please?
    Also, I am observing that my app uses same amount of memory if I show the same image at multiple places in UI as if I were using different images (of same size). I would expect this not to be happening if I am showing 1 same image 10 times as opposed showing 10 different images. Thanks

  • HunumanHunuman GBMember ✭✭✭✭
    Accepted Answer

    Hi @dinobuljubasic

    Caching of image files should not be conflated with memory usage.

    Images files that are retrieved from the web can be cached locally in storage - in "The Cache".
    Images files that are shipped with the App whether embedded or assets/resources are always there, so don't need to be downloaded and cached.

    As regards memory please consider:

    A image File is loaded into a Instance of a Image object in memory.
    If you load the same image file into 2 separate Image object instances, that will take twice the memory.

    The same applies If you write logic to load the image file into a memory stream and then use that as the source for your Image objects. Each Image object needs a copy of the image data in order to process and display it.

    So the only solution would be to load the file into single Image instance that is shared among your pages, by adding the instance to each page's hierarchy at the required point, but remember a Image can only have one parent at a time.
    What if you need to display the same image more then once on a page?

    Frankly it would not be worth the effort in 99% of use cases.

    Hope this points you in the right direction.

    Tim

  • MichaelSalzlechnerMichaelSalzlechner USMember ✭✭

    i am using FFImageLoading for embedded images as well if they are in a listview item. If not the app crashes with out of memory

Sign In or Register to comment.