Best way to store images for a website

Question

Can someone guide me on the best way to store images for my website. Im making my first MVC website, and i thought i would just start with a Image website with comments on those images..ect

Im displaying my images in a gallery using javascript, which requires the url of the images. I want users to upload images, but im not sure whats the best way to store those on a server. Do i save them in folders on server as the pure image? Or is it best to use SQL to handle the data, be that a byte[] or ive heard of Filestream, could filestream give me what i need? Or is there a better way?

Thanks

Dermatome

If I wasn't at work I'd give you an extended answer to this, but within my company MVC (Modified version of CodeIgniter) I store images in a longblob field in mySQL (basically storing the raw image data) and display these images through a php script. For example, if I wanted to retrieve an image with an id from 1 from the database, I'd go to /image/1 and it would display that image. The pro of storing this in a database is that I can manipulate & then cache this data, which is good for image sites like yours. Our system is extended for /image/1/resize/100/100 and caches automatically for speed – Retaliate

Answer 1

I'd say store all images in an images folder, then store the path of the images in the database, for example if we are doing posts and each post has an image, we could upload the image into /webroot/images/ and save the path /webroot/images/someimage.jpg in the database.

If the website is going to have a lot of images, it's better to do further organization, having thousands of files in a single folder isn't good, especially if you're going to try connecting with ftp something, you could add one more folder with the post id ( in the example I mentioned ) so it would become /webroot/images/[id]/image1.jpg for example.

If the prefix is always the same /webroot/images you can ignore it in your database to save some diskspace provided that the app knows where the images folder is, also you might ignore the id in the second example, the view code would be something like this

<img src='<?= IMAGES_FOLDER."/".$post->getId()."/".$post->getImageName() ?>' />

ofcourse it would be nice to add an getImage() function in the post that does just that, check the example:

public function getImage()
{
    return IMAGES_FOLDER."/".$this->getId()."/".$this->getImageName();
}

The img tag would be cleaner now

<img src='<?= $post->getImage() ?>' />

PS: Storing images in the database is highly inefficient, since the database is usually the bottle neck of the application, storing images there would increase the database size, and would do more hits whenever accessing any image on the website, not to mention that to open any image you need to run a php ( or whatever language you're using ) script to serve that image, which would increase the RAM usage on the server.

Also since you mentioned that users are going to upload images, try avoiding storing images with the same name they are uploaded, makes things look silly, especially with long names and names that use spaces and stuff, I usually handle that by doing an md5 to the image name, or generating a random string and also md5 it, keeps the string length constant and looks cleaner, don't forget to double check for the existence of the image to avoid overwriting it.

Of course all the names that I suggested are just for the examples, you are free to use the names that suit your application.

Heddle

Thanks for the help. another question for someone, i wanna do video too at some point, so ill need a asp.net mvc4 host with a large filestore. does anybody know a good cheap site. – Dermatome

asking about a cheap service is kinda off topic, but if you need a really large storage i would suggest taking a look at amazon s3 service – Heddle

what if I want only logged in user to access his uploaded images, there is not a straightforward solution for this, right? – Incorporable

Answer 2

While there is no one-answer-fits-all for your question about the best location to store your images, you have options of storing the images on external file storage services like Amazon S3, Azure, etc, and saving the url to the images in your Database, or you could save directly to DB (Note: this is never advisable if you have a very large amount of images). Howevr, For performance "and security-related issues", you should consider having your images on your web server. However, like I earlier mentioned, it depends on your use-case. There are certain situations where DBs are not even an option worth considering at all, and your server's File System is your best bet (usually where you don't have too much BLOB and every unit is not as large as 1MB). In other scenarios, and usually with a little bit (or more) of advanced optimization techniques, Databases can be the better choice. More often than not, this is in situations where you are dealing with large amounts of binary data (Media, PDF, etc).

Conscious

A good service where you can store your Binary data is Microsoft Azure. Though it might seem much to learn at first, it is very easy to use. Here is a simple walk-through on how to integrate in a simple application: learn.microsoft.com/en-us/azure/storage/blobs/… – Conscious

Answer 3

Hash the image, store the hash with the record, this way records can share the same image as long as their hash matches.

Also store the hash in 2-d nested folders so you dont get too many files in the same folder.

For example, let's say you have an image: sample.jpg and you MD5 hash the image file to get a hash: E4D2A7D3DE4A2B8C2DF I would store the image like this: ./DF/C2DF/E4D2A7D3DE4A2B8C2DF/sample.jpg

The first directory is the last 2 characters of the hash, the next directory is the last 4 characters of the hash, the final directory is the full hash. This should evenly distribute the images across enough folders to avoid the "too many files in one folder" issue that can arise on most filesystems. If you still get too many files in a folder this way, you can nest it again and go for the last 6 characters of the hash as another nested directory.

Tenrec