Link to home
Start Free TrialLog in
Avatar of flynny
flynnyFlag for United Kingdom of Great Britain and Northern Ireland

asked on

remove white line around animated gif with transparency

Hi all,

I'm creating an animated GIF with a transparent background.

However when I export this and add to my site, the GIF has a white line around the edges of the image as it animates. My layers are individual PNGs I created in photoshop. Now if I load a PNG the white line disappear which points to the GIF export being the issue.

I've used fireworks and the following;

file -> image preview

format - Animated Gif
palette - Exact

ive tried both alpha and index transparency.

Is there any options I can change to help fix this issue?
Avatar of Kimputer
Kimputer

Can you attach the GIF file here?
Avatar of flynny

ASKER

There's some slight white lines around the bird yes. The PNG file will not show it because  of it's better transparency properties (more advanced).
The GIF shows these white pixels, because actually they're not exactly white at all. A GIF will make a pixel transparent if the pixel is really white (ie RGB 255 255 255), but these white-ish pixels are all not 100% white (as in RGB 247 222 214 etc etc)
You can only solve it by rendering the GIF file with the background already in the color you want the webpage to be in. But when this GIF is used again on another background, you will have the same problem (but now, slight black lines for instance).
Another option is the turn off anti-aliasing when rendering, but that will result in a "blocky" bird, and the edges will be quite blocky and sharp.
Avatar of flynny

ASKER

Hi Kimputer.

Thats great, so really I cannot get around this issue as the bird is to be placed over a CSS3 animated background so the color would be constantly changing.

Is it possible to use CSS3 to animate in this way (i.e. have the 5 pngs in the GIF and flit between them?)

Or do you know of any other solution or file format I can use?
Avatar of flynny

ASKER

also how owuld I remove anti-aliasing as I cannot see this as an option.

Thanks.
ASKER CERTIFIED SOLUTION
Avatar of Kimputer
Kimputer

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
The simplest way to remove the white light around the bird is to re-make the gif file with a coloured background. Use the RGB or Hex value in the background layer that is used in the webpage.
By using the same colour as your site background the aliasing will be based on that colour and should appear in a more seamless manner.