A before and after slider is the best way to show a change, right up until you try to post it somewhere that only accepts images. Reddit strips iframes. Discord shows links as cards, not live widgets. Nexus mod descriptions, forum posts, X, most comment sections: image or nothing. For all of those, the answer is the same comparison exported as an animation that plays the transition on its own. No dragging required, because the file does the dragging.
imgi builds the animation from the same two images you’d put under a slider. Upload, switch to the animation export, download. The interesting decisions are the format and the pacing, so let’s do those properly.
GIF, MP4, or WebP: pick by destination
The three exports do the same job with different tradeoffs, and picking wrong mostly costs you quality or file size.
GIF is the compatibility king and the technical dinosaur. The format is from 1989, holds a maximum of 256 colors per frame, and produces the biggest files of the three by a wide margin. It also plays literally everywhere, automatically, with no play button, which is why it refuses to die. Use it when you don’t control the destination: forums, mod pages, chat apps, README files.
MP4 is the quality-per-byte winner. Full color, smooth motion, a fraction of the GIF’s size. The tradeoff: some places treat video differently from images (a play button, no autoplay, or video posts routed differently, like on Reddit). Use it whenever the platform takes video, which includes Reddit, Discord, and X.
WebP sits between them: full color like MP4, autoplays like GIF, smaller than GIF. Browser support is fine these days; the holdouts are older apps and some forum software that treat it as an unknown file. Use it on the modern web when you’d otherwise use GIF, and fall back if the destination refuses it.
If you’re unsure: MP4 for anything that calls itself a video platform, GIF for anything that calls itself a description field.
Make it
- Open imgi.co and drop in your before and after. The same prep rules as a slider apply: same dimensions, same framing, sides labeled.
- Switch to the animation export and pick GIF, MP4, or WebP.
- Set the speed, preview the loop, export, download.
The free tier animates two frames, a before and an after, with a small watermark; Pro raises it to six frames and removes the watermark. Six frames is what you want for a sequence, say a photo restoration in stages, or one scene under several graphics presets playing as a loop.
Pacing is the whole craft
A comparison animation has exactly one job: hold still long enough for the viewer to see each state, then show the change. Most bad before and after GIFs fail by being fast and busy.
- Let each side rest. The viewer needs a beat to take in the before, or the after means nothing. If the transition fires the instant the frame settles, it reads as flicker, not change.
- The loop hides your ending. Remember the file repeats forever; a loop that snaps harshly from after back to before feels broken. Watch the preview through twice before exporting.
- Resist cramming six scenes into one GIF. One scene per animation, and post several files if you have several scenes. An album link can carry the full set for whoever wants more.
- Keep the dimensions sane. Full 4K animations are wasted on a Discord message column; 1280 wide is plenty almost everywhere, loads fast, and dodges platform size caps, which are real, vary by site, and change often enough that “keep it a few MB” is the only advice that stays true.
Platform quirks worth knowing
Reddit plays MP4 as a native video post, which is the smoothest presentation you’ll get there. Put the interactive slider link in a comment for the people who want to inspect the pixels themselves.
Discord plays GIF, WebP, and MP4 inline. GIF autoplays silently in the channel, which for a two-state comparison is exactly right.
X converts uploaded GIFs to video on its end anyway, so uploading the MP4 directly just skips a recompression you didn’t choose.
Nexus and forums take GIFs wherever they take images, which makes a GIF the only way to get motion into a mod description. Pair it with the live comparison link; the GIF catches the scroll, the link survives the click. There’s a full workflow for mod pages in the game mods comparison guide.
GitHub READMEs render GIFs reliably. Fancier formats get inconsistent treatment depending on where the file is hosted, so the dinosaur wins again.
Two questions that keep coming up
Why does my GIF look grainy when the source images are clean? That’s the 256-color ceiling. A GIF approximates your full-color image with a limited palette plus dithering, the speckle pattern doing the approximating, and it shows worst in smooth gradients like skies and shadows. It isn’t your screenshots and it isn’t fixable inside the format. If the grain bothers you, the same export as MP4 or WebP keeps the full color range.
Can the animation hold more than a before and an after? Yes, up to six frames on Pro. Worth it when the story has stages, a restoration pass by pass, or a mod’s low, medium, and high presets cycling in one loop. For exactly two states, two frames is the cleaner read.
When to skip the GIF
An animation shows the change on your schedule; a slider lets the viewer explore on theirs. If your audience needs to study the difference, judging an upscale, inspecting texture work, pixel-level arguments, send the interactive comparison link instead, or both. And on your own site, where iframes are allowed, the live embed beats a video: it’s lighter than it looks, and visitors can actually grab the handle.
The nice part of making all of these from one place: the GIF, the MP4, the embed, and the link are the same comparison. Upload the two images once, and every format you’ll ever need for that change comes off the same page.