Strange artefacts in GIF-animated image with transparency

Question

I try to create an animated GIF of a bee. This image is a gif with transparency. I export it in Adobe Animate CC 2018 with such settings:

but as a result: I can't use this image on web. There are to much artifacts (when my web page background has a color):

What I do wrong?

Have you tried exporting with only two (or four) colors? Transparency and black ONLY? — SZCZERZO KŁY, Jun 27 '18 at 11:40
Since you say it's going on a website... Depending on the use case, you may want to export it to html5 canvas or as a sprite sheet animation. Unfortunately, I have no idea what kinda support Adobe Animate has for these. I'm pretty sure it has some sort of canvas export... — Joonas, Jun 27 '18 at 12:36

Pang · Accepted Answer · 2019-01-22 05:25:01Z

Some possible solutions:

Avoid antialiasing at the animation, this means pixelated border, sound hard but it is a good solution. For this, you need a good resolution file to develop your animation and simulate the borders. Some time ago, Kenzo use at their web page a very well done animated gif over static images with no soft borders. Here's the result:

Use an APNG or PNG animation file. The con is that it's not supported in all browsers, some of them display a static image. Here's a list: https://caniuse.com/#feat=apng. With PNG and APNG files, you can keep the transparency or alpha channel. This image is the one Wikipedia uses at the PNG Animation definition.

1 Answer 1