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

Windows XP
Mac OS X: Leopard
- Safari 3
- Firefox 2
- Firefox 3
- Opera 9

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.