How to Compress Images with the ImageOptimization RubyGem
In this Ruby Programming Tutorial, we are gonna walk through how we can optimize the size of our image files using a RubyGem. We're going to be diving into how to use the image optimizer gem.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

Now, if you're on a Mac then you can use the Homebrew tool in order to install this, and you'd run the command brew install. And then you need to install a few dependencies before we can actually get into installing the gem. And those dependencies are gonna optipng, which is just short for optimization, or optimize png, jpegoptim, then gifsicle, and then pngquant.

Now you can simply run Homebrew and install these, I already have these installed on my system, so it'll take a little bit shorter period of time assuming they haven't pushed any updates since the last time that I installed these on my system. So, you can see it's updating Homebrew, it shows that all of these are already installed and up to date, so if you do not have those installed on your system they might take a little bit longer.

Now, if you do not have Homebrew installed on your system then you can simply go, let me show how to get there. You can go to Homebrew SH. You can go there, and it'll give you the exact command to copy and paste directly into the terminal.

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

You just copy that, and then you'd be able to run the exact same command that I just ran assuming that you do not have it installed on your system.

So, now that you have that, it's gonna be time to install the image optimizer gem. So, assuming you have a modern version of Ruby then you can say gem install image_optimizer just like this. And if you're wanting to put this in a Rails Project you just follow the exact same approach as you would for adding any gem.

I personally find that this is a tool that comes in very handy when I'm just using it on my own system, so the reason why I even have the idea for creating this guide was because I wanted to compress some of the images files I was putting into a react application, and then was a really nice easy way of doing that.

So, it looks like it went out, and installed all of those for me.

large

And now with all of those installed let me clear out my output here, and I'm going to say irb. So, I'm gonna start up a interactive Ruby repel session here. And the file that I want to compress is this file right here.

large

It's Coder Guy, and if you want to see the size of Coder Guy you can see that currently Coder Guy is 4.7 megabytes, so it's a pretty large file. Definitely not something that you'd want to put on a website, or else it would take a very long time to load.

So, this is the image that we're gonna be compressing. He looks like he's pretty happy, which I don't understand because he has to write PHP code, so I know back when I had to do that I wasn't happy, but he can be happy if he wants to be.

So, now that we have that and we know what the image file currently is now we can try to compress it. So, I'm gonna say require, and then image optimizer just like this. And after you run that command assuming that the gem is installed with the current version of Ruby that you're running then it'll simply return true. And then from there we're gonna run the Image Optimizer Library.

So, you say image and then using CamelCase you say ImageOptimizer.new, and then you're gonna pass in whatever the file name is. So, let's switch to the finder, let's grab the full file name, and I'm gonna do this specific case study with a JPEG, but you can use PNG, you can use Gifs? Anything like that.

So, we have our JPEG here, and let's say we want the quality to be let's say 25. This is a common level of compression that I run it at. So, you pass in quality in here as an optional argument. And then from there just call optimize, so I'm gonna call optimize, and if you hit return everything looks like it went through.

large

If you got any error, or any feedback that looks quite a bit different than this then you may have the wrong file name, or something like that. But, as you can see write here it says "okay". It took all of these bytes, so it looks like it took 4,676,484 bytes and converted that into 513,344.

So, they showed that this gave us a 89% level of compression. So, let's close out of our preview here, switch back to the finder. Now you can see that, that file that was almost five megs is now 513 kilobytes. So, this is a much better file, this is a file you can actually use on the web.

So, now if you click on here you can see that the level of compression did not even dramatically decrease the quality. So, obviously whenever you compress something there's gonna be a certain percentage of quality that has decreased, but the goal should be for you to decrease it to a point where the file size is much smaller while still not distorting the image.

And as you can see right here this image really looks, for the most part, exactly like the same image we had before, but it's almost 90% smaller in size. So, I think that is definitely a great example of what you can do.

large

I've used this many times, sometimes I even will compress certain images and icons that I want to be much smaller down by about 90%, or so, but for this specific case there's just an in general. I usually put it at 25, but I definitely recommend for you to play around with it, look at the documentation.

I'll include a link to their docs in the show notes, so that you can grab this, and you can play around with the documentation. You can see they have a few other examples, they show the process for using PNG files is pretty much identical. You can also use the other file types and explore the library.

But this is a tool that I use on a pretty regular basis, so anytime that you want to be able to go and compress your own images directly on your own system, this is a great gem that will allow you to do that.

Resources