Read more

Fix PNG colors in IE, old Safaris and new Firefoxes

Arne Hartherz
August 25, 2010Software engineer at makandra GmbH

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

Illustration web development

Do you need DevOps-experts?

Your development team has a full backlog? No time for infrastructure architecture? Our DevOps team is ready to support you!

  • We build reliable cloud solutions with Infrastructure as code
  • We are experts in security, Linux and databases
  • We support your dev team to perform
Read more Show archive.org snapshot

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 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

Arne Hartherz
August 25, 2010Software engineer at makandra GmbH
Posted by Arne Hartherz to makandra dev (2010-08-25 16:22)