Contributors to prism-break.org have been adding software logos from everywhere around the internet. Almost none of them are fully optimized for quick user downloads.
pngcrush is a command line tool that attempts to reduce the file size of your PNG files losslessly. It does this by attempting a large number of compression methods and comparing their results to see which offers the greatest file size reduction.
Smaller file sizes mean a snapper user experience. It also improves your search rankings in Google.
Install pngcrush with npm:
npm install pngcrush
Using pngcrush on a single PNG file
Let's try using pngcrush on Gentoo Linux's famous "g" logo. You can find a PNG version of it on their website.
This is the command we'll use:
pngcrush -rem allb -brute -reduce gblend.png gentoo.png
These are the results I get:
Best pngcrush method = 112 (ws 15 fm 5 zl 8 zs 1) = 863400 for output to gentoo.png (22.17% critical chunk reduction) (22.17% filesize reduction) CPU time decoding 4.954, encoding 74.960, other 0.022, total 79.935 sec.
And here is the optimized version of the logo:
There is no visual difference, but the file is 864 KB instead of 1.1 MB. That's 22% less transfer required for your users. Isn't that great!
Using pngcrush to recursively crush directories of PNG files
I use this following command (found here) to recursively crush all the images in the assets folder of my PRISM Break project.
find -f . png | while read line; do pngcrush -ow -brute $line; done
The last time I ran this command, I reduced the size of my images folder from 19.3 MB to 17.6 MB. Due to the light weight of the HTML, and CSS this means that visitors to https://prism-break.org will load the site nearly 9% faster. Definitely worth it.