After Effect file size as gif

[christinec2246158]

Hi All,

I'm hoping that you can help me. I am fairly new to After Effects as my client has asked me to make some little animations, based on a previous graphic, to embed on their website. The animations are 20 seconds long and on repeat.

To keep the file size low, I have the frame rate down to around 50fms with 0 lossy (Photoshop Gif). This brings the gif to what I feel is a sensible file size of just under 10MB.

Now enters the problem... It is working ok on Chrome, Firefox, Opera but on Safari, IE and Edge it is running choppy and slow for the first run through and then plays as it should. The quality of the choppiness is worse on IE and Edge however.

So these are my questions.
Is it the file size that is to big? Can you advise me on how big a gif should be?

Is it a browser thing? Not all browsers render the same...

Or is it a problem with their website and a developer needs to do something on their end? (For example caching) And if so what do I tell the developer???

Or should this not be a gif and is there a better way to save my movie and have it run smoothly?

These are the animations:

https://www.bsigroup.com/en-GB/standards/british-standards-online-database/bsol-training-blog/traini...

https://www.bsigroup.com/en-GB/standards/british-standards-online-database/bsol-training-blog/

I would be grateful for any advice.

All the best,

Christine

[Roei Tzoref · Accepted solution]

here are the things I have noticed about your GIF's, all of these have an impact on your file size:

1. Frame rate -  50 fps is WAY to extreme for Gifs. you should reduce your frame rate to something like 15. .
2. Resolution - in the link you provided the GIF's resolution is bigger the what is actually used in the webpage. this means you producing a file that is bigger than it needs to be.
3. Duration - 20 seconds is a very long duration for a GIF, if that's a constraint then there's nothing I know that could be done about that.

here are my recommendations to dealing with GIFs:

• read this extensive article to see how to optimize your GIFs: https://design.tutsplus.com/tutorials/10-ways-to-optimize-an-animated-gif-file--psd-34649
• if you are making a lot of GIFs, I would recommend you try this handy script: GifGun - aescripts + aeplugins - aescripts.com

[Roei Tzoref]

here's another useful thread on the topic of GIF's, especially take note on Rick Gerard's advice on a technique "hold" your video, if you need to, and not create more frames (and increased file size) as a result: Re: Black grain when exporting .gif

[Kris5FA4]

If anyone comes across this post again, just wanted to offer the solution that changed this gif game for me.  One word, Photoshop.

If you render out video or an image sequence from AE or ME (as high res as you want the quality to end up), then import into photoshop in order to export.  You will have a much better looking file at a much smaller file size.  Apparently AE and ME are not the best option for the final Gif, but photoshop is clearly built to handle this.  Cheers.

File -> Export -> Save for web (legacy)

Posting image of the settings I used.  This is 36 frames.  Ends up at 156.7k.