Firebase/Google Cloud Storage how to store the image

Question

I have a Firestore that has a User Document. When a User uploads a profile image to the bucket I resize it in the Cloud Function and then save the smaller thumbnail of it. Now I am not sure what the best practice is to receive the Download URL for it, there are 2 possibilities:

1. In the Cloud Function get a Signed URL and store it in the Users Document or
2. Get the download url on the frontend with the .getDownloadUrl() method.

The problems I have with either solution is

1: The URL is really big, getting multiple Users on a Page this adds up in more size than the actual rest of the User Document 2: In terms of speed im not sure if its the best to loop through a list of Users to get each's thumbnail download URL, but the advantage is I do not have to deal with normalizing the new Profile Pic URL one every occurrence in the database.

Answer 1

1. The URL is not that that big. Before trying to optimize, first collect some clear benchmarks that suggest the size of the URL is seriously impacting the performance of the page. Don't optimize this if it doesn't need it. I've never heard of anyone complaining that a download URL is bad for performance.

2. You don't need to loop over all users. You should arrange to have the UID of the user available at the time of the resize, so you can update the correct user. You can put the UID in the path of the file upload and parse it out, or you can put the UID in object metadata at the time of the upload.

Either approach is valid, though. Pick the one that suits you the best. Generating it on the backend is probably more resilient to errors.

Answer 2

As Doug Stevenson mentioned in his answer, I also think you are trying to optimize something that's not even a performance or storage problem. However, if you still want to optimize the size of your URL, I have two solutions for you.

As we already know, the URL of a picture looks similar to this:

https://firebasestorage.googleapis.com/v0/b/project-id/o/images_folder%2vvTMvCsCRsckpR3R5Qg2s.jpg?alt=media&token=2277f575-8ff7-2211-8262-a28ef679d703

So the first solution would be to shorten the links using a service like tiny.cc. There are also other examples but I think you get the idea. So in case of the URL above, after you shorten it, will look like this:

http:// tiny.cc /2r4ucz

The second solution requires the saving two things in your database. It is not about shorten the link, it's about storing less data. So as you can see, the URL above is combined from a "BASE_URL":

https://firebasestorage.googleapis.com/v0/b/project-id/o/images_folder

Which includes the name of your project and the name of the folder where you store the images. It also contains the name of the image, which in my case is an id that is generated by Firestore and it's by definion unique. And the last part is the token id:

2277f575-8ff7-2211-8262-a28ef679d703

So the second solution would be to store in your database only the id of the image and the token and then reconstruct the entire URL client side. So in the example above the only things that you should store are:

Firestore-root
  |
  --- users (collection)
       |
       --- uid (document)
            |
            --- id: vvTMvCsCRsckpR3R5Qg2s
            |
            --- token: 2277f575-8ff7-2211-8262-a28ef679d703
            |
            --- //Other user details

If your user will always have a single picture then you can use instead of that random id, the uid that is coming from the authentication processs:

String uid = FirebaseAuth.getInstance().getCurrentUser().getUid();