Saving images in a database or in the project's folder?

Hi guys, I am thinking how should I save the images for my blog, in a database or in the project's folder?

Comments

[Hieu Nguyen]

Depends on the scale(#of users) of your application and frequency of access(lots of upload) . For any medium to large scale website -talking thousands of request and uploads, it is best to use an external file storage service like AWS S3.

From a cost standpoint, storing huge load of User files on the database or project folder is bad practice and will tie up resources for other things like codes file, templates, data, etc ..

[Alex]

The project is not that huge, I am the only one who will post on the blog(in the near future, I hope), the site will also contain some c++ lessons about basic programming. So, I will never store more then 50-100 images. The site will also have some problems to solve and submit the code to check if it's working, and some quizzes.

[Hieu Nguyen]

Hi again 😄. Are you using a static site generator like Gatsby to create your blog? If so, I can definitely say that storing your markdown files (blog files) in the project folder is fine. They even have a plugin for reading from file system and dynamically creating blog pages for you.

[Alex]

Hi :)), I am using Laravel. The blog is almost done, I am just wandering how should I save the photos. The markdown problem is already solved.

[Hieu Nguyen]

you can store the image in the project, and later down the road, if it grows out of control, start outsourcing your image to AWS s3 or a similar service. The process flow for how this would be implemented is:

1. you add image to aws s3 programmatically or manually using their web client
2. you save the link to the image location in s3
3. you update the img src tag to point to the s3 location.

Again this is kinda generic, but there should be plenty of tutorials on how to integrate s3 into your app. Note: you don't need a backend to programatically send images to s3, you can do it from your front end client, but most guides will advise you to refrain from doing this and instead use a backend as a gateway to protect your s3 code.

[Alex]

Thanks, I didn't think about saving images in cloud.

[Hieu Nguyen]

make sure to compress/process the image before uploading, since some high quality images will consume your storage.

[Alex]

Yep, I know, thank you!

[Pacharapol Withayasakpunt]

If for online stuff like a blog, I would say, in an online storage service.

Cloudinary free tier is quite generous, and it offers image resize on the go. Might be easier than AWS or Google Cloud as well.

I also recommend lazy loading, like lazysizes. Gatsby also has plugins for similar services.

If you mean learning from examples and minimize external services, WordPress stores images in a project folder.

[Alex]

I will try to make a bigger project, the website won't contain only the blog, it will have some problems to solve and test with a compiler and some quizzes. I will take a look on Cloudinary since I don't need to store more then 50-100 images.

[Stephen Leyva (He/Him)]

This system architecture video has a good explanation on the trade offs of Blob storage and File system storage. Starts at the 6 minute mark:
youtu.be/tndzLznxq40

Though, as recommended in other answer, S3 with Cloudfront acting as a CDN is an extremely viable option in terms of cost and maintainability.

[Alex]

Thank you too for the answer. I will take a look on the video.