Some of the issues:
1. 16-bit color vs. 24-bit color. 16-bit shifts subtly across almost the entire color spectrum. Depending on the image, this may or may not be very visible.
2. Trying to match image colors to a hex background color. The best bet is to include a 1x1 gif as a tiled background image. Then if gif color shifts on a particular set up, the background shifts along with the main image.
3. Best bet for matching gif to a background is to make the matching areas transparent.
4. Photoshop allows you to require a particular color in the color look-up table (CLUT) or palette for a gif. It's an easy step to forget, but it can be vital.
I've consistently had problems getting gif colors to render seamlessly with HTML colors any time I've tried... if I could get the colors to match on my own system, a friend's computer would show a mismatch, and vice versa.
If a "close enough" color is good enough, make the "matching" color transparent in your gif, so the HTML background color shows through those areas... if an exact match to the gif color is needed, tedster's 1x1 background gif for the HTML page is the way to go... but you can generate the graphic gif file with the tranparency color either way, to be on the safe side.
I generate my gifs in Fireworks and if I set the canvas colour to a hex value that is 216 websafe, it always matches the html background for the same hex value. But I have noticed a problem in PS.
My experience is that color errors are introduced by the:
3) system color depth settings
4) graphics card
No image editing software can guard against all this on its own. Color rendering in recent browser versions is greatly improved, but all your visitors need to upgrade before you can depend on that.
Photoshop also gives if results IF you lock in a websafe background color at the time you index the image.
(edited by: tedster at 11:29 pm (utc) on April 4, 2002)
piskie - how many different computers do you test-view your images on? If Fireworks is THAT reliable for color, I'll run out and buy it tomorrow, but I'm wondering if you've tested on both Mac & Windows in IE & NN (and maybe Opera and/or Linux too...).
I've never seen anything that will match gif to hex background on both Mac & PC for the same image...
I haven't had trouble as long as I lock my photoshop palette to web colours only. I test mac os 9 and x, win me, 98 and xp.
I also use Fireworks and have never had any problems with color matching.
I always test on NN6+4,IE 4+ and opera on PC and Macintosh.
How many people test by changing the color depth?
I do, I at the very least test on 3 different colour depths:
1280 x 1024, Millons of colours (Mac)
800 x 600, Thousands (Mac)
800 x 600, 256 colours (PC) actually 16 bit as well.
Probbably don't need to test 256 as I would think most people dont go that low.
When specifying colours I always use hex values that match my HTML
I had a recent battle with major client.
The site that they designed (and we optimised) was looking 'funny' on their PCs.
It looked fine when they viewed the original from disk, but the site viewed over the internet looked awful, with strange colour shifts on the graphics.
In the nicest possible way, they accused me of tweaking the graphics too much - but I never touched them, and they looked fine on my PC.
After a few days of faffing about trying to solve it, I discovered that they had some kind of bandwidth optimisation on their internal network that reduced all graphics to low bandwidth versions before allowing them through.
When I explained this, they wondered was it possible to change all the graphics on the site so that it would look OK when their internal employees viewed the site.
Pah! you just can't win.
I remember someone else mentioned the 1x1 gif idea in the past.
I think I can work with the workarounds mentioned here.
I still have one question.
The example I mentioned in the original post worked like this: I created an image in Paint Shop Pro and saved it as a .psp file. When I selected the background color I copied/pasted the hex value from my webpage background into the palette so they would be the same. I then save the same image as a GIF file. I place the GIF image in my page and view it offline on my PC. The colors don't match. I then save the PSP image as a JPEG and place it in the webpage and it displays fine. If I view all 3 images (PSP, GIF, and JPEG) side by side in Paint Shop Pro they are indentical. Why then do they display differently in the browser (in this case IE 5.0 and 6.0)?