Fix PNG colors in IE, old Safaris and new Firefoxes

Some browsers render PNG images with color profiles and other shenanigans, some don't.

The cleanest way to have consistent colors across browsers is to convert all your images to a standard color profile, strip the image's original profile and attach the standard profile.

If you can't be bothered to convert color profiles, a quicker (but less effective) method is to remove some PNG chunks from your files.

With Geordi

Geordi Show archive.org snapshot 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 Show archive.org snapshot

Linux:

sudo apt-get install pngcrush

• Single file:

  Copypngcrush -rem alla input.png output.png
  

• Batch processing (will put the files into a "fixed" directory):

  Copypngcrush -d fixed/ -rem alla *.png
  

Windows:

Use TweakPNG Show archive.org snapshot

Mac:

Use ImageOptim Show archive.org snapshot

More info about pngcrush

Copypngcrush -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/ Show archive.org snapshot