IE + PNG = Not good

Written by Lucas, on Tue 15 January 2008, 15:53:23

It is a too beatutiful dream: IE which handles PNG images correctly. IE6 can't even handle alpha transparency in a normal way without hacks, luckily for us IE7 did. But, IE7 still has a bug with the PNG gamma correction, which results in PNG's which are darker than it should be.

Luckily, for almost every problem there's a solution. The gamma info stored in PNG files is optional, so we can remove that data, without breaking the image. And guess what? Without that info, IE7 renders PNG's properly.

On Linux, we have a nice tool called pngcrush, which can remove the gamma data and a lot more fancy color info from the png. However, using pngcrush on every file is a pain in the ass. And we programmers are lazy, we don't want to pngcursh every file in a directory, we want to see it automated. And that's what I did: a little python script which pngcrushes all images in the given directories.

Pretty useful when you're slicing a layout, and want to use PNG's. To view the script, and how to use it, click Read More.

Here's the little script:
Toggle highlightingCode
  1.  
  2. #!/usr/bin/python
  3.  
  4. #
  5. # This scripts removes the gamma info and other fancy color
  6. # info from png files using pngcrush
  7. #
  8.  
  9. import sys, os
  10.  
  11. def get_all_files():
  12.     files = []
  13.  
  14.     sys.argv.pop(0)
  15.    
  16.     for dir in sys.argv:
  17.         if not os.path.isdir(dir):
  18.             print dir + ' is not a directory'
  19.             continue
  20.        
  21.         if dir[-1] != '/':
  22.             dir += '/'
  23.        
  24.         dir_files = os.listdir(dir)
  25.        
  26.         for file in dir_files:
  27.             if file[-3:] == 'png':
  28.                 files.append(dir + file)   
  29.     return files
  30.    
  31. def update_files():
  32.     files =  get_all_files()
  33.    
  34.     for file in files:
  35.         os.system("pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB %s temp.png" % file)
  36.        
  37.         print os.path.dirname(file)
  38.        
  39.         if os.path.exists(os.path.join(os.path.dirname(file), "temp.png")):
  40.             os.system("rm %s" % file)
  41.             os.system("mv temp.png %s" % file)
  42.             print 'Gamma in %s removed' % file
  43.         else:
  44.             print 'Problem removing gamma, are you sure you have pngcrush installed?'
  45.    
  46.  
  47. if __name__ == '__main__':
  48.     if len(sys.argv) == 2 and (sys.argv[1] == "-h" or sys.argv[1] == "--help"):
  49.         print """
  50. Usage:
  51.     pngcrusher.py [dir1 [dir2 [dir3 [...]]]]]
  52.         """
  53.        
  54.         sys.exit(1)
  55.    
  56.     if len(sys.argv) == 1:
  57.         sys.argv.append(os.getcwd())
  58.    
  59.     update_files()
  60.  
  61.  


To use it, you'll need pngcrush installed, it's available in the Ubuntu repositories, so it's quick and easy to install it.

When installed, open up a terminal and type:

python pngcrusher.py /var/directory


if you don't specify a directory, the current working directory is used.

Tag Tags: python png fix IE
Comments (4)