search

candlefinance / faster-image

Fast image loading for React Native backed by performant native libraries.
https://candle.fi/discord
MIT License
479 stars 21 forks source link

Memory spike with 100+ huge images. #25

Open bglgwyng opened 2 months ago

bglgwyng commented 2 months ago

I made a reproducer here, just by increasing the image sizes. https://github.com/bglgwyng/faster-image/tree/reproduce-memory-spike

I considered this library an alternative expo-image as it also has the memory spike problem. See https://github.com/expo/expo/issues/26781.

I tried both expo-image and faster-image in a gallery view that renders 100+ images with a size of 1920x1080, 1MB each. I don't consider it a too pathological case as many gallery-like views would do the same, but both libraries crashed the app with a memory spike.

I wonder why the memory spike is so high. It reaches 2GB for 100 images, which is 20MB per image. I understand the image is decompressed and stored in memory, but 20MB for a 1MB image seems too much. Image in react-native loads images slower, but it uses much less memory and works fine with 100+ images. How is it possible? Which difference in the implementation causes this?

Also, I have a question if just throttling the image loading helps in this case. Throttling the image loading seems trivial, so I suspect that it can affect the user experience as it slows down the image loading, and that's the reason why expo-image and faster-image don't do it.

In my case which renders 100+ images but in a smaller size as thumbnails, so caching the resized images would be helpful. It doesn't seem that expo-image and faster-image do so.

gtokman commented 2 months ago

Interesting... thanks for the reproducible project. Will take a look today / tomorrow!

gtokman commented 2 months ago

Could be related: https://github.com/kean/Nuke/issues/776

gtokman commented 2 months ago

@bglgwyng having trouble reproducing this, seems to be working fine for me.

Screenshot 2024-04-28 at 8 37 10 AM
bglgwyng commented 2 months ago

@gtokman Could you set grayscale: 1? I found that the memory spike is not observed when grayscale option is not set.

But one thing weird is that I don't use grayscale option in my production app but the memory spike occurs.

gtokman commented 1 month ago

@bglgwyng I haven't tried it with the grayscale, can check this tomorrow. Out of curiosity if you load 100+ images of that size into a local xcasset directory and show them in a SwiftUI list, do you see the same memory spike? Or they have an AsyncImage component to test the remote case.

koenzi132 commented 3 weeks ago

Any progress? (btw, thanks for making this library :)) I also use a lot of images in my App. When I use react-native-fast-image, memory usage is under 1GB, but using this library, memory usage is growing up more and more. Now I'm seeing over 9GB on XCode Debugger...

react-native-fast-image is too slow on android, so I really want to use this. I hope there's any solution for this..

gtokman commented 1 day ago

@koenzi132 would love to see a small example or branch if you modify the ./example proj with a public image API.