FREELessons: 15Length: 1.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

5.1 How to Compress and Optimize Images

In this lesson you’re going to learn how to work with images in our Gulp workflow. More specifically, you’ll learn how to compress and optimize them. Let’s begin!

Related Links

5.1 How to Compress and Optimize Images

Hello, and welcome back to this course. In this lesson, you're going to learn how to work with images in our little Gulp workflow here. More specifically, you'll learn how to compress and optimize them. We're gonna do that by using a plugin called gulp-imagemin. So just like in all the other lessons, we're gonna start by saying npm install gulp, the name of the plugin, -imagemin and save it as a dependency. Now while that's saving, I'm going to go ahead and load that plugin here. I'm gonna call it imagemin = require('gulp-imagemin'). We're gonna create a task called img. And the img task will simply grab all of the image files from srcimg. So, srcimg, I'm gonna target the subfolders. And then any file with the following extension, png, jpeg, gif, svg and ico. Now the reason I'm doing that is because you might have certain files in this folder that are not images. Like you get an icon set from somewhere and they have some kind of read me, PDF, or HTML or whatever, and you don't want to include that one, right? So, where gonna take all of these, we're gonna filter out only the images. And then we're gonna pipe them through imagemin. And here, I'm gonna pass in parameters called verbose. I'm gonna set this to true. It's basically gonna display extra information in the terminal when it's doing its thing. And then we're gonna pipe them through gulp.dest. And we're gonna copy them into dist/img. Okay, now, in here, I also have a folder called sprites. This will be used in the next lesson for generating SVG sprites. And I don't want to include this folder in my destination, right? So how do I exclude this from my data stream? Well, it's super easy. You just create an array here, and you specify the files that you want and then the files that you don't want. And you do that with the exclamation mark in the very beginning. So you would set src/img/sprites and then every subfolder within sprites. So this will basically copy every single file that has this extension from every single folder under img except for the ones under sprites. Okay, so let's give this a go. Let's say, gulp img. And there we go. After about 1 second, it copied 16 images to my dist/img folder here. It preserved the folder structure. As you can see in the City folder, I had a licence PDF and it just ignored that. And it also compressed these images. And you can see on each one, because I activated verbose mode, it tells you how many kilobytes it saved basically. Kilobytes and percentages. And overall, it saved 3% from my images in total of 629 kB. That's pretty pretty cool. Now let's go ahead and integrate this into our workflow. Let's watch for file changes here. So I'm gonna say, And actually, I'm gonna copy the exact same source from this. Because I'm watching for the same files, yeah? So I'm watching everything with the exception of sprites and other kind of files that are not images. And when I'm making a change to one of these, I'm simply gonna trigger the watch-img task, which is right here. Let's go ahead and write it. So watch-img. This triggers the img task. Let's add some comments here. All right, and lets also add the task right here. So it's executed when we're running Gulp in the terminal. And that should do it, really. Let's give this a test. Let's say, gulp. And just for the sake of it, let's do a test and delete one of the files from src, all right? Or, actually, let's add a file to src. So I'm just gonna open the terminal here while I copy a new file. So you can see the change in real-time here. Okay, so I'm gonna copy an image that's called office-1 inside my img folder. And you're gonna see it copy being here, and also what happens in the terminal. So here we go, copying. Okay, so the new image was copied, img was launched. Yeah, the image-min plugin was used. Everything was optimized. The browsers were reloaded. And also, that new image was copied in my distribution folder. Pretty, pretty cool. And as I was saying in a previous lesson, that's pretty much all you can do with images. You can copy them from one place to another, and you can compress them. Now, I mentioned earlier in the video that we have a sprites folder here. And this will be used to generate SVG sprites using gulp. It's really cool. I can't wait to show you. That's coming up in the next lesson.

Back to the top