Does the image compress an image with less memory?

Question

This is a kind of architectural / conceptual question about how the system (in particular, the web browser) handles compressed images.

We are dealing with an image gallery web application that has eleven 1920x1080 images on a page that you can transfer to your iPad. We find this to be very slow, and I'm pretty sure about it because the iPad is having problems with having a large number of images in memory and on the page at the same time.

Some suggested we compress the images more; they are currently PNGs and they want to recompile them into jpg. Obviously, the file size will be smaller, but if the iPad (and others) cannot directly display the compressed image on the screen (frame-buffer), I think they will have to unpack the image into memory before rendering. In this case, it seems that the compression will not affect on the performance of their rendering. (Except for a small added processing power when unpacking them "more.")

Is my understanding and assumption correct? Should we resize or rearrange the images?

thanks

Additional information - read this before telling me “yes, compressed images are less” - I am a developer, not a user:

Using less space is not the same as using less memory. We have no problems with storage, we have a problem with rendering performance. The code is simple and simply animated between one div and next to give a gallery effect to the gallery.

When we remove images from the equation, performance is great; therefore, I am sure that the bottleneck is the images, not the code.

Asked question: “Compresses the image to use less memory” because others want to compress the images more to improve performance. As far as I understand, the compression architecture, however, you still have to unpack it to its original size in memory in order to use it, and thus, compression does not affect memory usage; only storage and transfer.

Answer 1

Does the image compress an image with less memory?

No, the image will use the same amount of memory (alas pixels) if it is displayed on the monitor, for example.

Compression is applied to the image container, usually a file or a temporary memory buffer, but on screen it uses the same thing.

This is because you need to select each displayed pixel.

For an image of 1920x1080 in 24-bit, it will use 1920 x 1080 x 3 bytes (one byte for each color component in RGB → 1 byte = 8 bits) or 6,220,800 bytes (approximately 6 mb).

Should you re-compress?

This does not take up less memory space when displayed, but can be loaded faster into memory. But about that.

Now the application needs to decide whether it will unpack it only when sewing the image (which will cause a delay) or unzip everything and instantly display them. This solution is application-based, so you will need to test a specific application.

Answer 2

I can’t speak specifically for iOS, but unloading decompression onto a GPU may be the best, and this requires a rather complicated architectural work. Therefore, I find it unlikely that using a higher compression ratio will really improve the performance of your application.

However, splitting images into smaller fragments is a general solution that I would recommend you try.