How to Make Animated GIFs from Images | Frame Order, Speed and Loops

Prepare the images for your GIF

Start by preparing the images you want to use. Drawings with small changes from frame to frame, consecutive photos, and screenshots of a procedure are all suitable.

Supported input formats are JPG (JPEG), PNG, and still WebP. You cannot import an existing GIF or a video directly.

If you have many pictures, number the filenames, such as step-01.png and step-02.png, to make them easier to arrange later.

1. Add images to Frame Animator

Open Frame Animator and use Choose Images to add several images at once. On a computer, you can also drag and drop files or paste copied images from the clipboard.

Imported images appear as thumbnails in the frame list.

You can add up to 200 frames. There are also limits of 50 MiB per file and 500 MiB in total. Many large images may exceed your device's memory even within those limits.

2. Arrange images in the desired playback order

The animation plays the frames in the order shown in the list.

Use the drag handle on each image to change its position. On a phone, the Move Forward and Move Backward buttons can be easier than dragging.

For numbered images, sorting by filename is convenient. You can also delete unwanted frames or duplicate an existing one.

If you move something by mistake, use Undo. You can start by arranging the overall sequence and refine it later.

3. Adjust how long each frame is shown

Animation speed depends on how long each image stays on screen.

For example, 500 ms means a new image every 0.5 seconds, while 200 ms means every 0.2 seconds. Smaller values make the motion faster.

To switch all frames at the same pace, use the All Frames Duration setting to apply a duration in bulk.

For an instructional animation, keeping one important screen visible a little longer can make the explanation easier to follow.

Each frame can last from 20 to 10,000 ms in steps of 10 ms.

You can also use 0.5× Slower or 2× Faster to adjust all previously configured frame durations together.

4. Set the GIF size and image placement

If your source images have different dimensions or aspect ratios, use the output canvas settings to give the animation a consistent size.

Choose Fit to show each whole image without cropping, or Crop to fill the canvas without extra margins.

Crop may cut off content near the edges, so check that text and important details remain visible.

Choose a transparent, white, black, or custom background. For precise output dimensions, set the width and height individually from 16 to 4096 px.

5. Set playback direction and looping

Once frame order and durations are set, play the preview to see how the animation moves.

There are three playback directions.

Forward: Play from the first image to the last

Reverse: Play from the last image to the first

Ping-pong: Play to the end and then return in reverse

You can also play the sequence once, a specified number of times, or indefinitely.

Use Ping-pong for motion that swings back and forth, or an infinite loop for a short animation that should repeat.

Pause or step through the preview to identify awkward changes, then adjust frame order or duration as needed.

6. Choose GIF or Animated WebP

Choose GIF as the export format when you want a conventional animated GIF.

GIF is limited to a palette of up to 256 colors, so photographs and gradients may look different from the source pictures.

Frame Animator lets you adjust GIF palette size and dithering. Dithering approximates shades with a limited set of colors; it can look more natural in some pictures but grainy in others.

Animated WebP is another option. It offers quality and Lossless compression settings and can be suitable for colorful images such as photographs.

However, not every app supports animated WebP playback. If the destination specifically requests a GIF, choose GIF.

7. Generate and save the GIF

After choosing the settings, select Create GIF on the export screen. If you chose Animated WebP, select Create WebP instead.

Once generation finishes, you can preview the actual file that was created.

Check the frame order, transition speed, cropping, and quality. You can also review the file size and playback duration.

When it looks right, download it using Save GIF.

If you change frame duration, canvas size, or another export setting afterward, generate the file again. Changing the settings alone does not update a previously generated result.

What if the GIF file is too large?

GIF files can become large depending on the number of frames and the output dimensions.

To reduce file size, try making the output canvas smaller. Removing unneeded frames can also help.

You can also reduce the palette size or compare dithering on and off. These changes can affect appearance, so compare the generated results as you adjust them.

If the destination supports Animated WebP, try exporting WebP as well and compare the file sizes.

Troubleshooting playback and image importing

If a saved GIF or Animated WebP appears as a still picture, the viewing app may not support animated playback. Open the file in a compatible browser to check whether it moves.

If images cannot be added, check their format. Frame Animator accepts JPG, PNG, and still WebP, not existing GIF animations or video files.

Very large images or many frames may also exhaust device memory. Try fewer or smaller pictures, or switch to a desktop browser.

Are images uploaded to an external server?

Frame Animator processes image import, editing, and GIF/WebP generation in the browser. It does not send the chosen pictures to an external conversion server.

Images and edits are not autosaved. Reloading the page or closing the tab discards your work, so remember to download the finished file.

A standalone HTML build containing the required runtime code is also available if you want to use the tool offline.

Summary

To make an animated GIF from several images, arrange the pictures, choose frame durations, and preview the motion.

Rather than fine-tuning every option immediately, it can be easier to generate a first version and then adjust its speed or dimensions.

Frame Animator lets you try both GIF and Animated WebP with the same pictures. Compare motion and file size for the place where you intend to use the animation.