Question

In my web app i’m using MongoDB GridFS to store user uploaded images.

The rest of the site is managed by MySQL.

In a photo table (in mysql) I have three fields for storing the MongoId of the file object.

• small
• medium
• large

So I store three versions of the image. Small, medium and large.

My question is, sometimes i’ll need to use a thumbnail smaller than the ‘small’ version of the image (i.e. in a widget box, message avatars etc.) or i’ll need to use a slighly smaller version of the medium image.

So my question, would it better to just store one image in the GridFS system and then have one field in the photo table storing the MongoID and then create a script that resizes the image on the fly (i.e. http://localhost/image/fetch/{mongoid}?resize=50

Otherwise, in my db i’ll need thumbnail_50, thumbnail_100, medium_300, medium_400 etc. etc.

What would be the implications of going down the on-the-fly resize route? is it a bad or a good idea? What would you do?

Thanks.

Answer 1

Resizing on the fly will result in far more CPU load on your server than resizing to a variety of sizes once, and storing the results. On the other hand, resizing ahead of time may result in a larger set of data to be stored in GridFS. In other words, it’s a tradeoff.

You could consider a hybrid approach, where you resize on the fly but save the results back to GridFS so that you don’t need to resize any one image to a given size more than once.

You should also know that HTML and CSS allow various options for controlling the displayed size of an image. For example:

<img src="/path/to/image.jpg" width="50"/>

Will result in an image scaled proportionally to 50 pixels wide (in most modern browsers, at any rate). You can also use the width and max-width CSS properties to control image size.

For myself, and knowing nothing about the volume or file size of the images you’ll be storing, I’d probably resize when images are added — in other words, take the page speed and CPU load hit once — and then serve the various sizes out of GridFS, using max-width to control the on-screen size if a slightly different size is required in one particular case.