How to create light gifs from saveFrame() images?

juanigp

Hello people, I've been doing simple animations in p5 and want them to be animated gifs. For this I use saveFrame() and then join all the screenshots with PhotoScape. I usually have around 300 screenshots and get a gif of around 10 to 20 mb.

Do you guys know a better way to do this, or what should I do to get a smaller size?

Thanks

KevinWorkman

I use Image Magick, but the process is probably very similar to yours.

For decreasing size you've really only got a couple options: decrease the colors, decrease the quality, decrease the dimensions, or decrease the number of framerate. It's not an exact science.

koogs

300 frames!

jeremydouglass

Re: smallest possible gifs from Processing frames.

In addition to the methods that KevinWorkman mentions, you can optimize gifs specifically if you have frames that repeat exactly, or if many of the pixels between frames stay the same from image to image. For a discussion of this see ImageMagick > animation options.

Many gif-building programs will do some inter-frame optimization for your automatically. However if you have an easy-to-optimize long gif (a bouncing ball on a flat background) and don't optimize at all, then the difference can be dramatic.

Still, there is no magic bullet for trying to pack lots of different pixels into one file. The file just gets bigger. If you must get the file as small as possible then a create version using every different set of optimization settings and see which one is smallest. This is processor intensive, but it can be automated with a shell script.

How is any of this related to Processing? The only thing that might matter is that if you are sure to save out graphics with transparent backgrounds rather than solid backgrounds everywhere that isn't being drawn this can cue even dumb gif-makers to do better optimization.

From the Processing saveFrame() reference:

All images saved from the main drawing window will be opaque. To save images without a background, use createGraphics().

The original question was re:p5.js -- I'm not sure how p5.js saveFrames handles transparency, but I've seen open issues on p5.js and gif-making that might be relevant.