Welcome to WebmasterWorld Guest from 18.104.22.168
Forum Moderators: not2easy
If I go back into my image editor (PSP) and save it as a jpg it displays correctly.
Just an annoyance and wondered if I was the only one and if anyone had an explination.
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.
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.
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)
I've never seen anything that will match gif to hex background on both Mac & PC for the same image...
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
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 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)?