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

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.