Posted almost 9 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/

makandra has been working exclusively with Ruby on Rails since 2007. Our laser focus on a single technology has made us a leader in this space.

Owner of this card:

Avatar
Arne Hartherz
Last edit:
about 1 year 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