Closed stephaniehobson closed 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?
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.
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.
@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?
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.
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.