Step-by-step guide
What you need
You need one photo representing the starting point, one showing the result, and a modern browser. The photos do not need identical pixel dimensions, but they should show the same subject from a comparable viewpoint.
1. Prepare photos that compare fairly
Keep the camera position consistent
Stand in the same place and use visible reference points. For a room, align door frames, corners, or windows. For an object, use the same background and camera height. For artwork or restoration, keep the full edges visible so alignment can be checked.
Use similar lighting
Large lighting changes can look like changes in color or texture. When possible, photograph at a similar time of day with the same lights. Avoid using a warm light for one image and cool daylight for the other.
Leave space for the final crop
Vertical social video may crop the left and right sides of a landscape photo. Keep the subject near the center, or plan to use Fit with padding if every edge must remain visible.
2. Upload the before and after images
- Open the before and after video maker.
- Select Upload Before Photo and choose the starting image.
- Select Upload After Photo and choose the result image.
- Check the reported dimensions. Very small images may look soft in a 1080p export.
The files are decoded locally. BeforeAfter.online does not receive the selected image contents.
3. Choose a video size for the destination
| Destination | Preset | Use when |
|---|---|---|
| TikTok, Reels, Stories | 1080 × 1920 | The comparison will be viewed full-screen on a phone |
| Instagram square post | 1080 × 1080 | You want equal width and height in a feed |
| YouTube or website | 1920 × 1080 | The content is landscape and image detail matters |
| Draft or slower device | 720p equivalent | You want faster rendering and a smaller file |
| Document or artwork | Original aspect | Changing the source shape would not help |
Aspect ratio and resolution are different. A 9:16 video describes the frame shape; 1080 × 1920 describes the number of pixels. Choose 720p for speed and 1080p when your photos contain enough detail to justify it.
4. Decide between crop and padding
Crop to fill
This enlarges each photo until the entire video frame is covered. It looks clean, but image edges may be removed. Use Crop focus to keep a subject near the top, bottom, left, or right.
Fit with padding
This reduces each photo until all of it fits inside the frame. Empty space is filled with a dark background. Use it for documents, screenshots, artwork, or any comparison where cropping could hide relevant evidence.
Preview the middle of the transition. If landmarks jump between sides of the divider, edit the original photos to align them more closely before generating the video.
5. Set labels, direction, duration, and frame rate
- Labels: “Before” and “After” are clear, but dates, project phases, or “Original” and “Restored” can add useful context. Keep each under a few words.
- Direction: left-to-right is familiar for horizontal comparisons. Top-to-bottom can work better when the important change is vertical.
- Duration: two to four seconds suits a simple reveal. Use longer durations for detailed plans or documents.
- Frame rate: 30 FPS is the best general choice. Use 24 FPS for a smaller file or 60 FPS only when the smoother motion is worth slower rendering.
6. Preview and export
- Select Preview animation and watch the complete reveal.
- Confirm that labels are readable and the crop does not hide the subject.
- Read the output summary to see dimensions, FPS, duration, fit, and available format.
- Select Generate video and keep the tab open while frames render.
- Open the downloaded file and watch it once before publishing.
Browser video support determines whether the download is MP4 or WebM. A WebM file is not an error. If a destination rejects WebM, use a trusted local video editor or converter to create the platform’s required format.
Common problems
The subject moves during the reveal
The photos are framed differently. Crop and align the original images around a fixed landmark, or retake the after photo from the original camera position.
The video has black or dark borders
Fit with padding is selected. Choose Crop to fill for edge-to-edge output, then check whether any important image area is removed.
The export is slow
Use a 720p preset and 24 or 30 FPS. Close other demanding tabs, keep this tab active, and avoid generating several videos simultaneously.
The platform does not accept the file
Check whether your browser exported WebM. Platforms differ in accepted formats; MP4 is used only when browser recording support makes it available.
More solutions are available in the Help and troubleshooting center.