4 ms·

I learned a lot from that, thank you. I wonder how much bandwidth I've wasted for people over the years because I've saved poorly optimised versions from Photo

I learned a lot from that, thank you. I wonder how much bandwidth I've wasted for people over the years because I've saved poorly optimised versions from Photoshop. Are there automated tools that can be included in a CI pipeline to help with this?

karim79 5y ago
The https://kraken.io https://kraken.io service has an API, and there's a gulp and grunt plugin and a bunch of other stuff here: https://kraken.io/docs/integration-libraries https://kraken.io/docs/integration-libraries
- blowski 5y ago
  That looks perfect, except for it being a SaaS product with a minimum monthly spend. Is there a similar pay-as-you-go model, or ideally self-hosted?
  - karim79 5y ago
    Good question - not at the moment, but we're evaluating the idea. Perhaps the answer would be to just make the build pipeline tools free for developers to a certain limit.
  - aargh_aargh 5y ago
    Wait, why not optipng [1], pngcrush [2] or any other of the handful of locally running lossless PNG optimizers [3]? [1] https://packages.debian.org/unstable/optipng [2] https://packages.debian.org/unstable/pngcrush [3] http://www.olegkikin.com/png_optimizers/
    - blowski 5y ago
      Do they do what the article is recommending? Genuine question, I don't know the answer.
      - TonyTrapp 5y ago
        They all optimize PNGs in different ways. For some files one tool is the best, for others another tool. There are even meta-tools like PNGGauntlet that just brute-force the compression with several of these tools (e.g. pngout and optipng) at the same time. That way, you can be relatively sure that your file will be close to being the smallest possible.
    - sumtechguy 5y ago
      If you are in the windows world I have been using this. https://sourceforge.net/projects/nikkhokkho/files/FileOptimizer/ https://sourceforge.net/projects/nikkhokkho/files/FileOptimi... Which contains all of those and just tries them all. Been meaning to pop it all out and make a bash script of them to automate some of my stuff on a cron job instead of using a GUI.
- djxfade 5y ago
  Kraken never answers any support requests, and I have experienced outages without any information. I would not rely on them.
chris_overseas 5y ago
Squoosh (https://github.com/GoogleChromeLabs/squoosh https://github.com/GoogleChromeLabs/squoosh) gives very impressive results in my (admittedly somewhat limited) experience.
willis936 5y ago
For graphics with only a few colors you can save a few extra bits by moving to lower bit depths. PNG explicitly supports an 8-bit palette color mode that is pretty lean. You can even specify fewer than 8 bpp if your palette is small enough to have its cardinality fall within lower powers of 2. I recall PNG8 not being well supported in some applications. I've run into this with game engines, which I found strange since asset size is an important thing to keep in mind.
- giantrobot 5y ago
  IE6 and below had no end of trouble with PNG transparency. IIRC it only supported transparency correctly on PNG8 images but only in img tags, not backgrounds, and ignored the alpha channel entirely on PNG32. There were some IE-specific hacks you could use with their proprietary CSS extensions but they were really annoying. I think IE7 finally fixed the transparency bugs but since there was still a huge IE6 cohort it was still a crapshoot relying on transparent PNGs.
virtue3 5y ago
I've always just used this (it's more old school but def solid): https://pmt.sourceforge.io/pngcrush/ https://pmt.sourceforge.io/pngcrush/
ogurechny 5y ago
I think the first step of any optimization strategy is to understand what you are doing, and stating the goal that can clearly be either reached or not. Size crunching on a couple of images is fun, valiantly processing a sizable collection of pictures with optipng makes you realize that your CPU(s) are glowing from heat for hours just to take 10 bytes off the file that still fills the same amount of disk sectors. That's even bigger waste of energy than mining. One particular trick is getting images with visually low number of distinct colors, like logos and screenshots, through pngquant. You don't have to worry whether the actual number of colors is less than 256, how to posterize or filter the image to decrease that number, or how to suppress artificial colors from font anti-aliasing — the tool measures the visual likeness, and provides the means to set the acceptable limit so it would leave unsuitable images intact. Obviously, when you're dealing with some long-term archival storage, or assets for further editing like stock clipart, such presentation-oriented lossy optimization should not be used. Other automatic tools are referenced in the article, though you should treat them as a nice sanity check that prevents images holding raw uncompressed data or simple two color graphs saved as 4 byte RGBA from appearing in your project, and not a magical solution that would send it to the sky performance-wise. Bandwidth (and loading time) is usually wasted on complex high resolution images like photos or combined graphics with photographic details. These can't really be optimized well enough in PNG with naive lossless or lossy methods, and have to be converted to JPEG to reach sane size or regenerated as independent layers that use different compression.

