ScreenshotNeo
Sign in Get a free key

BlogHow-to

How to Make Website Screenshots the Same Size Across a Report

Standardize screenshot framing, viewport and pixel scale, then size images consistently in your report. Here’s a repeatable Playwright workflow.

By the ScreenshotNeo team4 October 20268 min read

To make website screenshots the same size across a report, standardize both the captured image and how it is placed in the report. Set the same viewport width and height before loading every page, choose either viewport or full-page capture consistently, and explicitly select a screenshot scale. Then give each image the same display width in the report while preserving its aspect ratio.

These are two separate dimensions: the pixel dimensions of the screenshot file and the size at which that file appears in the report. Equal pixel dimensions do not automatically make images look equally sized if the report lays them out differently.

1. Choose consistent framing and output dimensions

Decide what each image needs to show before capturing the first page:

  • Viewport capture: captures the visible browser area. Use it when the report compares what a visitor sees at a particular screen size.
  • Full-page capture: captures the full scrollable page. Use it when readers need the complete page. Full-page images can have different heights because pages have different lengths, even when their viewport widths match.

Do not mix these modes in one comparison set without labeling the difference. A viewport image and a full-page image tell readers different things.

Pick one viewport, such as 1440 × 900 CSS pixels, and use it for every page. This is an example, not a universal report standard: choose dimensions that suit your report template. Set the viewport before navigation because responsive sites may lay out differently at different viewport sizes.

Also choose one pixel scale. Playwright’s css scale produces one image pixel per CSS pixel; device scale follows device pixels and may create larger files on high-DPI displays. The Page screenshot API documents device as its default, so set scale explicitly when predictable pixel dimensions matter. See the Playwright Page API.

2. Capture repeatable screenshots with Playwright

The following Node.js example uses a fixed viewport, CSS-pixel scale, and viewport-only capture. Install Playwright and its Chromium browser, save this as capture.mjs, and run it with Node.js. It takes one screenshot per URL and uses stable filenames.

import { chromium } from 'playwright';

const urls = [
  'https://example.com',
  'https://www.iana.org/domains/reserved',
];

const browser = await chromium.launch({ headless: true });
const context = await browser.newContext({
  viewport: { width: 1440, height: 900 },
  deviceScaleFactor: 1,
});

try {
  for (let i = 0; i < urls.length; i++) {
    const page = await context.newPage();
    await page.goto(urls[i], { waitUntil: 'networkidle', timeout: 60000 });
    await page.screenshot({
      path: `screenshot-${String(i + 1).padStart(2, '0')}.png`,
      fullPage: false,
      scale: 'css',
      animations: 'disabled',
    });
    await page.close();
  }
} finally {
  await browser.close();
}

Install the package and browser using the commands for your project:

npm install playwright
npx playwright install chromium
node capture.mjs

The browser context applies the same viewport to each page. deviceScaleFactor: 1 keeps the emulated device scale simple, and scale: 'css' explicitly requests CSS-pixel output. With this viewport-only example, each PNG should be 1440 × 900 pixels. Full-page output has the same width but a height determined by the document.

Capture the whole page instead

When the report requires every section of each page, change fullPage to true. Keep the viewport fixed because it still determines responsive layout and line wrapping:

await page.screenshot({
  path: `screenshot-${String(i + 1).padStart(2, '0')}.png`,
  fullPage: true,
  scale: 'css',
  animations: 'disabled',
});

Full-page screenshots from different sites will generally have different heights. If the report requires identical image boxes, place each image in a fixed-size frame and choose padding or cropping. Cropping can hide page content; use it only when the shared frame matters more than showing every section.

Stabilize changing page content

Pages may contain animations, rotating banners, timestamps, or other changing content. Playwright’s screenshot options can disable animations, and its style option can apply CSS during capture to hide elements that are irrelevant to the report. Use styling narrowly and record what you suppress so comparisons remain meaningful. The Page API documents screenshot styling and other screenshot options.

await page.screenshot({
  path: 'stable.png',
  fullPage: false,
  scale: 'css',
  animations: 'disabled',
  style: `
    .live-clock,
    .rotating-promotion {
      visibility: hidden !important;
    }
  `,
});

Replace the example selectors with elements that are genuinely unrelated to the report’s purpose. Hiding a banner that is part of the page being evaluated would make the capture misleading.

3. Put images into the report consistently

Once capture dimensions are predictable, standardize their displayed dimensions separately:

  1. Choose a common display width that fits the report’s text column or page layout.
  2. Preserve aspect ratio so the page does not look stretched.
  3. For different aspect ratios, choose between letterboxing (showing the entire image inside a common frame) and cropping (filling the frame while cutting off some edges).
  4. Use captions or labels when images differ in framing, such as viewport versus full-page captures.

If the report needs a uniform grid, fixed-size frames with a neutral background can keep the layout aligned while preserving each screenshot inside the frame. Avoid resizing each image to the same width and height independently; that distorts pages. The correct display size depends on the report’s page layout and requirements, so there is no single pixel dimension that fits every document.

4. Keep the capture environment consistent

