0

I am creating a simple system where users can view a small image by entering the name of that image into a search box. I am having trouble deciding how to store the images in the most efficient way. I have thought of 3 solutions, and I am wondering which one is the best solution for this problem:

  1. Storing the Images as blobs or base64 string in a Database and Loading the Image based on the user input with a simple query. Doing it this way will increase the load on the database and will result in longer load times.

  2. Storing the Images as separate files on a file server. And just loading it by assigning the image.src attribute based on the user input: image.src = "./server/images/" + userInput; Doing it this way however will increase the number of file requests on my server, so it will be more expensive.

  3. Or lastly, I could store the Images in a single zip file on the fileserver. And download the all at once at the start of the program. The advantage of this, is that there will only be a single request when loading the page. However it will take some time to load all the files.

Note that each image is around 1-3KB in size. And all images will be placed on the server/db manually. Furthermore, there will only be around 100-200 Images max. So all these considerations may not matter too much. But I want to know what the recommended way of doing this is.

NOTE: The server I am running is an AWS server, I I found that having too many requests will increase the cost of the server. This is why I am sceptical about approach nr. 2

  • 2
    #3 is most likely a no-starter. What happens if you have 10K images and the user only views 1K (or 500, or whatever)? You've used the bandwidth to transfer the file of which most of the content is never used, and added the overhead of locating and extracting the files that *are* viewed from the zip file to a temp file on disk that can be loaded for viewing. You've also added the overhead and complexity of updating the zip file when images are added or deleted. – Ken White May 01 '16 at 00:54
  • There will only be around 100 Images. But what you said would still apply. Good point. –  May 01 '16 at 00:55
  • As far as your note, you're going to have the same number of requests in either case, whether the request loads the image from the DB or from disk. – Ken White May 01 '16 at 00:57
  • So you recommend approach 1 since it would be faster? –  May 01 '16 at 01:02
  • Personally? No. I'd use approach 2, as it's much easier to maintain - you simply put a file in the folder and add a row in the DB containing the filename. It's going to be slower to retrieve the blob and convert it to an image (which still has to become a disk file in order to be loaded), plus you have the added complexity of putting it into the blob in the first place. – Ken White May 01 '16 at 01:05
  • 1
    I would agree with the above - it's a request either way, and whilst fetching the data from SQL is quicker than using the file system - the server still has work to do since it only has a Base64 string. Option #2 is your best bet here. If costs of the server is of concern, may I suggest using a CDN for these static resources? – CmdrSharp May 01 '16 at 01:30
  • Thank you for the suggestion. I will look into into using a CDN instead. –  May 01 '16 at 01:33
  • Possible duplicate of [What are the Options for Storing Hierarchical Data in a Relational Database?](http://stackoverflow.com/questions/4048151/what-are-the-options-for-storing-hierarchical-data-in-a-relational-database) – Neil McGuigan May 01 '16 at 02:34

1 Answers1

1

I too, manage stored images and retrieve from a AWS, EC2. My solution, and suggestion to you is similar to option 2, but adding caches as a way to reduce server requests.

Keep the images in a folder, or better in a S3 storage, and call by name from either a database query that holds the URL or just the image name. Then place it inside a placeholder in HTML.

Select url from img.images where image_name='blue_ocean'

then I bind it to a placeholder in HTML

<img src="/images/< blue_ocean>.jpg alt="">

About many request to the server, you can cache images, I suggest the use of Service Workers a powerful WebApi which allow to cache images, and therefore reduce the amount of data served.

Another approach is to use Sprites, which is a one file or image sheet that contains all the requested images, so instead of many requests, just one request, then grab each required image by parsing it's X,Y, coordinates. This method is very efficient, is used in games, in order to reduce the overhead derived of requesting multiple images in short spans of time, multiple times.

digitai
  • 1,870
  • 2
  • 20
  • 37