search

mozilla / bedrock

Making mozilla.org awesome, one pebble at a time
https://www.mozilla.org
Mozilla Public License 2.0
1.17k stars 912 forks source link

Automate image compression as part of asset pipeline. #6480

Closed stephaniehobson closed 5 years ago

stephaniehobson commented 5 years ago

Image compression is a time consuming but easily automatable step in the development process.

Tinypng has a developer API and can do both PNG and JPEGs. SVGO is available as a npm package.

amychurchwell commented 5 years ago

[@alexgibson @craigcook @stephaniehobson]

The Tinypng developer API has a price associated per image: https://tinypng.com/developers but there are potential other options if that is a blocker.

SVGO has quite a few formats, including gulp. We could potentially write a gulp task for this & watch img directory for changes. Thoughts?

alexgibson commented 5 years ago

I think SVGO is a great tool to handle svg files, and a gulp task makes the most sense 👍

Tinypng is probably my favorite lossy image compression tool (in terms of results). For non-lossy compression there's also ImageOptim (which also has a gulp plugin).

If we're to invest in automation this year, I think it's likely there will be some costs associated with that investment, so perhaps this is something to talk to Justin about? Personally I don't find ImageOptim on its own to be enough, so it would be nice to have something like TinyPng if we're to really streamline our workflow.

alexgibson commented 5 years ago

There's a new Imagemin lib out that may be worth investigating here? https://web.dev/fast/use-imagemin-to-compress-images

It looks like it handles, jpg/png compression, svg optimization and also webp. There's a gulp plugin available too.

amychurchwell commented 5 years ago

@alexgibson It is looking like imagemin has it's own plugins for png/jpg/etc. For both imagemin-pngquant and imagemin-mozjpeg have a quality field to determine compression level. (EX: [pngquant({quality: [0.5, 0.5]})], this example forces compression to be at 50%) Do you know if there a way to best determine what this range should be?

alexgibson commented 5 years ago

Done in https://github.com/mozilla/bedrock/pull/7243

We decided to add this as a pre-commit step for now, rather than as a build step in the pipeline.