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:
pngcrush -rem alla input.png output.png
-
Batch processing (will put the files into a "
fixed
" directory):pngcrush -d fixed/ -rem alla *.png
Windows:
Use TweakPNG Show archive.org snapshot
Mac:
Use ImageOptim Show archive.org snapshot
More info about pngcrush
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 directorytarget-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