Day009

Continuing from the project in Day008, I want the uploaded images to be optimized so that less storage is used to store. Optimized/Compressed images are also very useful when it comes to web page load time. There are already lots of npm module that has integrated with automated task runner, like grunt or gulp that you can add to the pipeline of building project. Therefore, whenever your web project starts up, it will have optimized images ready for user to load, thus, it requires a shorter load time. It gives a better user experience because user can still access your website even they don’t have the best mobile connectivity, and he can start to engage the content you want to deliver to them. It is a win-win for user and dev.

I used imagemin for the image optimization.

npm install — save imagemin

It is a quite popular module. It includes many optimization/compression algorithm for you to choose.

https://www.npmjs.com/browse/keyword/imageminplugin

I did not investigate very much on single one of them. I just want to find out if there is an npm module that can provide a comprehensive and easy-to-use image optimization function. So, I just leave every optional configuration blank. I will definitely give more effort on that if I really start a production project that involves image optimization, which every project does.

— — — — — — — — — — — — — — — — — — — — — — —

I also found a npm module that helps to elegantly handle the necessary but troublesome configuration settings, like use key A for dev and key B for prod.

npm install — save config

a config .json is set for one scenario, another .json file is for another scenario. Separating different setting for different environment gives a more manageable and easy-to-follow project.