Making Good Looking WWW GIFs or JPEGs for Multi-Platforms with Photoshop

The first picture is an image from Photoshop's tutorial for the Mac. It was saved unchanged (except for scaling). The second image is the same as the first, but was gamma corrected for a PC or Sun. (Most PC's require high gamma correction, but not all are the same. Some graphics cards will have adjustable settings so "Your Mileage May Vary" More on Gamma) The second image should look brighter on all platforms. If you are viewing with a PC or Sun, the second image will look "correct" and the first will be too dark. If you are viewing on a Mac (or SGI) the first image will look "correct" for Mac and almost "correct" for SGI.

Your Mac does gamma correction in its graphics card and most PC's do not. Therefore when something looks good on your Mac, it will be too dark on your PC.

If the GIF is ultimately going to reside on the web, where it will be viewed by people with Mac's and PC's, you are out of luck if you want everyone to view it correctly. The GIF file format (and JPEG too) can not encode the gamma correction used. Hopefully there will be a new graphics format accepted soon called PNG (Portable Network Graphics) to solve this problem. It is not a Netscape problem because the GIF and JPEG formats do not contain that information. It is a Netscape problem because even if the file format did contain that inforamation, Netscape wouldn't know what to do with it.

Thus you can make a GIF or JPEG look good for a PC or make it look good for a Mac but not both simultaneously. (SGI's and Mac's are about the same and Sun's and PC's are about the same, incidentally)

Below is our guide to setting the gamma for web purposes. A similar guide is made by Philip Greenspun at MIT.

Macintosh Photoshop

To make a GIF or JPEG image with proper brightness for the WWW (where many types of platforms reside) using Mac Photoshop (using Windows Photoshop follows)

1) First set your gamma to about 1.8. Gamma is found under the File Menu under "Monitor Setup".

2) Then create your image so that it looks good on your Mac in RGB mode (not indexed color which GIFs are).

3)Then you must take the image from RGB mode into Lab mode in Mac Photoshop.

4) Once in Lab mode, go back to the Gamma setting under Monitor Setup under the File menu and raise your gamma. Try setting it at 2.2 which is what I call the "web average gamma" discussed below.

5) You will see your image brighten appreciably. It will now be a little too bright and look slightly bleached out. In the world of the Internet this is good!

6) Then switch back to RGB mode. This changes the original RGB value of every pixel. The picture will stay too bright.

7) Now change to Indexed color if you want to save as a GIF or leave it in RGB to save as a JPEG.

8) View on as many platforms as you can. Adjust gamma by switching to Lab and changing gamma, then switching back to RGB. Then resave and repeat this step until it looks good.

Average Web Gamma

Making a web image with the right amount of brightness, means giving it the average amount of brightness for the WWW. (Making it look average on all platforms) Your Mac wants files gamma corrected to 1.8, the SGI wants them at 1.4 and PC's and Suns want them at 2.5. Since Mac's and PC's are most common I try to average between the two at 2.2. Anticipate your viewers platforms and adjust accordingly.

For more information on Gamma and to get more insight in making beautiful WWW images (not that I have many to offer - I'm an engineer, not an artist!) I strongly recommend you see the Gamma Home Page

For an example of how I get around this problem, by offering two sets of pictures, see my texture patterns and follow the leads to view images.

Photoshop for Windows

To make images with proper brightness for the WWW using Windows Photoshop.

1) Set the Gamma Setting found under the File menu under "Monitor Setup" to about 2.5. In the Windows version of Photoshop, gamma represents what has been done to the file. This is different than the Mac gamma interpretation in Photoshop.

2) Create your image so it looks good on your PC.

3) Stay in RGB mode and change the gamma setting to about 2.2 (this is my designated WWW average discussed above)

4) You will see your picture darken a little. This is good.

5) Switch to indexed color to save as a GIF or stay in RGB to save as a JPEG.

6) View on as many platforms as you can. Adjust gamma and resave and repeat this step until it looks good.

Average Web Gamma

Making a web image with the right amount of brightness, means giving it the average amount of brightness for the WWW. (Making it look average on all platforms) Your Mac wants files gamma corrected to 1.8, the SGI wants them at 1.4 and PC's and Suns want them at 2.5. Since Mac's and PC's are most common I try to average between the two at 2.2. Anticipate your viewers platforms and adjust accordingly.

For more information on Gamma and to get more insight in making beautiful WWW images (not that I have many to offer - I'm an engineer, not an artist!) I strongly recommend you see the Gamma Home Page

For an example of how I get around this problem, by offering two sets of pictures, see my texture patterns and follow the leads to view images.



copyright CGSD Corp., updated November 1, 1998, www.cgsd.com/papers/gamma.web.html