2019/10/21

Improving GIF Quality

Let's talk about GIF image quality and some simple approaches to make your GIF look better

If you have used GIF files before, you may have noticed that some of your GIFs have jagged edges like the red edges in above examples. This is especially true when your image is small, or contains gradient:

Expected Result
Generated GIF

Why?

GIF format by the nature of its design, supports only 256 colors max at the same time along with a single, index-based color for transparency. This makes it terrible when you need an image with complex shapes, smooth gradient or lots of colors.

Unfortunately, to make it look good to your beautiful, carefully-crafted transparent background image, browsers always make some kinds of gradient called "anti-aliasing" around the edge of your image.

This doesn't happen in SVG or APNG format. SVG is a vector-based image format, pixels on a SVG image are always re-calculated everytime according to its size when we resize it; APNG as an extension of PNG format supports alpha-channel transparency natively, which tells browser how to render a semi-transparent pixel in it.

This can be demonstrated with a gradient image from completely transparent to an opaque solid color. As shown below, SVG and PNG formats provide accurate results while GIF looks totally different to what we want.

SVG Image
PNG-24 Image
GIF Image, with black matte

Although SVG and APNG provide promising quality, they are only supported by modern browsers like Google Chrome, Firefox, Safari and latest version of Edge - older browsers such as Microsoft IE don't support them. Thus, sometimes for browser compatibility sake we still have to consider serving GIF to users who are still using older browsers.

So, is there any way to make a GIF look better?

Edge Smoothing

A possible workaround is to disable edge smoothing when generating GIF files. Compare following two SVG images, one with smoothing on and the other with smoothing off:

Smoothing On
Smoothing Off

With edge smoothing disabled there will be less interpolation between the background color and foreground color of an image ( which is the cause of pixelated ), and thus works better for GIF. GIF files generated from above SVG files could be found as below - as you can see, there are almost no strange colored edges around the right GIF, which was built with smoothing off:

Black Background
White Background

Edge Smoothing option is by default enabled in loading.io's online editor; you can simply disable it to see the difference when generaing GIF image. It can be found in the default or advanced option tab in all of our online editors.

Matte Color

In above example, you can find some black jagged edges around the left rotating circular bars. This is because we set the background color option to black when generating our GIF; while this doesn't work great in white background, it actually works pretty good with darker background:

Smoothing On GIF
Smoothing Off GIF

This is called "matte color" - which simply sets the background color of your image to the color similar to the background where you are going to use this GIF. This option can be found in every GIF generation software, such as being described in this tutorial of Adobe Photoshop. Matte color helps you "blend" the jagged edges into your background so user won't even notice them.

However, this might not work if the background color is not always the same, or if it's a complex image:

Smoothing On GIF
Smoothing Off GIF

Additionally, for animations involving fading ( changing in opacity ), you will always have to set matte color to make the generated GIF work, otherwise it will lead to undesired visual effect. Following are two images in the same GIF image but over different background colors. We use black as its matte color:

Smoothing On GIF
Smoothing Off GIF

Rescaling

There is an alternative approach to make the result image less-pixelated while disabling edge smoothing. This approach is actually quite simple - when we generate GIF files, we simply make them bigger and keep edge-smoothing off. Although generated GIF files might look pixelated in their original size, we then force browsers to render them in smaller size. This effectively reduces the degree of pixelation, in exchange of file size.

Following 4 images are actually the same 128px x 128px GIF image while resized to 96px, 64px and 48px, correspondingly from left to right:

While this may seems to be a good approach, please note that it also introduces extra file size that won't be necessary with a smaller GIF file.

Conclusion

GIF still works well in most situation but since it has been 30 years after GIF has been invented, we should move forward to other better alternatives like animated SVG, APNG or even Webm, and let Internet Explorer live only in our memory.

If for any reason you still have to support IE - a common approach is to serve SVG files by default with automatically fallback to GIF when we detect unsupported browsers. We will cover this part in the following articles.

Additionally, in the "How to choose between animated image format" post, we provide a demonstration of image generated with different configurations and file format, you can compare the quality by your own eyes between different formats in the article.



Things don't work?
It might be AdBlock. Why?
By continuing to browse, you agree to our use of cookies.
For more details please check our privacy policy.
Details
OK

loading.io loader

Loading.io is brought to you by:
PlotDB Ltd. brand logo / 見聞科技有限公司 VAT No. 52518929

Service for making ajax loaders / loading gifs / preloaders and animated icons, live background, animated text in GIF / SVG / APNG / CSS.

Customer Service: [email protected]
LOADING.IO