How do I remove artifacts from animated gifs based on high quality pngs?

Question

I know due to the limitation to 256 colors I can not do much but I've noticed some large animated gifs look very high quality. What is a the secret (I use Gimp)? A special reduction of colors or being lucky and the video being appropriate (low colored maybe)?

Solution 1

This might not be what you’re seeing, but, contrary to widespread belief, GIF images can have more than 256 colors.  A GIF file can contain many frames.  That’s how animated GIFs work — like the more complex video representations, they can store a sequence of frames (with timing information).  I may have the terminology wrong here, but the individual image frames can be smaller than the overall picture frame.  For example, you can have a 100×100 image, with a sequence of 50×50 frames, if all the animation occurs in a quadrant of the overall image.  This reduces file size by avoiding the need to duplicate the static portion of the image n times when only a small portion is actually animated.

The “gotcha” is that each frame can have its own color map.  Remember I mentioned timing information?  A GIF file can contain many frames that tile the overall image space, have different color maps, and are displayed with a delay of zero.  Here is an alleged example:

                                               

which I downloaded from Cyde Weys’ blog.  Note: I have observed in the past that some image software — specifically, programs that don’t support animation — render only the first frame of such a file, and so do not produce the desired display.

Oh!  On first reading, I missed the fact that your GIFs are manifestly animated.  Well, what I wrote above still applies.  You might have, for example, a sequence of six frames for each animation update (e.g., every 30 ms): one with a delay of 30 ms, followed by five with a delay of 0 ms. These might form a 2×3 tiling of the animated region, and you can have 256 colors in each tile, for a total of 1536 (6×256) colors.

Solution 2

[Self answer]

I found it. It's called 'Dithering' when converting to "Index mode". e.g. in Gimp when doing indexing to 256 colors there's also an option to Dither with a couple of algorithms.

It creates a smoother transition.

It does look worse, but if the original has sufficiently limited range (e.g. most of it being dark brown) then it might look almost the same. But if it's very vivid and complex (e.g. encompassing all basic colors in complexity) then it will show.

Solution 3

You did not provide any actual examples, so nobody can give specific details, only general guidelines. Further, without seeing the actual artifacts you are referring to, we can only guess as to the issue you have because there are several different things it could be.

Animated GIFs are not special, they are just a pile of GIFs displayed rapidly in a row.

The artifacts that you experience are likely due to the limited color palette that the GIF format provides. As you have found, you can use dithering to make an 8-bit image look better, but that is only one of the options. Depending on the graphics program, some provide more options, some provide less, and many of the options have different settings and modes. One animated-GIF program that I used years ago was ImageAlchemy. It had numerous options to smooth, blend, dither, crush, etc. the palette in a variety of methods and with different algorithms.

Another artifact you may be experiencing could be due more to your viewer than the file. Some animated-GIF programs have the ability to super-compress an animated-GIF so that it removes all unchanged pixels from each frame so that only the changed parts are stored. This usually only has the effect of making the file smaller, but some viewer programs have trouble with it (they are not fully GIF89a format compliant) and show the animation poorly.

Not surprisingly, the method that will give the best results depends entirely on the specific image. Some images will do fine with a direct palette mapping, others will need to be dithered, others still will require more advanced color transformations.

In addition to the GIF-specific options, another thing you can do to get better quality GIF images is to use an image-editing program to manually reduce it to 8-bit color. That way, you have better control over the color transformation since the reduction done during the format conversion/save may not be sufficient whereas the color tools in-program can provide greater accuracy and more options.

Comments

[slhck]

Do you have some examples you could show us?

[LittleFighter]

maybe by applying smoothing to each frame in the animated gif. just a quick thought, hope it helps. there's have to be software programs that allow you to do that, sorry nothing specific comes to mind right now.

[Scott - Слава Україні]

How does the title of your question relate to the question itself?