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 looks pixelated in thrie original size, we then force browsers to render them in smaller size. This effectively reduces the degress of pixelation, in exchange of file size.

Following are the same 128px x 128px GIF image, but 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

Bring Your Work Alive

supercharge with unlimited animations, advanced functionalities and support us to make more great stuff!

Free Plan
FREE

  • Access to Free Resources
  • 10 Free Assets
    Save your design as assets online
    for sharing and future use.
Sign Up
Current Plan
Stop Future Billing
Billing Page
 
 
Monthly Plan
9.99USD

  • Unlimited Access
    • Access to All Paid Content
  • Fully Licensed
    • Attribution Free
    • Lifetime Right of Downloaded Items
  • Full Features
    • Animation from any icons
    • PNG Sequence Generation
    • Large Image Generation
    • Optimized GIF Size
  • Up to 200 Assets
    Save your design as assets online
    for sharing and future use.
Subscribe
Subscribe
Current Plan
 
7 days refund guarantee
cancel anytime
Yearly Plan
39.99USD

  • Unlimited Access
    • Access to All Paid Content
  • Fully Licensed
    • Attribution Free
    • Lifetime Right of Downloaded Items
  • Full Features
    • Animation from any icons
    • PNG Sequence Generation
    • Large Image Generation
    • Optimized GIF Size
  • Up to 200 Assets
    Save your design as assets online
    for sharing and future use.
  • Priority Support
Subscribe
Subscribe
Upgrade
Current Plan
7 days refund guarantee
cancel anytime

Monthly Plan

includes


  • whole site unlimited access
  • fully licensed
  • full features
  • priority support


7 days refund guarantee
cancel anytime


more about pricing »

Yearly Plan

includes


  • whole site unlimited access
  • fully licensed
  • full features
  • priority support


7 days refund guarantee
cancel anytime


more about pricing »





Name is required
accept
This card is not supported
Incorrect date
Incorrect CVC
ZIP Code optional
incorrect zip code format
或者將發票寄送至此地址: 僅適用台灣境內
地址為必填
收件人
收件人為必填
統一編號 選填
買受人抬頭 選填
Invalid coupon
Pay
there are errors in your data.
Payment to PlotDB Ltd. in TWD converted from USD with latest rate

Transaction processed by TapPay™ under PCI-DSS Level 1 compliance & SSL 2048bit encryption.

Payment Complete

Thank you for purchasing this item!

We have confirmed your purchase and the transaction is complete. Your purchase history can be found in your billing page where you can also find invoice for this payment.

Continue to Download

Subscribed.

Thank you for subscribing our service!

We have confirmed your subscription and the first transaction has been made. You can find your purchase history in your billing page where you can also find invoice for this payment.

Subscription will be automatically renewed at the end of each billing period. You can cancel it anytime in the billing page.


Let's Proceed
You are downloading

Icons

/ icon
generated with loading.io's Pro features. Unlock Pro Features by:
You are downloading

Icons

/ icon
released under Loading.io FREE License. download with:
You are downloading BY Licensed

Icons

/ icon
which can be used for free with attribution. how to attribute?
Free Download
Free Download with Attribution
.. or pay to remove attribution
for unlimited downloads & features
9.99USD
monthly
39.99USD
annually
only for this item
1.99USD
2 days
Name is required
accept
This card is not supported
Incorrect date
Incorrect CVC
ZIP Code optional
incorrect zip code format
或者將發票寄送至此地址: 僅適用台灣境內
地址為必填
收件人
收件人為必填
統一編號 選填
買受人抬頭 選填
Invalid coupon
Pay
there are errors in your data.
Payment to PlotDB Ltd. in TWD converted from USD with latest rate

Transaction processed by TapPay™ under PCI-DSS Level 1 compliance & SSL 2048bit encryption.




Pay Per Item

paid once

includes
  • 2 days pass to download from editor
  • Full features to this item
  • Lifetime licensed, attribution free
  •  Details ...
7 days refund guarantee
cancel anytime

more about pricing »

Monthly Plan

auto renewal

includes
  • whole site unlimited access
  • fully licensed
  • full features
  • Up to 200 Assets
  • priority support
  •  Plan Details ...
7 days refund guarantee
cancel anytime

more about pricing »

Yearly Plan

auto renewal

includes
  • Unlimited Access
  • Fully Licensed
  • Full Features
  • Up to 200 Assets
  • Priority Support
  •  Plan Details ...
7 days refund guarantee
cancel anytime

more about pricing »

Free with Attribution


you can ...
  • Free to Use with Attribution
  • Pay to Remove Attribution
  • How to Attribute ...


more about pricing »

Free Download


you can ...
  • Free for Any Purpose
  • No Need to Attribute or Pay


more about pricing »

loading.io

Loading.io is brought to you by:
PlotDB Ltd. / 見聞科技有限公司 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