Optimize hero unit images

[mmmavis]

As mentioned in #943 (comment)

[toolness]

I was just watching a CSSConf presentation on CSS Performance Tooling and the speaker mentioned a tool called gulp-imagemin, which would allow us to do the image optimization during the build/deploy phase rather than during development. I like this approach a lot because it means we can optimize for quality during development and then easily scale to whatever target quality we want for production, without having to do any manual fiddling.

The speaker also mentioned gulp-svgmin which could be useful for optimizing our SVGs.

[toolness]

Hmm, so I attempted to play around with gulp-imagemin a bit today and ran into a few things:

• Blanketly applying the plugin to all our images as part of our copy-images task, via .pipe(), seems to make the node process exit without providing any traceback. This is very annoying.
• Selectively applying the plugin to an individual PNG file works. I tried doing it to the portrait of Mikko and it shaves off a few KB, but when I tried doing it on the homepage hero unit (both retina and standard), the size stayed the same, even when I upped the optimization to the maximum level (7). I wonder if this has something to do with us using PNGs instead of JPEGs? Not entirely sure...

[mmmavis]

thanks for taking this over @toolness 😺

[toolness]

No probs mavis!

So it seems like the imagemin thing is specifically intended for lossless minification, whereas I think that we'll actually need to loss-fully (is that the right word?) compress some of our images to really save on space. I'll look at a module called lwip which allows us to do basic image manipulation and could help us automate loss-fully converting some of our assets.

[toolness]

From my above comment:

Hmm, so I attempted to play around with gulp-imagemin a bit today and ran into a few things:

• Blanketly applying the plugin to all our images as part of our copy-images task, via .pipe(), seems to make the node process exit without providing any traceback. This is very annoying.

I was actually having a similar problem when using an entirely different library to process our images in #1026, and found that upgrading node from v0.12.0 to v0.12.4 fixed things on my Windows machine. I haven't tried gulp-imagemin again, but I suspect it was crashing due to the same underlying bug.

[toolness]

Hmm, so gulp-imagemin still makes gulp silently exit, though it does so with an exit code of 0 (my aforementioned problem with the other library caused a nonzero exit code).

I tried using imagemin-optipng instead, to only optimize PNG files, and it does work, but the optimization takes a relatively long time--about 1.2 minutes with an optimization level of 3. So either I can do some further investigating to figure out if there are particular files that are causing it to take so long, or we can reduce the optimization level, or we can only apply the plugin for production.

Update: An optimization level of 1 takes only 5.2 seconds, while level 2 takes 34 seconds.