Matching viewport and scale does not guarantee pixel-identical rendering. Operating system, browser version, browser settings, hardware, power source, and headless mode can all affect screenshots. Playwright recommends using the same environment as the screenshot baseline for visual comparisons; see its visual comparisons guidance.

  • Use the same browser engine and browser version for all captures in a report.
  • Run captures in the same operating system and headless or headed mode where possible.
  • Keep fonts and browser settings consistent.
  • For repeat reports, pin the automation environment and record the viewport, scale, browser version, and capture mode alongside the images.

This is especially important when readers may interpret small visual differences as changes to the site rather than differences in the capture setup.

5. Other ways to capture pages

For a one-off screenshot, a browser’s built-in capture or developer tools can be convenient, but manually repeating the same viewport and settings across many sites is error-prone. Browser automation is better suited to repeatable batches because the viewport and capture options can be specified in code.

If using a different automation library, apply the same principles: set viewport dimensions before navigation, choose one framing mode, and make output scale explicit. The particular option names differ by tool, so check that tool’s official documentation rather than assuming its defaults match Playwright’s.

6. Troubleshooting different-size screenshots

Symptom Likely cause Fix
Some viewport screenshots have different pixel dimensions Viewport or output scale differs, or screenshots were taken in full-page mode. Set viewport before navigation, explicitly choose scale: 'css', and use the same fullPage value.
Images are larger on one machine Device-pixel scale or device scale factor differs. Use CSS-pixel scale for consistent CSS-based output, or standardize device scale factor if device-pixel output is required.
Pages wrap or rearrange differently The viewport width differs, or responsive layout was evaluated before the viewport was applied. Create the browser context with the intended viewport before navigating to the URL.
Full-page screenshots have different heights The pages have different document lengths. This is expected. Keep full-page mode for complete content, then use consistent report frames with letterboxing or consciously crop.
Captures vary from run to run Dynamic content, animation, or environmental differences. Disable animations, apply narrowly scoped capture styles to irrelevant dynamic elements, and keep browser and operating environment consistent.
Navigation times out waiting for network idle The site keeps connections open or loads resources continuously. Use a suitable navigation condition such as domcontentloaded, then wait for a meaningful selector or a deliberate short delay before capture. A fixed wait alone does not ensure all content is ready.
Screenshot is blank or incomplete Capture occurred before the important content rendered, or the page failed to load. Wait for a page-specific selector that indicates readiness, check the page URL and console/network behavior, and retry only when the failure is transient.

7. Performance, reliability, and file size

Capturing pages serially, as in the example, is straightforward and limits simultaneous browser work. If a large report takes too long, modest parallelism can reduce elapsed time, but each extra browser page consumes memory and can increase load on target sites. Add concurrency gradually and respect the sites you capture.

CSS-pixel output avoids multiplying image dimensions just because the capture device has a high pixel ratio. Device-pixel captures preserve more pixel detail but can create larger images and files. PNG is lossless and often useful for reports with text and interface details; JPEG can reduce file size for photographic pages at the cost of compression artifacts. Check the needs of the report and its delivery limits.

For dependable reruns, log the URL, capture time, viewport, browser version, capture mode, and output path. Retry transient navigation failures with a limit and a delay; do not silently treat a failed or blank capture as a valid report image. Sites can change after capture, so retain the original files when a report needs an auditable record.

8. Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server from Yorker Media. A single request returns a PNG, JPEG, WebP, or PDF. Its API supports viewport and full-page capture, device presets or custom viewports, output formats, and other capture settings. See the ScreenshotNeo API documentation.

For consistent viewport shots, pass the same viewport and capture settings for every URL. This cURL example requests a WebP screenshot; add the documented viewport parameters for the dimensions you choose:

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://stripe.com \
  -o shot.webp

Python equivalent:

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)

Node.js equivalent:

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://stripe.com',
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await Bun.write('shot.webp', res);

ScreenshotNeo removes cookie and consent banners, newsletter popups, and chat widgets before capture; each cleanup step can be turned off. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and response headers indicate the page verdict and billing status. Its MCP server provides screenshot tools for AI agents. The Free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots. Sign up for free and get 1,000 screenshots a month with no card.

FAQ

Should I use viewport or full-page screenshots for a report?

Use viewport captures for a consistent visible area and full-page captures when the complete document matters. Keep the choice consistent within a comparison set or label exceptions.

Will a fixed viewport make every screenshot the same pixel size?

For viewport captures, a fixed viewport plus an explicit CSS-pixel scale gives predictable pixel dimensions. Full-page height varies with document length.

Can I make full-page screenshots identical in height without cutting anything off?

Not when the pages have different lengths. Preserve all content and use padding or letterboxing in the report, or crop if a common frame is more important than completeness.

Keep reading

7 min read

Full-Page Capture Chrome Plugin

Capture an entire webpage in Chrome with extensions, understand their limits, and automate clean full-page screenshots with ScreenshotNeo.

7 min read

Facebook Open Graph Debugger

Use Facebook’s Open Graph debugger to refresh stale link previews, verify metadata, and fix incorrect titles, descriptions, and images.