Images storage performance react native (base64 vs uri path)

by

I try to avoid text only answers; including code is best practice but the question about storing images comes up frequently and it’s not really covered in the documentation so I thought it should be addressed at a high level.

Generally speaking, Realm is not a solution for storing blob type data – images, pdf’s etc. There are a number of technical reasons for that but most importantly, an image can go well beyond the capacity of a Realm field. Additionally it can significantly impact performance (especially in a sync’ing use case)

If this is a local only app, storing the images on disk in the device and keep a reference to where they are (their path) stored in Realm. That will enable the app to be fast and responsive with a minimal footprint.

If this is a sync’d solution where you want to share images across devices or with other users, there are several cloud based solutions to accommodate image storage and then store a URL to the image in Realm.

One option is part of the MongoDB family of products (which also includes MongoDB Realm) called GridFS. Another option is a solid product we’ve leveraged for years is called Firebase Cloud Storage.

Now that I’ve made those statements, I’ll backtrack just a bit and refer you to this article Realm Data and Partitioning Strategy Behind the WildAid O-FISH Mobile Apps which is a fantastic article about implementing Realm in a real-world use application and in particular how to deal with images.

In that article, note they do store the images in Realm for a short time. However, one thing they left out of that (which was revealed in a forum post) is that the images are compressed to ensure they don’t go above the Realm field size limit.

I am not totally on board with general use of that technique but it works for that specific use case.

One more note: the image sizes mentioned in the question are pretty small (500 ~~ 800 kb img size) and that’s a tiny amount of data which would really not have an impact, so storing them in realm as a data object would work fine. The caveat to that is future expansion; if you decide to later store larger images, it would require a complete re-write of the code; so why not plan for that up front.

More Related Contents:

  1. How can I save a base64-encoded image to disk?
  2. How to convert BASE64 string into Image with Flutter?
  3. React-Native: Convert image url to base64 string
  4. BASE64 to image angular 2
  5. Loading image src using a variable containing base64 data in AngularJS
  6. Convert base64 byte array to an image
  7. Convert an image to grayscale in HTML/CSS
  8. base64 encoded images in email signatures
  9. Does SVG support embedding of bitmap images?
  10. Convert an image (selected by path) to base64 string
  11. Uploading/Displaying Images in MVC 4
  12. Algorithms: Ellipse matching
  13. Convert base64 string to image
  14. How to find all connected components in a binary image in Matlab?
  15. Converting a PDF to PNG
  16. How to do this image transformation?
  17. Phonegap Plugin:How to convert Base64 String to a PNG image in Android
  18. matplotlib imshow(): how to animate?
  19. How to parse into base64 string the binary image from response?
  20. Google Maps image?
  21. MATLAB: Drawing a line over a black and white image
  22. List of all the App Engine images service get_serving_url() URI options
  23. How to remove all lines and borders in an image while keeping text programmatically?
  24. How to render a scaled SVG to a QImage?
  25. Google AJAX API – How do I get more than 4 Results?
  26. Advantages and disadvantages of using base64 encoded images [closed]
  27. Is it OK to HTTP redirect images?
  28. How to convert an Image to UIImage?
  29. React-native iOS not showing images (pods issue)
  30. How to apply Gabor wavelets to an image?

Leave a Comment