DEV Community

Shawn Hacks
Shawn Hacks

Posted on

I Built a Small Tool for Screenshotting and Recording Public Websites — and It Went Deeper Than I Expected

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:

  1. Device & Resolution Support

This one is obvious but essential:
The tool needs to support different viewport sizes — desktop, tablet, and mobile.

  1. 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

  1. 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.

  1. 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.

  1. Blocking Ads

Nobody wants ads in their screenshots.

So there’s a “Block Ads” option to hide common ad elements before capturing.

  1. 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.

  1. 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

  1. 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.

  1. 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)