Can you save a round object as a JPEG?

[Jman]

@Mort Furd

And if you’re concerned about your site looking good no matter who visits it, you don’t use transparency with a high color png. The versions of IE that I am familiar with screw up the alpha blending. You either get jaggies (simple transparency) or you get some screwed up color in the blended area between full color and full transparent.

Interesting…I did not know that. Learn something new every day.

[Mort_Furd]

@RM Mentock

But you won’t be able to use those on different color backgrounds–and if the rendering isn’t consistent, it defeats the purpose anyway.

Actually, it works quite well.

You end up with a fringe around your actual object that is of a slightly different color. Eyes aren’t all that good at picking up a narrow 1 or 2 pixel wide fringe, and your end up with a fairly decent transition.

I also should mention that I usually use a small (5 x 5 pixel) gif to set the background color. There’s not any problem with color inconsistensies that way.

[Sampiro]

Thanks for all the info. I’ve decided to go with an image map instead of trying for a transparency.

[RM_Mentock]

@Mort Furd

You end up with a fringe around your actual object that is of a slightly different color. Eyes aren’t all that good at picking up a narrow 1 or 2 pixel wide fringe, and your end up with a fairly decent transition.

I’ve used it. But, it’s not much different than the “jaggies” and worse if you are using different colors. For instance, these emoticons may end up on different backgrounds.

[GuanoLad]

@mhendo

When i inserted these images into my webpage, however, and opened it using IE6, i found that CCCC99 as rendered by the browser was slightly different than CCCC99 as rendered by Photoshop, so i could see the square outline of the gif and it didn’t look transparent.

I’m not sure why this happens, or if it can be fixed, but if my experience is any indication, then a transparent gif is the best way to guarantee that your odd-shaped graphics blend properly with the background.

The trick, as Mort Furd says, is to use a repeated background image (in the same format as your other image - gif or jpg) instead of a browser-generated background colour. That will give a more reliable match. Layer jpgs on top of jpgs, and gifs on top of gifs. If you aren’t using graphics that need to match backgrounds, then browser colours are okay to use, but generally you should avoid using them if possible.

btw, never use a repeated background image that is busy or has a pattern on it - only use a plain colour or subtle gradient image, unless you really know what you’re doing.

[Daver914]

Web developer checking in.

I’m with Hunter Hawk and his wet blanket approach on this one. Elevator buttons and other gimmicky metaphors are very 1997. Subtlety and minimalism are the wave of the future in web design. Plain HTML text or simple rendered text links will give your site a longer-lasting appeal. See The Weekly Standards for some outstanding examples of minimal design.

However, if you must use buttons that “look like buttons”, go with simple transparent GIFs. JPEGs don’t compress flat-color images well, and if your user has particularly high or low gamma settings they might see the little box around the image that others have mentioned. Don’t use PNGs; IE doesn’t play nice with them. Most attempts at transparency will result in an ugly grey box around the image.

Just my two cents.