Migrate from Grunt to npm for imagemin

[Ladsgroup]

While adding source as output dir as option by upstream issue https://github.com/imagemin/imagemin/issues/191 we can workaround by using a command per directory given that there are only a small amount of image directories.

Bug: T246321 Bug: T286284

[Volker-E]

It's blocked on this upstream issue: imagemin/imagemin#191

Bug: T246321

Think it's fine to proceed with different imagemin calls per project.

[Ladsgroup]

It's blocked on this upstream issue: imagemin/imagemin#191 Bug: T246321

Think it's fine to proceed with different imagemin calls per project.

Done.

[Volker-E]

In my testing, npm run build:imagemin currently isn't minifying the PNG images, even though it provides command line feedback. See these two test images, that should both land somewhere between 14 and max 30 kB

[Ladsgroup]

See comment on not correctly handled minification in main conversation thread with example images.

So I ran it to debug and it very much compresses the images but not as much as you want it to be, e.g. the the second one that it 118KB gets reduced to 63KB. There is the --more option I can try but I really can't force how small it will become.

[Ladsgroup]

I added more iterations according to https://www.npmjs.com/package/imagemin-zopfli but not a big difference.

[Ladsgroup]

Now trying with squoosh, let's see how that works

[Ladsgroup]

It reduced the second picture to 64KB but that's the best oxipng can do it seems, did you try with jpg output?

[Volker-E]

I guess that's because Google wanted to push their/newer image formats like WebP or AVIF and didn't put further optimizations into PNG. With WebP in the Squoosh online editor it gets down to 33 kB lossless and 13 kB with a very high-quality lossy compression.

Apart from that Squoosh doesn't run locally.

node_modules/@squoosh/cli/src/index.js:3
import { program } from 'commander/esm.mjs';
       ^

SyntaxError: Unexpected token {
    at new Script (vm.js:79:7)
    at createScript (vm.js:251:10)
    at Object.runInThisContext (vm.js:303:10)
    at Module._compile (internal/modules/cjs/loader.js:657:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:742:12)
    at startup (internal/bootstrap/node.js:283:19)

[Ladsgroup]

See inline comment about not being able to run script.

I had the same problem, you need to update your node version.

[Ladsgroup]

The version in .nvm file is good enough.

[Volker-E]

Ouch, I forgot that I've updated node here, while everything else Wikimedia for me is still on v10.15.2.

[Volker-E]

With the working dependency now, all but three PNGs got compressed to larger output files. The difference is in a 1-20% range, with vast majority max 12% bigger than before with grunt-imagemin. That's tolerable in order to rely on a maintained project, with the gain switching over to a more modern tooling and opening up windows for up-to-date compression algorithms, that might generally outperform current PNG compression.

[Volker-E]

Thanks @Ladsgroup for your continuous great work here. Appreciated!

[Ladsgroup]

Thanks @Ladsgroup for your continuous great work here. Appreciated!

Anytime <3