A few months ago while working on a website I came across an annoying little issue; PNGs render differently in Internet Explorer and Firefox. The reason this is an issue is if you are trying to match the color of a PNG image with a CSS background color, if you design it for Firefox it will look wrong in Internet Explorer, vice versa.

After a bit of research I did come across a way to fix this issue, but before I get into that I will demonstrate the exact issue with the following four images:

Original image

This image was saved directly from Adobe Photoshop with no modifications,
it will render differently depending on the browser used.

Internet Explorer screenshot

This image is taken from a screenshot of the above image in Internet Explorer,
it has been fixed so that Firefox users can see what IE users would see.

Firefox screenshot

This image is taken from a screenshot of the above image in Firefox,
it has been fixed so that IE users can see what Firefox users would see.

Fixed image

This is a fixed version of the original image,
it will render correctly regardless of the browser.

For an easier comparison move your mouse over and out of the image below:

The Solution

So now the the issue is evident, onto the solution.

The program I found to fix the issue is a command-line application known as PNGCrush. As I knew I would have to fix PNGs fairly regularly I not only download the application I also came up with a method so that I could simply right-click the desired image, send it to a custom written batch file and have the whole process automated for me, it isn't necessary to do so but I will describe the exact process below for anyone wishing to set it up.

Step 1 - Download PNGCrush

1. Visit the following page: sourceforge.net/project/showfiles.php?group_id=1689&package_id=6641
2. Download the latest Win32 package (ie. pngcrush-1.6.4-win32.zip).
3. Unzip the downloaded file into directory of your choice (ie. C:\PNGCrush\).

Step 2 - Create Batch file

1. Open Notepad.
2. Paste the following lines into your Notepad document replacing the directory (C:\PNGCrush\) and filename (pngcrush.exe) if necessary:
   • @echo off
   • "C:\PNGCrush\pngcrush.exe" -rem alla %1 %1-fixed
   • del /f %1
   • move %1-fixed %1
3. Save the Notepad document as pngcrush.bat in your PNGCrush directory.

Step 3 - Make Send To shortcut

1. Open the Start menu and select Run...
2. Type sendto in the Open: input and hit the OK button.
3. In the SendTo window select File > New > Shortcut from the toolbar.
4. Browse to location of your created Batch file (ie. C:\PNGCrush\PNGCrush.bat).
5. Hit the Next > button.
6. Enter a friendly shortcut name (ie. Fix PNG for Internet Explorer) then hit the Finish button.
7. Right-click the newly created shortcut and select Properties.
8. Click on the Change Icon... button.
9. Hit OK to the Change Icon warning dialog.
10. Choose an icon that you feel best fits, I personally chose the following:
    
11. Hit OK twice and you are done.

You should now be able to right click on any PNG and select your newly created shortcut under the Send To menu.