Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Memory spike with 100+ huge images. #25

Open
bglgwyng opened this issue Apr 27, 2024 · 6 comments
Open

Memory spike with 100+ huge images. #25

bglgwyng opened this issue Apr 27, 2024 · 6 comments

Comments

@bglgwyng
Copy link
Contributor

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 expo/expo#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
Copy link
Member

gtokman commented Apr 27, 2024

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

@gtokman
Copy link
Member

gtokman commented Apr 27, 2024

Could be related: kean/Nuke#776

@gtokman
Copy link
Member

gtokman commented Apr 28, 2024

@bglgwyng having trouble reproducing this, seems to be working fine for me.
Screenshot 2024-04-28 at 8 37 10 AM

@bglgwyng
Copy link
Contributor Author

@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
Copy link
Member

gtokman commented May 11, 2024

@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
Copy link

koenzi132 commented Jun 3, 2024

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..

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants