4

I am trying to decide if I should just compress/minify all my images and have them just overwrite each other, or if I should store the minified/compressed versions of each image in a separate folder?

Would it be bad to keep compressing an image that has already been compressed?

Chad
  • 1,708
  • 1
  • 25
  • 44
  • What are you trying to achieve? What do you mean by "overwrite each other"? Compressing something more than once never makes sense. Or are you talking about repeatedly compress all images everytime you build you project, even though they didnt change? – David Losert Aug 06 '14 at 14:55
  • I want to use Gulp.js to compress all my sites images. I keep them all in "/lib/images" folder. I was hoping to compress them all and keep them in their current location by overwriting the existing image, but after I add new images and do it again, then I'll be compressing images that have already been compressed. So, will that make my images look worse? Or when gulp-imgmin goes to compress the image, does it see its already compressed and skip it? – Chad Aug 06 '14 at 15:39
  • What is the benefit of keeping them in the same place? Your Dev-Environment should never be paired with your production environment. Thats a bad pattern itself, so try to avoid that. But to answer your question: I dont think imgmin detects if the picture was already compressed and probably gonna do it again. I dont now if the compression of imgmin is loseless or not - but if not, you gonna lose more and more image-quality with every compress-cycle. – David Losert Aug 06 '14 at 18:02

2 Answers2

3

I have set up the following gulpfile in order to test gulp-imagemin. I've included some additional imagemin plugins. 

var gulp = require('gulp'),
imagemin = require('gulp-imagemin');

gulp.task('imagemin', function() {
    return gulp.src('src/lib/images/**.*')
           .pipe(imagemin({
                progressive: true
           }))
           .pipe(gulp.dest('src/lib/images/'))
});

gulp.task('default', ['imagemin']);

Here's my initial folder structure (only one image included)

src/ 
|-- lib/ 
|   |-- images/
|   |   |-- nasa.jpg

First run of gulp outputs the following

[22:31:32] gulp-imagemin: Minified 1 image (saved 489 B - 2.1%)

Rerunning gulp again outputs the following

[22:32:43] gulp-imagemin: Minified 1 image (saved 0 B - 0%)

To answer your questions

I am trying to decide if I should just compress/minify all my images and have them just overwrite each other, or if I should store the minified/compressed versions of each image in a separate folder?

As suggested by Charminbear, it's advised to split your workspace into for instance, 'src' (Source) and 'dist' (Distribution) folders. You can store your uncompressed images inside of src/lib/images and use gulp to serve your minified images to dist/lib/images. 

src/ 
|-- lib/ 
|   |-- images/  
|   |   |-- nasa.jpg
|   |   |-- mars.jpg
dist/
|-- lib/
|   |-- images/
|   |   |-- nasa.jpg
|   |   |-- mars.jpg
gulpfile.js

What is the role of src and dist folders?

Or when gulp-imgmin goes to compress the image, does it see its already compressed and skip it?

gulp-imagemin will not try to minify already minified images.

Community
  • 1
  • 1
Dan
  • 8,041
  • 8
  • 41
  • 72
  • 1
    `gulp-imagemin will not try to minify already minified images` - actually, [it does](https://github.com/sindresorhus/gulp-imagemin/blob/master/index.js#L76). gulp-imagemin is just a wrapper for imagemin library. It pipes every file to imagemin, regardless of the file content, and then generates the message based on the data received from imagemin. So even the image is already minified, it will be processed by imagemin, and that operation takes some time. – quotesBro Mar 24 '17 at 07:12
0

I would make the gulp.dest = 'src/lib/images/min/' (added min/) therefore keeping the original. I also do not see a problem with repeatedly running it because there may be an update to the library that improves compression.

Jay Byford-Rew
  • 5,736
  • 1
  • 35
  • 36