search

reuters-graphics / graphics-kit-publisher

Publishing CLI for Reuters graphics pages and embeds
https://reuters-graphics.github.io/graphics-kit-publisher/
MIT License
4 stars 0 forks source link

ImageOptim for photos and versions specific to pixel density #36

Closed pkd2512 closed 1 year ago

pkd2512 commented 2 years ago

WHY

Photos and ai2html images can get pretty heavy, running into megabytes. Lossy compression using Photoshop or Illustrator is not good enough. Cannot reduce dimensions either because we need them to be crisp for retina screens as well, so need to preserve at least 72ppi (default for screens) at 1x dimensions.

WHAT

I have been using ImageOptim, which is the best I have seen for smart lossy compression while preserving quality for pngs, jpegs and svgs. ImageOptim uses precise algorithms to avoid colour shifts, which can make it slow but totally worth the wait. It comes with an API for a lot of the work on the server like assets generation etc as well as a CLI version to optimise during build.

May also consider adding separate @1x and @2x versions of bitmap assets

hobbes7878 commented 2 years ago

This is interesting, but I would like to compare to optimisation options in https://sharp.pixelplumbing.com/ before we decide to land on a separate binary project.

Making image compression accessible for the team is a huge win for our pages, but making it easy to work with -- especially on deadline -- is gonna be an important factor in whether they use it. So if sharp does 80-90% as well as ImageOptim, but is 400% faster doing it...

Here's something else we can look at, too. Right now, I'm being very ham-fisted during publishing to check for optimisation opportunities: https://github.com/reuters-graphics/graphics-kit-publisher/blob/master/src/measureImages/index.js#L76-L78

I think we can make this significantly more robust with the options sharp or something else makes available.

pkd2512 commented 2 years ago

We can totally run some tests on various images and check the quality

hobbes7878 commented 2 years ago

Added a sharp implementation in https://github.com/reuters-graphics/graphics-kit-publisher/pull/40, which landed in 0.2.0.

Flags large images by file size, so anything above 200KB right now, you'll get a prompt.

Images can now be optimised in bulk or optimised and/or resized one at a time.

Can also opt out of the whole process at the top.

hobbes7878 commented 1 year ago

Svelte has added their own optimised image handling. Going to close this in favour of that at: https://github.com/reuters-graphics/bluprint_graphics-kit/issues/108