DEV Community

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

Alex on March 30, 2020

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

Collapse
 
htnguy profile image
Hieu Nguyen • Edited

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 ..

Collapse
 
alex002i profile image
Alex • Edited

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.

Collapse
 
htnguy profile image
Hieu Nguyen • Edited

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.

Thread Thread
 
alex002i profile image
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.

Thread Thread
 
htnguy profile image
Hieu Nguyen • Edited

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.

Thread Thread
 
alex002i profile image
Alex

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

Thread Thread
 
htnguy profile image
Hieu Nguyen

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

Thread Thread
 
alex002i profile image
Alex

Yep, I know, thank you!

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt • Edited

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.

Collapse
 
alex002i profile image
Alex • Edited

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.

Collapse
 
srleyva profile image
Stephen Leyva (He/Him) • Edited

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.

Collapse
 
alex002i profile image
Alex

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