2019/07/15

Format for Animations

a how-to guide about choosing a good animated image format that fits best for your project

Loading.io provides several different formats for animation generation. So how do you choose? Should you use GIF or SVG? what's the pros and cons for each format? We will cover all of these in this article.

Formats

In this article, we will cover following formats:

While loading.io does generate pure CSS (CSS + HTML) for some animation, but it's only for spinner and is only feasibly for simple animation, so we just will ignore pure CSS animation.

SVG

SVG is a vector-based image format that is perfect for different screen size and quite lightweight in file size. Unlike GIF or APNG, SVG animation is powered by either CSS animation or SMIL ( Synchronized Multimedia Integration Language ) in a descriptive way - browsers are told when and how to animate shapes in a SVG file.

While this extremely reduces the file size comparing to other formats, it brings additional overhead to browser by more computation task, and thus quite CPU-intensive for using SVG animation.

Basically we won't suggest you to use SVG if your file contains too much elements - in this case it might slow down your web page. This is especially true if your SVG uses SVG filters - we will suggest to use WebGL directly, while it requres complicated programming and thus not a easy task to do.

Additionally, older browsers including all versions of IE don't support animated SVG. Please consider to serve a fallback image for IE users if you need to support them.

Pros
  • Small File Size
  • Best Quality
  • Flexibility for Re-Editing
Cons
  • CPU Intensive to Render
  • Poor Browser Compatibility

TL;DR - Use SVG for simple images if you don't have to support old browsers.

APNG

APNG is an extension of PNG, which will gracefully fallback to a static PNG if browsers don't support it. It's a raster image format animated by including multiple frames in a single file, and thus it's big in size - but provide comparable quality with SVG when size is fixed.

Unlike GIF, APNG supports alpha-channel transparency, and supports up to 224 colors - so it provides much better quality than GIF; but like SVG, it's not supported by some older browsers including all version of Internext Explores, and it usually is bigger than GIF with similar dimensions.

Pros
  • Great Quality
  • Fallback to Static If Not Supported
Cons
  • File Size Is Huge
  • Poor Browser Compatibility

TL;DR - Use APNG for small, complex images if you don't have to support old browsers.

GIF

GIF is an old image format that is supported by all major browsers and also supported by old browsers like Internet Explorer. However, it supports up to 256 color max along with a single, index-based color for transparency, which quite limits it quality especially when we need a transparent background image.

GIF supports animation by including multiple frames in a single file, and thus it's big in size.

Pros
  • Great Compatibility
Cons
  • Poor Quality
  • Big in File Size

TL;DR - Use GIF if you have to support old browsers.

Examples

Here we show some live examples in different format and generated with different options, for you to compare their quality.

Dark BG
Light BG

GIF / Dark Matte

Edge Smoothing On

GIF / Light Matte

Edge Smoothing On

GIF

Edge Smoothing Off

GIF / Large Size

Edge Smoothing Off

APNG

Edge Smoothing On

SVG

Edge Smoothing On

Quick Comparison

for a more direcy, comprehensive view of these formats, here is a table for comparison between different formats:

GIFSVGAPNGCSS
Is it supported in latest version of Microsoft Edge?
Is it supported in IE version >=10?
Is it supported in IE version >= 6?
Is the file size small?
Is the image quality good?
Is the image responsive?
Is it easy to use?
Does it work in <img> tag or background-image CSS style?
Is it available for all kinds of images?

Conclusion

We still suggest you to use SVG as a major format to provide web animation in your project; but it would be better that you can provide mechanism to fallback to GIF when old browsers is detected. Always check the effect of your animation with older or slow browsers, and automatically switch to fallback / static mode when the browser can't take care your design properly.

Additionally, for complex animations you should still consider to use WebGL, and always before you decide to run something big, always think again if the animation is really necessary and helpful to your users.



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