How to Make a Before and After GIF: Duration, Frame Rate and File Size
An animated GIF turns a static comparison into a reveal. It autoplays in chats, emails and most social feeds, and it needs no play button. The trade-off is file size, and three settings control it: duration, frame rate and width.
Duration
Three to four seconds per loop is the sweet spot. Our GIF Maker holds on the before, sweeps to the after, holds again and sweeps back, so the loop never jumps. Shorter than two seconds feels frantic. Longer than six seconds and viewers scroll past before the reveal.
Frame rate
Frame rate is smoothness. At 8 frames per second the handle visibly steps across the image. At 12 it looks fluid on most screens. At 24 or 30 it is silky, but the file roughly triples. For social media, 12 to 15 is the right choice. For a presentation on a fast connection, go higher.
- 5 to 8 fps: smallest files, noticeable stepping
- 10 to 15 fps: best balance for social and email
- 20 to 30 fps: presentations and portfolios
Width and color
GIF uses a 256 color palette, so photos with smooth gradients such as skies and skin show slight banding. Keeping the width at 720 pixels or less hides most of it and keeps the file around one megabyte. If you need full quality, export a video instead. MP4 has no color limit and is usually a tenth of the size.
A quick recipe
Load your two photos, open the GIF Maker, set three seconds and 12 frames per second, choose 720 pixels wide, and download. Check the result in a browser rather than macOS Preview, which shows GIFs frame by frame.