Shrink Page Screenshots with WebP

Capture WebP screenshots and compare image quality and file sizes locally.

Introduction

30 Second Summary

A screenshot can look sharp while quietly adding megabytes wherever you use it. The image format decides how much space that screenshot consumes.

In this project, you will use shot-scraper to capture the same page as PNG, lossless WebP, and lossy WebP for a direct size and quality comparison. You will turn your findings into a reusable configuration that captures several URLs at several widths.

What You'll Build

One command fills your output folder with WebP screenshots at the widths you chose.

By the end of this project, you'll have:

A side-by-side file-size comparison that shows how PNG and lossless WebP differ in bytes.
A full-size quality check that reveals what changes when you add lossy compression.
One-command batch captures that fill a folder with WebP screenshots for several pages and widths.
Secret Mission: An optional challenge to push your screenshot workflow further.

Are there any prerequisites?

You need Python with either uv or pip, plus a terminal.

You also need a public page you own or a local page you can capture. Everything runs locally, so there is no account or API key.

Before We Start

Before the hands-on work begins, this is your moment to commit to the screenshot pipeline you are building. You will compare the same page across PNG plus two WebP formats using a page you own.

Install Shot-Scraper

Repeatable screenshot comparisons need the same browser workflow for every image. This setup gives your terminal a consistent way to render each page.

The shot-scraper command-line tool controls a headless browser without opening a browser window. You will install both parts before confirming the installed version.

In this step, get ready to:

Check whether shot-scraper is already available.
Install shot-scraper plus its browser dependency.
Print the installed shot-scraper version.

Check for shot-scraper

A version check reveals whether the CLI package already exists in your local Python environment. The result determines whether you need to install it.

Check whether the CLI is available by running this command:

shot-scraper --version

What Does This Command Check?

The --version option asks the installed CLI to identify its release. A printed version confirms that your terminal can find the command.

✔️ A version prints

You are already one step ahead. The CLI package is available in your local Python environment.

ⓧ No version prints

A missing version means the package still needs installing. The Python package manager can add it to your local environment.

Install the package by running this command:

pip install shot-scraper

What Does This Command Install?

The pip command installs shot-scraper plus the Python packages it depends on. The separate browser download comes next.

Wait for the package installation to finish.

The terminal finishes the installation before returning to its prompt. Good, the CLI package is now part of your local Python environment.

Does the Package Installation Fail?

Confirm that your terminal can access Python plus pip.
Check your internet connection before retrying the installation.

Ask for help with the installation details here: Help me install shot-scraper in my local Python environment.

Download the headless browser

The CLI uses Playwright to control a dedicated Chromium build. This browser renders the pages that become your screenshots.

The first browser download can take a few minutes. A quiet stretch during the download is normal.

Download the required browser by running this command:

shot-scraper install

What Does This Command Install?

The install subcommand asks Playwright to download the default Chromium build.
The downloaded browser gives shot-scraper an engine for rendering web pages.

Wait for the browser download to finish.

You will see download progress complete before the terminal prompt returns. That is the largest setup task done. Chromium is now ready for screenshots.

Does the Browser Download Stop?

Check that your internet connection remains active.
Run the browser install command again after the connection is stable.

Get targeted help here: Help me diagnose the shot-scraper browser download.

Verify the installation

Before you run the final check, do you expect the terminal to recognize the command now?

Print the installed version by running this command:

shot-scraper --version

What Does the Result Prove?

A version number proves that the terminal can find and run shot-scraper. The completed browser download means the tool is also ready to render pages.

You will see the tool name plus an installed version number. Nice work. Your local screenshot pipeline now has the CLI plus the browser it needs.

Still Missing the Version?

Return to the same Python environment where you installed the package.
Restart your terminal if the installation changed its available commands.

Get help with the environment here: Help me make the shot-scraper command available in my terminal.

The setup is ready. Next, you will capture your page as a PNG to inspect its file size.

Capture a PNG Screenshot

Your shot-scraper setup already controls a headless browser. This step turns the page you chose into a baseline image.

A PNG capture gives you a familiar starting point. Its file size becomes the first measurement for your later WebP comparisons.

In this step, get ready to:

Capture the page you own as page.png.
Confirm page.png exists in your file browser.
Record the PNG file size for later comparisons.

Capture your page as PNG

