Welcome to WebmasterWorld Guest from 23.22.46.195

Forum Moderators: not2easy

Color jpg vs gif

   
9:57 pm on Apr 4, 2002 (gmt 0)

10+ Year Member



Has anyone created a gif file only to find that in IE the color changes slightly so that the background color is visibly different?

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.

10:17 pm on Apr 4, 2002 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.

10:27 pm on Apr 4, 2002 (gmt 0)

WebmasterWorld Senior Member mivox is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.

11:09 pm on Apr 4, 2002 (gmt 0)

10+ Year Member



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.
11:20 pm on Apr 4, 2002 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



My experience is that color errors are introduced by the:

1) browser
2) OS
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)

11:21 pm on Apr 4, 2002 (gmt 0)

WebmasterWorld Senior Member mivox is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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...

11:25 pm on Apr 4, 2002 (gmt 0)

WebmasterWorld Administrator jatar_k is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.
7:47 am on Apr 5, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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.

8:16 am on Apr 5, 2002 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



How many people test by changing the color depth?
9:35 am on Apr 5, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Tedster,

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

11:59 am on Apr 5, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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.

1:04 pm on Apr 5, 2002 (gmt 0)

10+ Year Member



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)?

 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month