0

I'm Creating Animated stickers using Illustrator and Aftereffects, I need to export them since it going to work on Mobile devices like iPhone and Android. So in which format can, I export the Animated Stickers.

  • APNG isn't supported in all browsers, such as Internet Explorer and MS Edge. So, GIF is your best bet if you want everyone to see it. – Billy Kerr Jan 12 at 11:11
0

Well, just offhand..

  • GIF = 1bit transparency..
  • APNG = 8bit transparency..

So.....

Do you need soft transparency? Then GIF won't work.


  • GIF is supported by pretty much every browser available
  • APNG is not as widely supported and may not work for some browsers

So.....

Do you need to support older browsers? Then APNG won't work.


Basically, the choice between GIF and APNG all comes down to what you need to support.

  • 1
    Friend, So which format is Good to Create an animation Sticker. – Jeevan Jan 12 at 10:58
  • Hi @Scott. Your answers are usually pretty great and to the point, but this might be a tad too succinct. Care to elaborate? – PieBie Jan 14 at 9:10
0

There are several things to consider when choosing a file format.

The type of image.

Of course, we know that on static images, if it is a photo, we should use JPG. And if it is a flat image or illustration, PNG is the way to go. And for vector shapes, that need to be scaled or interacted with, SVG.

On Animations, we have some more options.

GIF

If your image has a flat style, which is probably what you need right now, I would go with Animated-GIF. It gives you decent file size, some features to reduce file size, like refreshing only the animated part and it is almost universally accepted.

Obviously, the drawback is the poor transparency, where if the animation requires a smooth transition between the transparent animation over the background, it can give you a "halo" of non-transparent pixels.

But it is something that can be planned ahead. If you need some transparency, you can make the animated gif on a similar background as the final one.

But a lot of people use it just flat and do not need any transparency at all.

If you want to use it on a video, you need to dither it which can look ugly. Especially when scaled up or down.


CSS sprites

For a webpage, you can animate the background of an HTML tag, like a and animate it. Basically, you have all your frames on a big canvas behind your div. It needs some coding but it is widely supported, and you can have any transparency you want, and you also can have some nice blending modes.

https://duckduckgo.com/?q=css+sprite+animation

You can also use this to animate some JPG files. But people do not use it very often. An advantage is that you can compress your JPG photo and animate it.

Video

Almost universally accepted, high compression rates, and you have control on playback, etc. You can have a long duration animation on a relatively small size file. MP4 is the most accepted container. And of course, you can have Audio!

SVG morphing

This is very specific. You can transform the instructions inside an SVG while maintaining the sharpness regardless of the scaling... A nice feature to have but you need how to program JavaScript and manipulate it... It is not for everyone.

APng

It is starting to have some track as you can see here https://caniuse.com/#search=Apng but it lacks support on some browsers. You can have nice transparencies.

You do not have many choices on how to generate it and control the framerate. It would be my last choice for now (2019 Jan) but let's see if it gets more attention.

Your Answer

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.