The -o option gives the capture a predictable filename. A relative filename places page.png in the terminal's current folder.

Return to the terminal from earlier.
Confirm the page you chose is available at <your-page-url>.

Before you run this, what new file do you expect to see when the terminal prompt returns?

Create page.png from your chosen URL by running this command:

shot-scraper [[YOUR_PAGE_URL="<your-page-url>"]] -o page.png

What Does This Command Do?

The shot-scraper command loads your URL in its browser before taking the capture.
The -o option sends the image to page.png.

Wait for the terminal prompt to return.

The returning prompt confirms that shot-scraper has finished the capture.

Does the Capture Command Fail?

Confirm <your-page-url> opens successfully in a regular browser.
Check that the command contains the full page address.
Help me diagnose the failed screenshot capture.

Inspect the PNG file size

File size gives you an objective baseline for the formats you capture later. The comparison only becomes useful once you record this first measurement.

Before you inspect the file details, do you expect this screenshot to take up kilobytes or megabytes?

macOS

Switch back to Finder from earlier.
Navigate to the folder where you ran the capture command.
Select page.png.
Click File in the menu bar.
Select Get Info.
Read the listed file size.

Windows

Switch back to File Explorer from earlier.
Navigate to the folder where you ran the capture command.
Select page.png.
Press Alt+Enter to display the file properties.
Read the listed file size.

Record the listed size: your page.png file size.

You should see page.png with a non-zero file size. Your PNG baseline is now locked in.

Your PNG baseline is ready. Next, you will capture the same page as a lossless WebP image.

Create a Lossless WebP

Your first capture proves that the screenshot pipeline can save your page as PNG. Its file size gives you a baseline for the next format.

Lossless WebP preserves the captured image without discarding detail. You will capture that version as page-lossless.webp.

The two file sizes will show which encoding uses fewer bytes for your page.

In this step, get ready to:

Capture the same page as a lossless WebP.
Confirm the new image appears beside the original PNG.
Compare the two file sizes.

Capture the lossless image

WebP can use lossless encoding. This mode keeps the captured image data intact.

The .webp extension selects the output format. Leaving out --quality keeps the default lossless setting.

Switch back to the terminal from your PNG capture.
Create page-lossless.webp from the same page by running this command:

shot-scraper [[PAGE_URL="<your-page-url>"]] -o page-lossless.webp

What Does This Command Do?

The page URL points at the same page used for page.png.
The -o option directs the screenshot into a named output file.
The page-lossless.webp filename selects WebP through its extension.
The missing --quality option leaves WebP at its lossless default.

Wait for the screenshot command to finish.
Return to the file browser from earlier.
Refresh the current folder view.

You'll see page-lossless.webp alongside page.png.

Missing the WebP File?

Confirm the terminal is still in the folder that contains page.png.
Check that the output filename ends with .webp.
Check that your page URL still loads successfully.

Help me diagnose why my lossless WebP screenshot was not created.

Compare the file sizes

A fair size comparison uses the same page. It also uses matching capture dimensions.

Before you compare the numbers, which format do you expect to use fewer bytes for your page?

Return to the folder view that contains both screenshots.
Switch to a file view that displays file sizes.
Sort the folder by filename to place page-lossless.webp beside page.png.
Compare the size value shown for each file.

You'll see both file sizes in the same view. The values reveal which lossless format stores this particular capture in fewer bytes.

You now have an evidence-based comparison between two lossless formats. Next, you'll add a quality setting to trade some image detail for a smaller WebP.

Compare Lossy WebP Quality

Your lossless WebP established a visual baseline for the page you own. The next decision is whether quality 75 keeps that page clear enough to ship.

In this step, you will capture the same page with lossy compression. You will inspect both WebP files at full size.

In this step, get ready to:

Capture the same page as page-quality-75.webp with quality 75.
Open both WebP captures at full size.
Inspect matching details for visible compression artifacts.

Set a lossy quality target

WebP can preserve every pixel or use lossy compression. A quality value of 75 asks the encoder to trade some image detail for stronger compression.

Return to the terminal from earlier.
Create page-quality-75.webp from <your-page-url> by running this command:

shot-scraper [[PAGE_URL="<your-page-url>"]] -o page-quality-75.webp --quality 75

What Does This Command Do?

The .webp ending makes shot-scraper produce a WebP file.
The --quality 75 option sets the WebP quality to 75. This applies lossy compression to the new capture.
The output name keeps the lossy file separate from page-lossless.webp.

