You may or may not be new to Grunt, and as you become more comfortable using it you’ll most likely desire diving into other aspects of the tool chain in order to expand upon tasks like code linting, pre-processor compiling and especially image optimization which is the task we’ll be discussing today.
To install grunt-contrib-imagemin run the following command from the terminal within your project’s root directory.
npm install grunt-contrib-imagemin --save-dev
Now that we have our task in place we can now harness the functionality of this plugin and include it into our workflow. For you Codekit users out there you may or may not be aware that as of this writing Codekit bloats image file sizes randomly when optimizing .jpg or .png files.
As you can see from the output above we not only get to optimize .png files, but we also get to optimize our .jpg files at the same time! If you wanna run this task on just your .png or .jpg files you can customize your grunt.registerTask like so…
With the above tasks registered we can now execute the tasks we’ve defined above from our Terminal like so…
[…] Grunt image optimization […]
I cannot see compression report for individual files, it only says: ‘Minified 58 images (saved 11.05 kB)’. Why? Is there an option to set for that?
And just a small thing, I would recommend setting the output path for compressed files outside the directory with original images – this way when running task again files will not be duplicated 🙂
Good point Mia. Definitely the best choice to keep images that are optimized in a separate directory when you run the task. I’ve also experienced my original image files become completely blank after I optimized.
As far as your compression report I would raise an issue in the tracker in order to get a better idea. I’m not aware of any settings from what I have posted to date.
Since the Roots WP Starter Theme integrated Grunt Workflow I can’t live without it anymore.
This is really a great module. But I have really strange bugs with it. Most of my images compress adequately but some of them have a big black line at the bottom of them. This is no error message when running grunt server. I can’t understand why I have this. Any idea ?
Unfortunately I have no clue without seeing the images and your settings. I highly suggest filing an issue on the repo’s issue tracker.
I was getting “Warning: Maximum call stack size exceeded grunt imagemin” everytime I tried. (I’m new to using grunt). I did some poking around and found that this line:
Was causing the problem. If I rename the task to be different ie: (‘default’,[imagemin’]) or (‘imageminAll’,[imagemin’]) the error went away.
Thanks for the great tutorial.
Thanks Dennis for this tutorial. Very helpful
Got everything set-up and working, just wondering how to automate the process with a watch sub-task, so that I don’t have to run the grunt command to minify. Can’t quite get that part working.
Any advice would be greatly appreciated.
If you’re asking how to create a watch task for your image compression task I would suggest not doing so. Watching your image files and compressing as you work is gonna slow things down for you tremendously. Instead, I suggest making a task called “build” and include all your final build steps like image compression, combining JS files, compressing CSS, etc. If I missed your question completely let me know.
I’m needing clarification on the optimizationLevel option. My assumption was that changing this value will increase/decrease the amount of compression, thus changing the file size of the output .png file, but no matter what I set it at I end up with the same end file size. Am I doing something wrong, or am I misunderstanding the purpose of this option?
“Filtering does not compress or otherwise reduce the size of the data, but it makes the data more compressible”
Not sure if this is the answer and quite frankly the explanation on the GitHub docs for this Grunt task is not stated in a clear manner to understand fully. Might be a good issue to raise in the tracker in order to get a response from the community.
Thanks for the write up, just found Grunt while looking at some methods for optimizing images on a Discourse forum and then came across your post which explains things a lot clearer than the docs. How would one adapt this to only compress images older than 30 / 60 / 90 days for instance?
We don’t use Grunt anymore, but suggest asking on GitHub https://github.com/gruntjs/grunt-contrib-imagemin. There are other options out there such as grunt-newer that is meant to run with newer files only. That might be of some help.