Compressing images the easy way

The dilemma?  I had a reasonable amount of images (50-100) that were being used in a production environment at the Center for Lung Biology and Disease.  However, many of them were too large, meaning that the user experience for someone trying to load our homepage was meaningfully harmed.  

I could have simply used an online image compressor to compress each image individually, or even in batches.  There are many high quality ones that can be used for free.

But this would have been a terribly tedious process, and although it may have taken the same amount of time (or even less) compared to finding a correct solution, I opted to try and learn something new.

The first promising lead I stumbled upon was a note on the Google Developers website, which listed two high quality programmatic image compressors.  When looking at the docs of them, I quickly settled on the Javascript friendly imagemin package, which boasts almost a million downloads a week at present.  

However, I struggled to find a way to integrate this into my client-rendered application's build process.  I considered ejecting the project from Create React App, but was hesitant to do so, because of the unnecessary complexity of fiddling with webpack.

Since I was using a project spun out of the excellent Create React App project, and searched their documentation for a plugin that could automate image compression. After several stack-overflow rabbit trails, I realized it was a dead end.  

I was finally saved when I realized that there was actually a closely related project called imagemin-cli that gave, as the name suggests, a handy command line interface to compress images in an efficient manner.  

One thing to keep in mind when using this project is that although the documentation doesn't mention the option explicitly, it is helpful to know that you can set the --out-dir (output directory) flag to the same folder that you are compressing.  This will let you simply replace the files with their compressed variants.

All in all, I'm glad I delved down the path slightly less taken.  I got to learn some about image compression, and CLI's, and the next time I face this problem, it will be significantly easier.

Subscribe to joshuaa.dev

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.
jamie@example.com
Subscribe