Switch back to the file browser from earlier.
Refresh the folder view.
Confirm page-quality-75.webp is listed beside page-lossless.webp.

You have the comparison pair now. Both images come from the same page with different compression settings.

Can't Find the Quality 75 File?

Confirm the terminal is still using the local Python environment from earlier.
Check that <your-page-url> loads successfully in your browser.
Retry the capture after the page is reachable.

Help me diagnose the missing WebP capture.

Inspect both WebP files at full size

Compression artifacts can hide when an image is scaled down. A full-size comparison keeps each screenshot at its captured detail level.

Before you compare the files, which parts of your page do you expect to expose quality loss first?

Double-click page-lossless.webp in the file browser from earlier.
Use the image viewer's zoom control to display page-lossless.webp at full size.
Switch back to the file browser from earlier.
Double-click page-quality-75.webp to open it in another image viewer window.
Use the image viewer's zoom control to display page-quality-75.webp at full size.
Arrange both image viewer windows side by side.
Compare small text in matching areas.
Compare gradients or detailed images in matching areas.

Both images should show the same page at the same captured dimensions. Visible quality loss can appear as softened text edges or banded gradients.

A close match at full size is evidence that quality 75 suits this page.

Do the Images Look Mismatched?

Return both viewer windows to full-size zoom.
Compare the same section of the page in each file.
Treat changed page content as a capture-time difference.

Help me compare these screenshots fairly.

You have tested lossy WebP with your own eyes. Next, you will turn these capture settings into a reusable configuration for several pages and widths.

Automate Screenshots with a Config

Your one-off PNG plus WebP captures revealed how image choices affect file size. You also inspected the lossy result at full size.

Manual commands become repetitive when you need several pages at several widths. A shot-scraper config written in YAML turns those choices into a reusable batch.

In this step, get ready to:

Create a reusable screenshot configuration.
Define target widths of 375, 768, plus 1440 pixels.
Run one batch from the configuration.

Create the reusable config

Each YAML list item describes one capture. Its output path controls where the finished image goes.

Return to the file browser from earlier.
Select the file browser's new-folder control.
Name the folder screenshots.

You'll see the empty screenshots folder beside page.png.

Create screenshots.yml beside page.png in a plain-text editor.
Add the screenshot template to screenshots.yml by copying the configuration below:

# Capture your first page at a mobile width
- output: screenshots/page-375.webp
  url: <your-page-url>
  format: webp
  width: 375

# Capture your second page at a tablet width
- output: screenshots/page-768.webp
  url: <your-page-url>
  format: webp
  width: 768

# Capture your third page at a desktop width
- output: screenshots/page-1440.webp
  url: <your-page-url>
  format: webp
  width: 1440

What Does This Config Control?

Each list item pairs one page URL with one viewport width.
The output value sends every generated file into the screenshots folder.
The format: webp setting selects WebP output. Leaving out quality keeps the WebP capture lossless.
The three widths cover mobile-sized, tablet-sized, plus desktop-sized browser windows.

Replace every <your-page-url> placeholder with a different page URL you own.
Save screenshots.yml.
Switch back to the file browser from earlier.
Confirm screenshots.yml appears beside page.png.

Does the Config Look Wrong?

Check that each item begins with a hyphen. Keep the four settings beneath that hyphen aligned with spaces.

Confirm that every placeholder now contains a page URL you own. Confirm that the screenshots folder sits beside the config file.

Help me check my screenshot configuration.

✔️ Awesome, I've got everything!

Your saved config now describes three WebP captures at three viewport widths.

ⓧ I'd like to double check the full code

Compare the structure of your screenshots.yml file with this template. Keep the three learner-owned URLs you entered.

# Capture your first page at a mobile width
- output: screenshots/page-375.webp
  url: <your-page-url>
  format: webp
  width: 375

# Capture your second page at a tablet width
- output: screenshots/page-768.webp
  url: <your-page-url>
  format: webp
  width: 768

# Capture your third page at a desktop width
- output: screenshots/page-1440.webp
  url: <your-page-url>
  format: webp
  width: 1440

Run the screenshot batch

The multi command reads every capture from one config file. One run now replaces the separate commands you used earlier.

Switch back to the terminal from earlier.
Predict how many WebP files the three config entries should produce.
Run the configured screenshot batch with this command:

