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.

brown jpg brown png brown gif

#7a7000

green jpg green png green gif

#9fd5b5

blue jpg blue png blue gif

#5c8599

red jpg red png red gif

#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 6 Screenshot

Windows XP: Internet Explorer 7

Windows XP: Internet Explorer 7 Screenshot

Windows XP: Firefox 2

Windows XP: Firefox 2 Screenshot

Windows XP: Firefox 3

Windows XP: Firefox 3 Screenshot

Windows XP: Opera 9

Windows XP: Opera 9 Screenshot

Windows XP: Safari 3

Windows XP: Safari 3 Screenshot

Windows XP: Safari 4

Windows XP: Safari 4 Screenshot

Windows XP: Google Chrome

Windows XP: Google Chrome Screenshot

Mac OS X: Safari 3

Mac OS X: Safari 3 Screenshot

Mac OS X: Firefox 2

Mac OS X: Firefox 2 Screenshot

Mac OS X: Firefox 3

Mac OS X: Firefox 3 Screenshot

Mac OS X: Opera 9

Mac OS X: Opera 9 Screenshot

Comments