GIF Image looks poor in FrontPage

[Dazzystar0011]

Hi All,

I have an image in Photodraw of a black & white photo in a heart shape with softened edges. When I save the file as a GIF it warns me about the GIF file format flattens the image and when I import the image into Frontpage it looks very poor, there is no softened edges and the edges of the heart look very ragged. Nothing like the image in Photodraw.

Can someone please advise if either I am doing something wrong or whether this is a FrontPage issue.

TIA!

[Marketing Guy]

I would imagine that the problem is the file format and not how FP is displaying the image (ive never encountered this problem).

Perhaps try saving it as a .jpg?

Also, are you using the graphics package to optmise the image for the web? That could be reducing the quality.

Regards
Scott

[edit_g]

Also check that FP is displaying the image as you saved it (check the height and width of the actual image) and that it hasn't made it bigger by increasing the height and width of the image in the HTML code (which it sometimes does).

[Dazzystar0011]

Thanks for the replies guys!

I've tried changing the file format from .GIF to .PNG and although the picture is much better in quality and the soft edges appear so does the background!

I'v checked that the background is transparent in Photodraw and it is....I've even previewed the picture in my browser from Photodraw and it is correct (I think as the preview web page background colour is white!)

Any ideas?

[mivox]

If you want "soft" edges, you'll need to leave more of the background along the edges of the heart... which could create a nasty jagged 'halo' around the image if the page background does not match, so you'll need to be very careful with your colors.

Also, if the image had a lot of shading and color gradation, you'll have to create a fairly large gif file that includes enough colors to accurately portray the gradations, otherwise they will appear dithered or blocky where the gif algorithm has switched a smooth color transition into a series of 'closest match' color blocks.

Otherwise, put a background in the image that coordinates with or matches your page background, and use a more 'soft friendly' file format like jpg or png.

[amznVibe]

In a simpler explanation, you cannot have clean curved edges in an image that has a transparent background.

To do anti-aliased edges the graphics program has to know what the background is so it can fade between the edge color and the background color.

Advanced graphics programs like photoshop will try to help you even with a transparent background image, but its never going to look as good cause it has to drop out pixels where the colors would merge.

I know this is annoying, I've tried a few techniques so I do not have to lock in a certain background color, no luck. Best bet is to use a program that lets you vary the background (canvas) color very quickly, like PhotoShop or PhotoImpact.