Handling large numbers of images

Handling large numbers of images

Hi guys,

Tested packaging a large number of images about 358 images of varying sizes from 12KB to 15KB each. The appmobi notice popped up and stated that the total amount of memory taken is 40MB abouts. My app would require adding more image content as time goes by. Would putting these images into the media cache take up memory? Are there any techniques that you guys can recommend that I use to help scale?

14 posts / 0 new
Last post
For more complete information about compiler optimizations, see our Optimization Notice.

Hello Kok,

I suggest you not to include the image into your app directly as this may increase your app size. Instead you can put up your images in media storage and can use the link of those images whenever required(if the images are changing according to individual users).


So if I understand you correctly, keep the images in a server somewhere, then load the images into cache? If I load all the images into cache it would not overload the device's memory? Thanks for the help!

Mr Kok...

I am unable to understand your issue clearly. if you could explain i can searc for alternative technologies.

PONRAM solution is interresting. In fact, Kok Weng L, you may put your images into a directory (into a distant server for example and load it when you need.... I didn't try it before, but logically, it works) ... good luck ;)

:) Thank you karray for supporting my solution

Hello Kok,

That warning about memory size and the images is a little deceiving. Since the images are simply "assets" that are carried along with your app, the only time they impact your application is when your end user does the initial installation of the images onto the device. In other words, including a large number of images with your application simply increases the size of your native install package (what your HTML5 gets turned into when you do a build).

Assuming you are only using a subset of the images at any given moment, within your application, the only memory issue you need to concern yourself over is how many images you are loading at any given moment into your application. It is important that you recycle the <div> space  (or <img> or however you are incorporating the images into your DOM) between the images. If you keep creating new DOM elements for each image you will have memory problems, since the webview that your hybrid HTML5 app runs in is much more memory limited than compared to running a web page in a browser. That means that you need to limit the number of images you load into the DOM in order to avoid memory problems.

This warning assumes you will load ALL of your images into the DOM. If your application loads all the images in your application into the DOM then you will have a memory problem. If you recycle DOM elements to hold a reasonable subset of the images you should not have a problem.

There are some excellent discussions regarding this issue put together by the folks at Netflix. They must deal with a huge number of images in what appears to be an infinite number of DOM elements. They build a grid and move the images through the grid to give the illusion of an infinite number of images being available. If the grid moves too quickly they simply fill the grid elements with gray boxes until they can catch up and then start filling the elements with real images.

Hope that helps.

the images can be placed on some server and download in its first run is a solution.

Hai Ponram,

                       Read your article about images, i want to know, whether same kind of logic can be employed for 2000 swf, which can be arranged in different folders, so that individual users can call required swf with a general loader, comment

yes it is Handling large numbers of images and it is good

Hi, you might compress the image or upload on images server and again path for this.

You should optimise your app so that the user doesn't notice whether you're caching images, rendering them from a local database or fetching them from the server.

Hi, if you use one images server cloud and redirect to your site or app?

Hi Kok, the google cluod service is a good option for manage of big data!

Leave a Comment

Please sign in to add a comment. Not a member? Join today