Best way of rendering to an animated png with alpha channel?

[A.I.1]

I'm doing a logo animation for someone. They've asked for it in "png" format. At first I thought they meant quicktime with png compression and an alpha channel (doable in CC 2017), but they say they want a "format that will be easy to place into banners, newsletters, website pages etc..

Do I need to render out of After Effects and load it into some other program to convert it into an animated .png (apng format?), and if so is there a recommended program for this? Or is there a better format that will do what is being asked (.gif won't be the best since the logo has >2000 colours).

[Warren Heaton · Accepted solution]

You can create a PNG sequence (multiple frames of the animation exposed to PNG file format with transparency). 

You can't create single PNG file that contains an animation.  The file format doesn't support that.

[A.I.1]

Thanks.

See APNG - Wikipedia  - APNG uses the .png extension for animated pngs. But it isn't supported in the official Firefox release (according to that wiki link) and also isn't supported in the Microsoft Edge browser (though it is in other browsers).

So what format am I best delivering the animation in that will "be easy to place into banners, newsletters, website pages"?

Output it as a quicktime png (but will that work in newsletters sent via email?)?

Or am I best reducing the colours to 256 and outputting it as a .gif since it will be more compatible than "apng"?

Or send it in as many of these formats as I can so the places where a quicktime file will work (eg. web) will use that and email newsletters will use the .gif - and maybe send an apng format version too just in case?

[Mylenium]

You use GIFs all the way. Video files are only supported by big ad networks, but you would have to tailor them to exact specs plus even then e.g. for mobile use you would need fallback static images or a ton of videos in different sizes and CoDecs. And as Warren already pointed out and you found out - aPNG is not an official web standard, so it's out.

Mylenium

[vincent-b]

apng was well supported even at the time you wrote your message.

[Guest]

Incorrect. APNG exists and is supported in modern browsers. It can be PNG or APNG container.

[Guest]

chris24osu is up to date. APNG is definitely a thing and it's well supported in WebKit based browsers: https://caniuse.com/#search=apng

Currently there is no straightforward way to do this. I would recommend using APNGb (GitHub - shgodoroja/APNGb​) on OSX. Just export as PNG sequence and assemble it into an APNG using that tool. For Windows, I'd recommend this tool: https://sourceforge.net/projects/apngasm/

[Warren Heaton]

Thank you for the update and the links.

-Warren

[PGZ@Mobibase]

The gif option is by far the easyest. But it will probably be limited for the 2000 colors you need.

If you worked with vectors, you may want to take a look at lottie,

GitHub - airbnb/lottie-android: Render After Effects animations natively on Android and iOS, Web, an...

It is more complex to build and handle than gif or even Apng, but this kind of "code-render" is slowly coming to a mature state.

Basically It renders your animation in json-like, meaning it keeps all vector information intact and is supposed to be easy for a developer to integrate in HTML5.

Sadly, it does not -yet- handle all types of filters, objects and some other stuff.

Hope this helps....

[A.I.1]

Thanks. My animation is using bitmapped graphics (eg. .png) as well as vector (.ai) though they were originally ai., with various AE effects. I think that might be good for in future but it seems mostly about mobile devices too (not sure it would work for email newsletters on PC). Basically the files need to be delivered today (as well as the animation finished). So I'll probably look at that later but for now I'll probably just deliver it as the formats previously mentioned (the person originally asked for a png so if I can find an animated png/apng format program I'll load the After Effects frames/video into that and save/export. But I'll also upload a quicktime png compressed video and maybe a png sequence (maybe different frame sizes - or at least a smallish frame size for the animated png/apng) and also a .gif (smaller frame size than the quicktime png). Hopefully the thousands to 256 colours won't be too much of an issue. If that can look okay that seems the most compatible for everywhere eg. based on the recommendations (at least for now - maybe that lottie exporter might also be compatible - but I'll look at that more in future as it seems more complex).

[PGZ@Mobibase]

"not sure it would work for email newsletters on PC"

Depending on the solution you use, you can customize -or not- HTML, so it will definitely work on mailchimp for example....

Good luck for your delivery !

[A.I.1]

Thanks. The person liked the delivery.

The only real issue with it was the .gif to me looked noisy/artefacty. I created it at 192x108 from a 1920x1080 comp, and I'm not quite sure why it looks noisy (worse than the animated .png of the same size). I loaded the files from After Effects png sequence into Easy Gif Animator Pro and set the transparency+background colour. Maybe what looks like noisy/artefacts is because of the conversion of colours from a couple of thousand used out of a 24 bit pallette to just the 256 of the .gif. Maybe the person isn't planning on using the .gif and will just use the other formats including the .png so doesn't mind so much.

But if I could make the .gif look better (less noisy/artefacty) that would give more options. Though the person delivery so maybe it's not a problem (so maybe the person is only going to use the other formats including the full res ones. Though I don't think they've actually tried it in the places they want to yet. And the .gif should work (and show an animation) in more places than the animated png so they might find they need it but that it looks a bit noisy/artefacty when they do).

[PGZ@Mobibase]

Last time I had to deliver a gif, I found this flow very useful :

-From a AE, queue ton AME as animated gif, max quality and depth

-load this gif in Photoshop

-export using save for weba : animated gif, no dither, transparency, and it is at this point you gain control over you color (add, remove and live preview the result)

Hope it helps

[Roei Tzoref]

I would recommend this workflow:

1. export a lossless version from Ae (Quicktime Animation)
2. open in Photoshop
3. save for web to open the GIF setup
4. read this and follow the suggested instructions: https://design.tutsplus.com/tutorials/10-ways-to-optimize-an-animated-gif-file--psd-34649

[A.I.1]

Thanks, though I don't have photoshop, but I do have Photoshop Elements (I don't think elements has that option). Is there a better quality way than what I've been doing (importing the After Effects frames into Easy Gif Animator Pro when transparency is required. Before, when transparency wasn't required I'd just use VirtualDub) that doesn't use Photoshop and isn't too expensive?

[Roei Tzoref]

they say this script is very good: https://aescripts.com/gifgun/

[Warren Heaton]

If you want to stay in After Effects, GifGun is pretty awesome.  The license is free for limited functionality and paid for full functionality.

If taking the Photoshop route, keep in mind that the maximum frame count is 500 frames.  If your animation is longer than that, the animated GIF that PS exports will stop at frame 500.

[A.I.1]

Thanks for the info about GifyGun. It is a lot more convenient to use than exporting the frames (when those exported frames aren't needed for something else) and importing into another program etc. then exporting from that.

The only issues with Gifygun is that it doesn't let you specify a filename (sets it based on the composition name, with a number added if there is already a file with that name), but more importantly, at least for the comp of the last delivery, the edges of things, where they meet the transparent parts of the gif, look more pixelated/less anti-aliased than the output of Easy Gif Animator Pro. Another small thing is towards the end of the anim where a coloured object appears after the previous part of the anim had been grayscale, isolated coloured pixels appear within the grayscale areas of the frame (but this is just a few and isn't really very noticable at normal res, but doesn't happen with the same anim from the other program. Though in GifyGun it seemd to happen less when GifyGun scaled down the comp, but like I said, it's not really noticeable at normal res).

So the only real issue with GifyGun seems to be the more pixelated outline of objects where they meet the transparent areas (maybe because transparency was one of the newer updates), eg. things that are round/rounded (circular object, rounded outline of text) look less round and more step-like jagged than the rounder look from Easy Gif... This is when viewed in both smplayer and Internet Explorer at normal (100%) size.

[Roei Tzoref]

Please report your issues to GifGun Author in Aescripts support page and help make it better.