Tue 16 September 2025

Before/After Photo Alignment Web App

I created a web app for aligning before/after photos. Ony of my hobbies is picking up litter, and I'll post before/after photos to the r/detrashed subreddit:
Before (left) and after (right) photos of litter on the side of a highway and feeder road, with a Burger King in the far background.

Screenshot of the before/after photo alignment tool, with two buttons to upload the before and after photo.

To get properly aligned photos, you have to take the photo from the same spot and at the same angle. I place a stick or soda can where I stood, and try to put some common object in a corner of the frame for both photos. Make sure the zoom amount is the same as well. Then, upload the before and after photo into the alignment web app:

Screenshot of the before/after photo alignment tool, with two images loaded. One is slightly transparent and overlaid the other.

Drag them over each other so that objects in the picture are more of less on top of each other:

Screenshot of the before/after photo alignment tool, with the two images moved so that the subjects in both photos roughly overlay each other.

Once they are more or less aligned, click the Crop Both Images button. The web app will crop them so they are more aligned. Here are some more examples from my trash picking:

Before (left) and after (right) photos of litter on a sidewalk, curb, and street.

Another before (left) and after (right) photos of litter on a sidewalk, curb, and street.

I created this tool with Claude Sonnet 4, which surprisingly needed only a little editing to get it right. Portability was important, so I made this as a JavaScript web app. I was sure to specify that it needed to be a single-page web app with no dependencies. All processing takes place in the browser and, as a result, you can download the before-after-photo-alignment.html file and run it offline.