I Built a Small Tool for Screenshotting and Recording Public Websites — and It Went Deeper Than I Expected
Back in August, I built a small utility website that can take screenshots or record scrolling videos of any publicly accessible website.
At the beginning, the idea was very simple:
“Just take a screenshot of a website.”
But as I started researching and actually building it, I realized that even a “simple” website screenshot tool can go surprisingly deep.
Website Screenshots
A “clean, complete, and good-looking” website screenshot is not as trivial as it sounds. There are quite a few factors to think about:
- Device & Resolution Support
This one is obvious but essential:
The tool needs to support different viewport sizes — desktop, tablet, and mobile.
- Viewport vs Full Page
Should the screenshot capture only what’s visible on the screen, or the entire page height?
I added a “Full Size” toggle so users can choose between:
Viewport-only screenshot
Full-page screenshot
- Output Formats
For images, JPEG and PNG cover most use cases.
But some websites are long, content-heavy articles. In those cases, users may want to save and read them later — so I added PDF output as well.
- Timing the Screenshot
This is trickier than it looks.
If you capture too early, you’ll end up with:
Loading spinners
Incomplete layouts
Half-rendered content
So the tool needs to wait until the page is “ready”:
At least after the load event
Sometimes even until network idle
But modern websites often load content asynchronously on the client side, so even that’s not always enough.
To handle this, I added a “Capture Delay” parameter, allowing users to wait an extra few seconds before taking the screenshot.
- Blocking Ads
Nobody wants ads in their screenshots.
So there’s a “Block Ads” option to hide common ad elements before capturing.
- Cookie Consent & GDPR Banners
Especially for European-facing websites, cookie consent popups are everywhere.
To avoid screenshots being ruined by banners, I added a
“Block Cookies & GDPR Banners” option.
These are some of the experiments I’ve done so far around website screenshots, mostly exposed through configurable parameters.
One image is worth a thousand words — here’s what the screenshot interface looks like:
Website Scrolling Video Recording
Next came scrolling video recording.
Some parameters are similar to screenshots:
Resolution
Block Ads
Block Cookies & GDPR Banners
Initial Delay
But making the output video look smooth and usable introduces a whole new set of challenges.
- Cutting the Loading Phase
Most recording tools start recording as soon as the page opens, which means:
You’ll capture page loading
Layout shifts
Blank or flashing states
To get a clean result, you need to:
Precisely measure the time from page load start to when scrolling begins
Trim that initial segment in post-processing
- Scroll Rhythm Control
Smooth scrolling isn’t automatic.
I introduced two key parameters:
Scroll Distance – how far the page scrolls each time
Scroll Delay – how long it pauses between scrolls
Tuning these two controls has a huge impact on how natural the video feels.
- Output Formats
The default recording format is WebM, but in practice:
MP4 is far more widely supported
GIF is still very popular for social sharing (especially on Twitter/X)
So the tool supports WebM / MP4 / GIF outputs.
The workflow looks like this:
Record in WebM
Trim the loading portion
Convert formats using ffmpeg
These are the main areas I’ve been exploring for website video recording so far, again mostly exposed as adjustable parameters.
One image is worth a thousand words — here’s what the video recording interface looks like:
Example Output
Below is a sample scrolling video of the Stripe website using default parameters.
The file size is just over 4MB:
https://github.com/user-attachments/assets/8ab22ba0-23cd-42ac-a2be-67f1927fb7be
What’s Next?
There’s still a lot worth digging into, for example:
Capturing screenshots/videos in both light and dark mode
Providing an API service
Improving parallel processing for better stability and scalability
Try It Out & Feedback Welcome
If you’re interested, feel free to try it and share any feedback or ideas:
Website Screenshot Tool
https://websitescreenshot.online
Website Scrolling Video Recorder
https://websitescreenshot.online/tools/record-website-video
Thanks for reading 🙌


Top comments (0)