Google Blogoscoped

Friday, January 28, 2005

Ghosting

What is “ghosting"? It’s when you have a web site, and you put up a logo image or similar over a background – but your anti-alias doesn’t match. Usually this happens because the image was designed for a white background, but is now used on another background.

If you are looking for an example, I just saw this effect (admittedly, a weak version of this effect) at Secondlife.com. But usually, you find this happening on more “amateurish” sites. And the effect isn’t just restricted to the web. A big public bus in the city where I work here in Germany is displaying a rather large smiley (they think a smiley is a good metaphor to promote their online banking), and they made the same error: big white pixels outline the graphic.

Also, I just created a “ghosted” logo which should serve as bad example:

(Putting the Google Blogoscoped logo here creates another impossible situation: you should never have the logo twice on a page, not if it’s the same size.)

Well, anti-alias should make the edges softer, so we shouldn’t get rid of it, right? Mostly, yes. For small images or rectangles, of course you can get rid of it, but in other cases you should render the anti-alias over the specific background. This doesn’t mean your image must include the background: in most cases, it makes sense to make the background transparent after the anti-alias has been rendered. Not only does this keep the numbers of colors down to the bare minimum for good compression*.

*GIF internally knows 2, 16 and 256 colors, and anything in-between doesn’t decrease the file size much. And while we’re at it: “web-safe colors” are a myth, so there’s no need to work in that direction either – when you compress down to 16 colors, you should choose the best possible palette for your color scheme.

And then, there’s the PNG format. Theoretically, this not-so-new-anymore image format handles the best of both worlds (JPEG with the many colors and GIF with the transparency, that is) by allowing you different levels of opacity. This means you can handle anti-alias independent of the background the image may appear on, which is great for reuse and ease of implementing it. That’s the theory, but in practice, it looks like we need to wait for Internet Explorer 7 to be released; IE6 doesn’t handle PING correctly. (Either that, or we hope a majority of users will have installed Firefox or other fully PNG-enabled browsers.)

Advertisement

 
Blog  |  Forum     more >> Archive | Feed | Google's blogs | About
Advertisement

 

This site unofficially covers Google™ and more with some rights reserved. Join our forum!