Store generated image in database or generate it on server/client

Question

I have been thinking what could be the fastest way to show base64/img data to the user, i could generate the data when the user is registered and then store it to database, or generate it every time it is requested.

this is something i am thinking to make the response fast and i could just generate the img data in client. which many elements will have them generated, but i don't know if this could make the loading data take longer time.

So, is it better to store base64/img generated data on database?.. if not then who should generate them.. client or server?

update: To be more clear on the question, the generated data is Identicon, my concern is what would be the fastest way to show it to user, this could be shown once or multiple times in a single view regardless the power on server

Answer 1

... i could generate the data when the user is registered and then store it to database, or generate it every time it is requested.

This sounds like two completely different operations to me:

1) Generate [static] "image" data when the user registers and store it in a database.

2) Generate some dynamic "image" data whenever the user visits a page.

My question is this: Having loaded your "image" data into a database, what are you going to do with it? If the answer is simply ...

Read it back, write it to a file and display it in the user's browser

... then you're better off leaving the "image" in the file system, from where it can be served directly.

Even if you're adding some sort of dynamic content to the "image", then storing or, at least, cacheing it in the file system will still make for a quicker, operation overall.

Trying to do anything "client-side" is risky. Even putting aside the vaguaries of browser implementations of JavaScript (at least until WASM https://en.wikipedia.org/wiki/WebAssembly takes off), you're totally reliant on the available processing power of the client machine to handle all that "image" processing you want to do. That might be OK on somebody's shiny, new multi-GHz Uber-phone but on their clunky, old, 10-year-old laptop? Perhaps not so much.

Answer 2

I would say the easiest way is to store it physically : you don't need any kind of handler or database call to retrieve the image, further managing will most probably be easier aswell as client-cache handling.

There's actually not a lot of good reasons to clutter your database with images, so I would say this alternative is only just acceptable in some specific cases like needing this image distributed among several servers. And even then, you could think about something like a CDN to share physically stored images accross multiple servers.

In some cases, you could also think about BASE64 encoded images in the CSS file, which may open the doors to responsiveness and have an impact on loading time by reducing the number of requests, with an impact on CSS file size though.

So, long story short: unless very specific requirements, the best is to store it in a (distributed) filesystem.

Answer 3

Nosthertus, please clarify your question more. I'll answer based on what I can understand now but will change/update it once you clarify.

If you generate once and read many times, then storing is a good idea.

Storing directly in the database is a bit more programming but has the benefits of putting everything in logically a single view that any app can use. Storing in a filesystem is not advisable because you don't get some of the DB beneits (depending on your choice of database platform) like transaction handling etc.

However what little I know about identicons is that depending upon what you're doing, the identicon for any use could be different if they moved to another machine or IP address. So in that case you have to generate every time.

Your follow on question about "is it better to generate on client or server"... This is important in that can you safely guarantee that if generated on client or server, the resulting image will be identical? That depends on what algorith you're using.

So clarifications needed are.. instead of vague "let's assume", can you clearly state what you're trying to do? What are you concerns? Performance or space usage? How does this image get used in the UI?