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

Would it be bad to keep pressing an image that has already been pressed?

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

Would it be bad to keep pressing an image that has already been pressed?

• javascript
• node.js
• image
• gulp

• 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 press all images everytime you build you project, even though they didnt change? – David Losert Commented Aug 6, 2014 at 14:55
• I want to use Gulp.js to press all my sites images. I keep them all in "/lib/images" folder. I was hoping to press 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 pressing images that have already been pressed. So, will that make my images look worse? Or when gulp-imgmin goes to press the image, does it see its already pressed and skip it? – Chad Commented Aug 6, 2014 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 pressed and probably gonna do it again. I dont now if the pression of imgmin is loseless or not - but if not, you gonna lose more and more image-quality with every press-cycle. – David Losert Commented Aug 6, 2014 at 18:02

2 Answers 2

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 press/minify all my images and have them just overwrite each other, or if I should store the minified/pressed 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 unpressed 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 press the image, does it see its already pressed and skip it?

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

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 pression.