VIDCOMPARE

I built this whilst I was trying to get the filesize down on a hero video for the university website.

It’s a bit of a balancing act, push the compression too far and the video looks rough in the exact spot that everybody sees first, don’t push it far enough and you’re serving a massive file at the top of the page. So I spent a fair while in ffmpeg, tweaking one setting at a time and re-encoding, however every pass left me with two files that were supposed to look the same and no decent way of telling whether they actually did.

Flicking between two videos in separate browser tabs is a pretty rubbish way of working this out. You lose your place, you’re never on the same frame, and the differences you’re hunting for are tiny and usually only in one part of the picture. What I really wanted was to stick one encode directly on top of the other and drag a line across it, so that’s basically what this does.

What it does

There are three ways to look at a comparison:

• Wipe - a divider follows your cursor and reveals one version over the other
• Split - puts them next to each other
• Grid - lays out up to four at once

On top of that there’s frame by frame stepping, zoom and pan, playback speeds from 0.25× to 2× and an audio toggle. You can also swap which file is A and which is B, and lock the wipe in place when you want to properly look at one spot.

Stepping and zoom are the two that have been most useful for the compression stuff. Artefacts tend to show up on specific frames and at actual size (a gradient that’s gone banded, or a bit of motion that’s smeared) so at fit-to-screen playback you’ll miss most of them.

It takes MP4, MOV, WebM, PNG, JPG, WebP and AVIF.

Things worth mentioning

Everything happens locally. Nothing is uploaded anywhere and the files never leave the machine you opened it on. This was a hard requirement from the start really, as the footage I was testing with wasn’t mine to be uploading to somebody else’s server.