Best way to allow users to select an image stored in my database?

Hi Bubblers, I am hoping for your wisdom!

In my app, I am thinking about creating a feature where a user can assign an image as a background to different folders they create. So like Trello for example, you create a board, set a background and that becomes the boards wallpaper.

I experimented with uploading a range of stock images into my database under an image data type and then created an option set, so when a user created a new folder in the app, they have the option to choose a background for it.

This all worked fine but I am seeing that the load times can be quite slow, particularly at the first time of opening a particular folder in a user session. Once it has been opened once, if the user goes back in, it is pretty seamless but the performance initially is not good enough imo.

I would love to hear any suggestions for how I could make this perform better?

Try using webp images instead of pngs or even jpgs. They retain the quality but can shrink the file size to a fraction of the original.
Here’s a tool to convert images to webp
https://cloudconvert.com/webp-converter

Thanks, i’m going to try this out!

Hey,i am building a Trello clone, i have implemented this you can see it here. Where user can choose its workSpace background, from unsplash pictures or simple a colour.

If you want, i can implement it for you for free. Only when you like work and only if you wish you can give me compensation. If not its okay :ok_hand: :slightly_smiling_face: , i will not ask you for money.

1 Like

As suggested by atomicfusion, you can get much better performance using webp format.
Another thing to check is the pixel size of the images: what you download from stock pictures sites is usually very large, for instance 4096x4096 pixel or even larger.
Reduce the size of your images with your favorite image processing app to something around the pixel width of your app or even smaller.

2 Likes