Posted over 8 years ago. Visible to the public. Repeats. Linked content.

Fix PNG colors in IE, old Safaris and new Firefoxes

Some browsers render PNG images with color profiles and other shenanigans, some don't. Remove some PNG chunks to render colors uniformly.

Geordi brings a command png-optimize which conveniently optimizes your PNGs for the web. See Github for a description

  • Single file and batch optimization is supported
  • png-optimize will overwrite the original files

Without Geordi

Linux:
sudo apt-get install pngcrush
  • Single file:

    Copy
    pngcrush -rem alla input.png output.png
  • Batch processing (will put the files into a "fixed" directory):

    Copy
    pngcrush -d fixed/ -rem alla *.png
Windows:
Use TweakPNG
Mac:
Use ImageOptim

More info about pngcrush

Copy
pngcrush -rem allb -reduce -brute original.png optimized.png pngcrush -d target-dir/ *.png
  • -rem allb: remove all extraneous data (except transparency and gamma; to
    remove everything except transparency, try -rem alla)
  • -reduce: eliminate unused colors and reduce bit-depth (if possible)
  • -brute: attempt all optimization methods (requires MUCH more processing time
    and may not improve optimization by much)
  • original.png: the name of the original (unoptimized) PNG file
  • optimized.png: the name of the new, optimized PNG file

  • -d target-dir/: bulk convert into this directory target-dir
  • -rem cHRM -rem sRGB -rem gAMA -rem ICC: remove color profiles by name (shortcut -rem alla)

An article explaining why removing gamma correction: http://hsivonen.iki.fi/png-gamma/

Growing Rails Applications in Practice
Check out our new e-book:
Learn to structure large Ruby on Rails codebases with the tools you already know and love.

Owner of this card:

Avatar
Arne Hartherz
Last edit:
12 months ago
by Daniel Straßner
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Arne Hartherz to makandra dev
This website uses cookies to improve usability and analyze traffic.
Accept or learn more