Search code examples
javascriptgulpimagemingulp-imagemin

gulp imagemin breaking images and not optimizing

I am trying to setup up the imagemin package to run through gulp. I seem to have got the package running, however there are a number of unexplained issues:

const imgSRC = 'images/*';
const imgDIST = '../wwwroot/dist/images';

function imageComp() {
  gulp.src(imgSRC)
    .pipe( imagemin({
      verbose: true
    }) )
    .pipe( gulp.dest(imgDIST) )
}

Firstly when I run the package imagemin tells me that all images are already optimized. Regardless of which images I attempt to optimize, it tells me that they are already optimized. imagemin shows all images are already optimized

Secondly the 'optimized' images that are created appear to be broken/corrupted and can't be viewed in any other software.

Finally it seems that the file size of the 'optimized' images is actually larger than the original. For example one image .jpeg image almost doubles in size from 1,785KB to 3,213KB.

Does anyone have any ideas on this? I can't find any other instances of these issues with this package.

Solution

  • I have discovered the solution and the issue doesn't lie with imagemin. The problem is caused by the version of gulp (v5.0.0).

    The solution is to include , { encoding: false } in the image source -

    const imgSRC = 'images/*';
const imgDIST = '../wwwroot/dist/images';

function imageComp() {
  gulp.src(imgSRC, { encoding: false })
    .pipe( imagemin({
      verbose: true
    }) )
    .pipe( gulp.dest(imgDIST) )
}