Gamma Correction
The browser you use and the operating system you’re on both affect how images are shown on the web. The main problem comes from something called gamma correction.
There's still one problem with this test - mostly from viewing Mac-saved .gifs on Internet Explorer. I'll be readjusting this test to account for that
The Test
This is the test used to generate the results below. It consists of four color sections. Each section has a 10px border rendered by the browser in the selected color, and three 20x35 images (a .jpg, a .png, and a .gif) using the same color, created in Adobe Photoshop on Windows XP with the Save for Web.. option.



#7a7000



#9fd5b5



#5c8599



#c41230
The Results
To summarize the effects:
Internet Explorer will display .png files much darker than they should be.
Safari 3 can strangely distort the colors in .png (like the red test) but not .jpg. Safari 4, however, shows .png perfectly, but can be slightly off on the .jpg images.
On most monitors, the use of .png and some .jpg colors in Firefox, Opera, or Chrome will be indistinguishable from the actual color to a human, but it will not be exactly the same.
The only entirely accurate graphics format on every browser and operating system is the .gif, as long as you need less than 256 colors and can deal with limited transparency.
Windows XP: Internet Explorer 6

Windows XP: Internet Explorer 7

Windows XP: Firefox 2

Windows XP: Firefox 3

Windows XP: Opera 9

Windows XP: Safari 3

Windows XP: Safari 4

Windows XP: Google Chrome

Mac OS X: Safari 3

Mac OS X: Firefox 2

Mac OS X: Firefox 3

Mac OS X: Opera 9

Comments