Getting colors to match up in compressed images

I'm modifying a pre-existing .png from a page template. The problem is that when I compress the logo png image for the web, or convert it to .gif, the color becomes subtly lighter so that it no longer matches the background (at least in IE). I am compressing at the highest quality png (32 color) available in fireworks. Any gif will result in color loss. The original png is far too large to post to the web (over 200k). What do I do?

You can see the logo and the image itself here:

http://enviardineroaperu.com/

http://enviardineroaperu.com/wp-content/themes/abombastic/images/logo.png

 

Hmmm, 200k seems big for that logo in the first place.

It must be that it's limiting the number of colours to compress the file... can you try to manually limit the colour numbers (set max number) and go down bit by bit until the quality starts to get noticible?
gifs may be lighter because the programme is substituting the wrong colour. They can't have as many colours as png but that green looks really like only 3 greens, 4 at the most, and shouldn't need 16 million greens to get the same effect.

I'm curious, do you still have the original png? I could try to do something with it in GIMP.

 

The truly original png that came with the template/theme is http://enviardineroaperu.com/wp-content/themes/abombastic/images/logo-template.png

The PSD file that came with the theme, which I used to make the current logo, is at: http://enviardineroaperu.com/wp-content/themes/abombastic/images/hardmoneytheme.psd

As you can see, I inserted the crest into the logo which made the file size much much bigger in a standard png (all done in fireworks). It turns out that the pre-compressed PNG also does not match the color of the background image, either, so this is not an issue of compressing a png; it's like just converting the file from psd to png causes color loss. Or maybe the psd file is just lighter and it's the fault of the theme designer and not me at all...

 

I'm having trouble opening it in GIMP (I need to update), and when I get it open it's blue.

I'll try to open it at work and import it to Flash.

One solution I suppose is to make a screenshot of the site, and use colour-picker tool to match up the greens. If the middle doesn't match, no biggie, so long as the edges do.

 

Would there be any way of making the background transparent?

 

Yeah, a transparent gif or png. A png is more versitile (sp?), but IE6 needs some javascript thing to get it to work. Mainly, if you're going to have the text sitting on the transparent background, a gif will make the edges jagged since you can't get the anti-aliasing effect. For the crest, that may not be a problem. Actually, you could even have anti-aliasing on the text, if you have a green outline around them, the exact same green as on the background.


Oh, if you meant how to do that, I'm not sharp enough on all the possible fancy filters out there... I'd just erase it (the background on the image) with the eraser or draw boxes with marquee and cut.
Dunno about PS, but in GIMP I'd first need it to start on a transparent background first or I'll be given the default white background. I open a new file the same size as the image, then open the image, copy it and paste in a new layer over the transparent background of New File. A bit of work but that's how I can always know that erasing and cutting will keep the back transparent. I've tried just giving a new layer underneath images but that doesn't always work for me.

Still again, before you save, try to reduce your number of colours a bit at a time until it looks funky. The least amount you can use before it looks bad will make your file smaller. 200k is too big I think for such a small image.

 

Thanks.

The current file size is not 200k, it's 20k, 200k is what the non-compressed file is.

I'm not sure if the original photoshop file provided with the theme had the right color background now--maybe that's the problem all along? A bad theme?

 

Judging from the crap we found in his code, it's quite possible. : )