ember-cli-imagemin lossyPNG ImageMin.pngquant is not a function

Question

I'm trying to enable the lossyPNG property in the ember-cli-imagmin addon to create a small file size for my .pngs. My EmberApp in ember-cli-build.js includes imagemin like so:

imagemin: {
  interlaced: true,
  optimizationLevel: 3,
  progressive: true,
  lossyPNG: true,
  pngquant: {
    speed: 1,
    quality: 80
  }
}

The dependencies object in my package.json includes:

{ ...
  "ember-cli-imagemin": "0.4.0",
  "imagemin": "3.2.2",
  "imagemin-pngquant": "4.2.2",
  ...
}

However, whenever I run ember build I get the following error:

The Broccoli Plugin: [object Object] failed with:
TypeError: ImageMin.pngquant is not a function

This error points me to this line in broccoli-imagemin. If I set lossyPNG to false in ember-cli-build.js then I receive no error, but my pngs could be optimized further based on the results from pagespeed. What am I missing to be able to use pngquant to further optimize my png images?

Answer 1

broccoli-imagemin, which ember-cli-imagemin depends upon, is the problem. Since it hasn't been updated since Nov 2014, it uses an older version of imagemin, but the package.json specification allows imagemin v3.x. pngquant was removed as a default property in imagemin v3.2.0. So if you force the installation of imagemin v3.1.0 in your package.json it should work.

If you want to use a more recent version of imagemin look at this PR. I'd try to use that branch directly. You can install that branch directly from the repo with:

ember install https://github.com/kanongil/ember-cli-imagemin.git#v5-imagemin

This branch changes how imagemin works. Instead of passing options, it looks like you just pass the plugins that you want to use, and pass their options directly in to them.

var app = new EmberApp({
  imagemin: {
    plugins: [
      require('imagemin-jpegtran')({ progressive: true }),
      require('imagemin-pngquant')({speed: 1, quality: 80}),
      require('imagemin-svgo')()
    ]
  }
});