karim79 5y ago

The https://kraken.io https://kraken.io service has an API, and there's a gulp and grunt plugin and a bunch of other stuff here: https://kraken.io/docs/integration-libraries https://kraken.io/docs/integration-libraries

blowski 5y ago
That looks perfect, except for it being a SaaS product with a minimum monthly spend. Is there a similar pay-as-you-go model, or ideally self-hosted?
- karim79 5y ago
  Good question - not at the moment, but we're evaluating the idea. Perhaps the answer would be to just make the build pipeline tools free for developers to a certain limit.
- aargh_aargh 5y ago
  Wait, why not optipng [1], pngcrush [2] or any other of the handful of locally running lossless PNG optimizers [3]? [1] https://packages.debian.org/unstable/optipng [2] https://packages.debian.org/unstable/pngcrush [3] http://www.olegkikin.com/png_optimizers/
  - blowski 5y ago
    Do they do what the article is recommending? Genuine question, I don't know the answer.
    - TonyTrapp 5y ago
      They all optimize PNGs in different ways. For some files one tool is the best, for others another tool. There are even meta-tools like PNGGauntlet that just brute-force the compression with several of these tools (e.g. pngout and optipng) at the same time. That way, you can be relatively sure that your file will be close to being the smallest possible.
  - sumtechguy 5y ago
    If you are in the windows world I have been using this. https://sourceforge.net/projects/nikkhokkho/files/FileOptimizer/ https://sourceforge.net/projects/nikkhokkho/files/FileOptimi... Which contains all of those and just tries them all. Been meaning to pop it all out and make a bash script of them to automate some of my stuff on a cron job instead of using a GUI.
djxfade 5y ago
Kraken never answers any support requests, and I have experienced outages without any information. I would not rely on them.

chris_overseas 5y ago

Squoosh (https://github.com/GoogleChromeLabs/squoosh https://github.com/GoogleChromeLabs/squoosh) gives very impressive results in my (admittedly somewhat limited) experience.

willis936 5y ago

For graphics with only a few colors you can save a few extra bits by moving to lower bit depths. PNG explicitly supports an 8-bit palette color mode that is pretty lean. You can even specify fewer than 8 bpp if your palette is small enough to have its cardinality fall within lower powers of 2. I recall PNG8 not being well supported in some applications. I've run into this with game engines, which I found strange since asset size is an important thing to keep in mind.

giantrobot 5y ago
IE6 and below had no end of trouble with PNG transparency. IIRC it only supported transparency correctly on PNG8 images but only in img tags, not backgrounds, and ignored the alpha channel entirely on PNG32. There were some IE-specific hacks you could use with their proprietary CSS extensions but they were really annoying. I think IE7 finally fixed the transparency bugs but since there was still a huge IE6 cohort it was still a crapshoot relying on transparent PNGs.

virtue3 5y ago

I've always just used this (it's more old school but def solid): https://pmt.sourceforge.io/pngcrush/ https://pmt.sourceforge.io/pngcrush/

ogurechny 5y ago

I think the first step of any optimization strategy is to understand what you are doing, and stating the goal that can clearly be either reached or not. Size crunching on a couple of images is fun, valiantly processing a sizable collection of pictures with optipng makes you realize that your CPU(s) are glowing from heat for hours just to take 10 bytes off the file that still fills the same amount of disk sectors. That's even bigger waste of energy than mining. One particular trick is getting images with visually low number of distinct colors, like logos and screenshots, through pngquant. You don't have to worry whether the actual number of colors is less than 256, how to posterize or filter the image to decrease that number, or how to suppress artificial colors from font anti-aliasing — the tool measures the visual likeness, and provides the means to set the acceptable limit so it would leave unsuitable images intact. Obviously, when you're dealing with some long-term archival storage, or assets for further editing like stock clipart, such presentation-oriented lossy optimization should not be used. Other automatic tools are referenced in the article, though you should treat them as a nice sanity check that prevents images holding raw uncompressed data or simple two color graphs saved as 4 byte RGBA from appearing in your project, and not a magical solution that would send it to the sky performance-wise. Bandwidth (and loading time) is usually wasted on complex high resolution images like photos or combined graphics with photographic details. These can't really be optimized well enough in PNG with naive lossless or lossy methods, and have to be converted to JPEG to reach sane size or regenerated as independent layers that use different compression.