shot-scraper multi screenshots.yml

What Does This Command Do?

The command loads the capture entries from screenshots.yml.
Each entry opens its configured page at its configured width.
Each .webp output path writes a lossless WebP image into the screenshots folder.

Confirm the terminal reports one completed screenshot for each config entry.

That is the repetitive work handled. Your three screenshot jobs now run from one reusable command.

Did the Batch Stop?

If the config cannot be found, confirm the terminal is in the folder containing screenshots.yml.

If an output cannot be written, confirm the screenshots folder exists. If a page cannot be captured, check the corresponding URL in the config.

Help me diagnose my screenshot batch.

Verify the generated WebP files

The output folder is the visible proof that the config ran from top to bottom. Each filename identifies the viewport width used for that capture.

Predict which three filenames should be waiting in the output folder.
Return to the file browser from earlier.
Open the screenshots folder beside page.png.

You'll see page-375.webp, page-768.webp, plus page-1440.webp in the folder.

You have turned three manual captures into a repeatable screenshot pipeline. The config now holds the pages, formats, plus viewport widths you can reuse.

Secret mission

Audit Your Screenshot Batch

Turn your generated screenshot folder into a responsive size audit. Rank the batch by file size. Inspect one page at every configured width before choosing the WebP version you would ship.

Clean Up Your Resources

Choose which files you want to preserve for another screenshot run. Everything in this project runs locally, so there are no ongoing costs.

Resources you used:

A reusable shot-scraper configuration file named screenshots.yml.
A screenshots/ folder containing WebP images for every configured page and width.
A one-off PNG capture named page.png.
A lossless WebP capture named page-lossless.webp.
A quality 75 WebP capture named page-quality-75.webp.

Keep everything running

No action is needed. Choose this option if you want to rerun the pipeline or compare the captures again.

Keep screenshots.yml for future screenshot runs.
Keep the screenshots/ folder so you can reuse the generated WebP images.
Keep page.png for future size comparisons.
Keep page-lossless.webp for future visual comparisons.
Keep page-quality-75.webp for future visual comparisons.

Pause - I'll come back to this later

Your screenshot commands have finished, so there is no project process to stop. Close the image previews while preserving every project file.

Return to the image viewer from earlier.
Close the preview for page-lossless.webp.
Close the preview for page-quality-75.webp.
Keep screenshots.yml ready for your next multi-page capture.
Keep the screenshots/ folder so your generated images remain available.

Delete - I don't want to use this again

Remove all project files to start fresh. Your local shot-scraper environment remains available for future projects.

Select your operating system below to delete every generated capture and the reusable configuration.

macOS

Return to the folder containing your captures in Finder.
Use Finder to delete page.png.
Use Finder to delete page-lossless.webp.
Use Finder to delete page-quality-75.webp.
Use Finder to delete screenshots.yml.
Use Finder to delete the screenshots/ folder.

You should no longer see the three individual captures, the configuration file, or the output folder in Finder. This confirms that the project files are removed.

Windows

Return to the folder containing your captures in File Explorer.
Use File Explorer to delete page.png.
Use File Explorer to delete page-lossless.webp.
Use File Explorer to delete page-quality-75.webp.
Use File Explorer to delete screenshots.yml.
Use File Explorer to delete the screenshots/ folder.

You should no longer see the three individual captures, the configuration file, or the output folder in File Explorer. This confirms that the project files are removed.

Linux

Return to the folder containing your captures in your file manager.
Use your file manager to delete page.png.
Use your file manager to delete page-lossless.webp.
Use your file manager to delete page-quality-75.webp.
Use your file manager to delete screenshots.yml.
Use your file manager to delete the screenshots/ folder.

You should no longer see the three individual captures, the configuration file, or the output folder in your file manager. This confirms that the project files are removed.

Nice Work!

You did it! You built a local screenshot pipeline with shot-scraper that captures pages as PNG or WebP files. Your comparisons now show which format fits your page.

You've learned how to:

Capture one page in three screenshot formats using page.png, page-lossless.webp, or page-quality-75.webp.
Evaluate compression trade-offs using file sizes plus full-size image quality.
Generate a reusable screenshot batch from screenshots.yml across three target widths.
Secret Mission: Complete an optional challenge that extends your screenshot pipeline.

Ready to quiz yourself?