Convert PNG files to an animated GIF

I was looking for a way to combine a sequence of PNG files that were generated by the turtle library I have been working on and it turned out to be easy using ImageMagick. The command to use is:

> convert -delay 40 -loop 1 tree*.png trees.gif

This will generate an animated GIF file with 40ms delay between images that will play once (-loop 1). You can use -loop 0 value to loop indefinitely. Here is the image that was generated:

If you do not see any animation and see the grass, it means that the animation is already over (as it loops only once). You can reload the page or click on the image to see it again. It turned out that some browsers (like Firefox) do very aggressive caching of images, including animated images, and will not replay it after page reload and even if you open the same image on a different page (as long as it references the same URL). I used a simple JavaScript trick to dynamically generate a unique URL, which will allow you to see the animation when you click on the link:

<a href="/images/turtle-trees.gif" 
   onclick="javascript:this.href += '?' + Math.random()">

this refers to the object that the onlick event is triggered for (the a tag in this case) and its href attribute is modified with a random query parameter (which is ignored by the browser in this case).

You should get a copy of my slick ZeroBrane Studio IDE.


I have trtied to run the convert command in a cmd window but it runs indefintely until I cntrl-c it. Any ideas? i would like to use it.

Hi Shayne, I did notice that the command is rather slow. I've used it to merge tens and hundreds of images and remember that I was waiting for much longer than I'd like (or expected). You may want to try on fewer images to see if it is just slow.

you need to set the loop option to 0 to make it run continuously like this

convert -delay 40 -loop 0 tree*.png trees.gif

With convert, I am getting shades in the alpha channel, echos of previous frames. Any idea?

Leave a comment

what will you say?