Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

To scale a website into a downloadable screenshot, first set the browser viewport to the layout you want, then choose whether the output should use CSS-pixel dimensions or a higher device-pixel density. In Chrome, open DevTools, enable Device Mode, enter the viewport width and height, and choose Capture a full size screenshot. This captures the entire document, including content below the fold, as an image file. Use Capture screenshot for only the visible viewport or Capture area screenshot for a hand-selected region.

What “scale” means when you capture a website

Website screenshot scaling has two separate controls. Confusing them is the main reason an image looks wrong.

Layout scale: the responsive viewport

The viewport width and height are the logical CSS dimensions supplied to the page. A width of 375 CSS pixels can trigger a mobile breakpoint; 1440 CSS pixels may produce a desktop navigation bar and multi-column layout. Changing this value changes how the website renders, not merely the size of an already-rendered picture.

Pixel density: screenshot scale or DPR

Device pixel ratio (DPR) describes the relationship between physical screen pixels and logical CSS pixels. A screenshot captured at device scale can contain more physical pixels than one captured at CSS scale while preserving the same responsive layout. A larger file therefore does not prove that the layout is better or that the viewport was correct.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
#1 Best Overall
Sale
Epson Workforce ES-50 Compact & Lightweight Mobile Document Scanner
  • PORTABLE SCANNER FOR USE ON-THE-GO — The fastest and lightest mobile single-sheet-fed compact document scanner in its class¹
  • QUICK DOCUMENT SCANNING ― This Epson ultra-fast scanner scans a single page as quickly as 5.5 seconds²; Windows and Mac compatible
  • VERSATILE PAPER HANDLING ― Portable scanner scans documents up to 8.5 x 72 in; Also easily digitizes receipts and ID cards to make accounting, bookkeeping, and organizing simpler
  • INTUITIVE, HIGH-SPEED SOFTWARE — Epson ScanSmart Software³ is a smart tool allowing you to easily scan, review, and save; Stay organized easily with the help of this Epson scanner
  • EASY SETUP — USB-powered connect to your computer for quick and simple scanning; No batteries or external power supply required to operate portable document scanner; Standard Connectivity: USB 2.0

Capture scope

  • Viewport: the currently visible browser area.
  • Full page: the complete scrollable document, including content below the fold.
  • Area or element: a selected rectangle or a specific DOM element such as a card, chart, or header.

Manual full-page capture in Chrome

  1. Open the URL in Google Chrome and wait for the page to finish rendering.
  2. Open DevTools with F12, Ctrl+Shift+I on Windows/Linux, or Cmd+Option+I on macOS.
  3. Turn on Device Mode by selecting the phone/tablet icon, or press Ctrl+Shift+M (Windows/Linux) or Cmd+Shift+M (macOS).
  4. Enter the desired viewport width and height in the Device Mode controls. Use the width that should determine the page’s responsive breakpoints.
  5. If needed, select a device preset or set a DPR in Device Mode. Keep the viewport and DPR decisions separate: viewport controls layout; DPR controls pixel density.
  6. Open the Device Mode More options menu (the three-dot menu in the device toolbar).
  7. Select Capture a full size screenshot. Chrome downloads an image containing the full document, not just the visible area.

For a normal viewport image, choose Capture screenshot instead. For a freehand crop, open the DevTools Command Menu, type screenshot, and choose Capture area screenshot; drag over the region to download.

Choose the right dimensions and output

Responsive layouts

Decide the intended audience first. For a mobile reference, set a narrow CSS viewport such as the dimensions of the target device preset. For a desktop design review, enter the desktop width you need. Check the page at the chosen width before capturing: menus, grids, typography and images may change at breakpoints.

High-resolution output

Use a higher DPR or device-pixel scale when the image will be inspected on a high-density display or placed in a document that needs extra pixels. Use CSS-pixel scale when you need output dimensions to correspond directly to the CSS viewport. A high-density capture can increase memory use and file size, especially for long pages.

Full page, area or element

  • Use full page for documentation, archival copies and long landing pages.
  • Use viewport capture for above-the-fold QA or a hero-section review.
  • Use area capture for a temporary crop with no selector setup.
  • Use element capture in automation when the same component must be exported repeatedly.

Repeatable screenshots with Playwright

Playwright can capture the viewport, a specific element or the full scrollable page and save it to a filename. The example below fixes the layout viewport, waits for the page, and writes a WebP image.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
Rank #2
Sale
Brother DS-640 Compact Mobile Document Scanner, (Model: DS640)
  • FAST SPEEDS - Scans color and black and white documents a blazing speed up to 16ppm (1). Color scanning won’t slow you down as the color scan speed is the same as the black and white scan speed.
  • ULTRA COMPACT – At less than 1 foot in length and only about 1. 5lbs in weight you can fit this device virtually anywhere (a bag, a purse, even a pocket).
  • READY WHENEVER YOU ARE – The DS-640 mobile scanner is powered via an included micro USB 3. 0 cable allowing you to use it even where there is no outlet available. Plug it into you PC or laptop and you are ready to scan.
  • WORKS YOUR WAY – Use the Brother free iPrint&Scan desktop app for scanning to multiple “Scan-to” destinations like PC, Network, cloud services, Email and OCR. (2) Supports Windows, Mac and Linux and TWAIN/WIA for PC/ICA for Mac/SANE drivers. (3)
  • OPTIMIZE IMAGES AND TEXT – Automatic color detection/adjustment, image rotation (PC only), bleed through prevention/background removal, text enhancement, color drop to enhance scans. Software suite includes document management and OCR software. (4)
import { chromium } from 'playwright';

const browser = await chromium.launch();
const page = await browser.newPage({
  viewport: { width: 1440, height: 900 },
  deviceScaleFactor: 2
});
await page.goto('https://example.com', { waitUntil: 'networkidle' });
await page.screenshot({
  path: 'example-full.webp',
  fullPage: true,
  type: 'webp'
});
await browser.close();

Install Playwright with npm install playwright; its browser installation command is typically npx playwright install. Set fullPage: false (the default) for the viewport only. To capture one element, locate it and call locator.screenshot({ path: 'card.png' }). Playwright’s scale option distinguishes css output, which follows CSS-pixel sizing, from device output, which follows device-pixel sizing. Use the option that matches your downstream requirement.

Playwright format choices

  • PNG: lossless and suitable for text, diagrams and UI details.
  • JPEG: smaller files for photographic content; choose a quality value when supported.
  • WebP: compact modern format when your workflow accepts it.

Repeatable screenshots with Puppeteer

Puppeteer is a JavaScript browser-automation library with screenshot generation. Its screenshot options include a file path, image type, full-page capture, clipping, transparent backgrounds and quality. Quality ranges from 0 to 100 and does not apply to PNG.

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setViewport({ width: 1440, height: 900, deviceScaleFactor: 2 });
  await page.goto('https://example.com', { waitUntil: 'networkidle2' });
  await page.screenshot({
    path: 'example-full.png',
    fullPage: true,
    type: 'png'
  });
  await browser.close();
})();

Use a clip rectangle for a fixed region, or set omitBackground: true when you need transparency and the page supports it. Do not add a JPEG quality setting to a PNG capture; it has no effect.

Element-focused captures

When a chart, card or header is the deliverable, targeting the element avoids stitching an unnecessarily long page. In Playwright, wait for the selector and capture its locator:

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
Rank #3
Sale
Canon imageFORMULA R10 - Portable Document Scanner, USB Powered, Duplex Scanning, Document Feeder, Easy Setup, Convenient, Perfect for Mobile Users, White
  • STAY ORGANIZED – Easily convert your paper documents into digital formats like searchable PDF files, JPEGs, and more.Power Consumption : 2.5W or less (Energy Saving Mode: 0.7W). Suggested Daily Volume : 500 scans..Does it contain liquid: no
  • CONVENIENT AND PORTABLE –lightweight and small in size, you can take the scanner anywhere from home offices, classrooms, remote offices, and anywhere in between
  • HANDLES VARIOUS MEDIA TYPES – Digitize receipts, business cards, plastic or embossed cards, reports, legal documents, and more
  • FAST AND EFFICIENT – No technical hurdles or complicated setups here; easily scan both sides of a document at the same time, in color or black-and-white, at up to 12 pages-per-minute, and with a 20 sheet automatic feeder
  • BROAD COMPATIBILITY – Works with both Windows and Mac devices, be it laptop or computer
await page.locator('[data-testid="sales-chart"]').screenshot({
  path: 'sales-chart.png',
  type: 'png'
});

Stable selectors such as a data attribute are less fragile than a deeply nested CSS path. If the element is below the fold, scrolling it into view before capture helps ensure lazy content has loaded.

Wait for content before taking the image

Dynamic pages can show an incomplete screenshot if capture starts too early. In automation, combine a navigation condition with an explicit readiness check:

await page.goto('https://example.com/dashboard', { waitUntil: 'domcontentloaded' });
await page.waitForSelector('[data-ready="true"]');
await page.screenshot({ path: 'dashboard.png', fullPage: true });

If no readiness selector exists, use a deliberate short delay as a fallback, but prefer a page-specific signal. For lazy-loaded images, a full-page capture or scripted scrolling can trigger loading before the final image is written.

Common problems and fixes

The image contains only the visible screen

You used viewport capture. In Chrome select Capture a full size screenshot; in Playwright or Puppeteer set fullPage: true.

What’s actually slowing this PC down?

Pick the symptom - the matching free tool is one click away.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
Rank #4
IRIScan Express 4 Black Compact Portable USB Simplex Document Scanner, 8 PPM for Contracts, Invoices and Business Cards, Compatible with Windows, Readiris PDF Included
  • IRIScan Express, portable scanner : scans color and black and white documents a blazing speed up to 8ppm simplex. Color scanning won’t slow you down as the color scan speed is the same as the black and white scan speed.
  • IRIScan Express mobile scanner is powered via an included micro USB 2. 0 cable allowing you to use it even where there is no outlet available. Plug it into you PC or laptop and you are ready to scan. USB cable provided. AC Adapter not provided and not needed.
  • IRIScan flatbed scanner uses a simplex scanning mode allows for quick and straightforward scanning of single-sided documents. IRIScan with its full portable features is the ideal document scanners for computers.
  • IRIScan document scanner : Versatile scanning capabilities, including scanning to Word, PDF, and Excel formats with companion software provided Readiris OCR
  • Receipt scanner and card scanner with Additional features include scanning business cards directly to Outlook, photo scanning, and receipt scanning for efficient document management

The mobile layout does not appear

The viewport is still wide. Set the Device Mode width or automation viewport to the intended CSS width before loading the page. DPR alone will not activate responsive breakpoints.

The screenshot is blurry

Increase DPR or use Playwright’s device scale, then check the resulting pixel dimensions. This increases memory and file size; it does not repair a page rendered at the wrong viewport.

Images or fonts are missing

Wait for the relevant selector, use a suitable navigation wait condition, and verify that the resources are accessible to the browser. A network failure, authentication requirement or blocked third-party host can leave placeholders.

Sticky headers repeat down a full-page image

Full-page stitching may include fixed-position elements in every segment. Hide the sticky selector before capture with a temporary style or capture the content element rather than the entire document.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

The page is extremely tall or crashes

Reduce DPR, capture logical sections, or target the main content element. Very large dimensions require more browser memory and produce large files; sectioned captures are often more reliable for processing.

Best Value
Canon Canoscan Lide 300 Scanner (PDF, AUTOSCAN, Copy, Send)
  • Scanner type: Document
  • Connectivity technology: USB
  • With Auto Scan Mode, the scanner automatically detects what you're scanning
  • Digitize documents and images

Fonts or animations differ between runs

Wait for fonts and disable or pause animations with injected CSS. Use a consistent browser version, viewport, timezone and user-agent when visual comparisons must be repeatable.

Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Performance, reliability and file choices

  • Use viewport captures for quick checks and full-page captures only when below-the-fold content is required.
  • Keep the viewport fixed across runs; changing it changes line wraps and responsive components.
  • Choose PNG for crisp interfaces, JPEG for photographic pages, and WebP when compact delivery is more important than universal legacy support.
  • Capture at CSS scale unless a consumer explicitly needs extra physical pixels.
  • For batches, reuse one browser process and create isolated pages rather than launching a new browser for every URL.
  • Record the URL, viewport, DPR or scale, browser version and capture time alongside the file so later differences are explainable.

Or skip the browser setup

ScreenshotNeo provides a website screenshot API and MCP server. One GET request returns PNG, JPEG, WebP or PDF output. It can load lazy images, capture full pages or a CSS-selected element, set viewport and device presets, apply dark mode and retina scale, run custom CSS or JavaScript, click before capture, hide selectors, wait for a selector, delay or network idle, and set headers, cookies, user agent, timezone, geolocation and authorization. It also supports blocking ads, trackers, requests or resource types, transparent backgrounds, resizing, chosen cache TTLs, signed links, asynchronous jobs with signed webhooks, bulk capture of up to 100 URLs per call, a usage API and an OpenAPI specification.

Before the capture, ScreenshotNeo accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups and chat widgets; each cleanup step can be disabled. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads and cache hits are not billed, and response headers identify the page verdict and whether it was billed.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

See the complete parameter reference in the ScreenshotNeo documentation. The same parameter names used by many screenshot APIs are accepted, which can simplify migration.

cURL

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

Python

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

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(`HTTP ${res.status}`);
const fs = await import('node:fs/promises');
await fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer()));

ScreenshotNeo’s Free plan includes 1,000 shots per month without a card. Paid plans start at $5 for 3,000 shots; every feature is available on every plan. Create a free ScreenshotNeo account to get started.

Which workflow should you use?

Need Best approach Reason
One quick image Chrome Device Mode No project setup; direct visual control.
Repeatable local captures Playwright or Puppeteer Viewport, waits, selectors and file names can be scripted.
API, bulk or agent-driven capture ScreenshotNeo Clean shots, only clean shots billed, and the lowest paid plan.

Frequently Asked Questions

Does changing DPR change a website’s responsive breakpoint?

No. Responsive breakpoints use the CSS viewport width. DPR changes the number of physical pixels used to render that CSS layout.

Can a screenshot include content that requires scrolling?

Yes. Use Chrome’s full-size command or a full-page option in automation; a viewport capture includes only the visible region.

Free tools Windows power users keep installed

One-click scans. No signup required.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

When should I capture an element instead of the whole page?

Capture an element when the deliverable is a component such as a chart or card, or when a very tall page would waste memory and processing time.

Quick Recap

SaleBestseller No. 3
Canon imageFORMULA R10 - Portable Document Scanner, USB Powered, Duplex Scanning, Document Feeder, Easy Setup, Convenient, Perfect for Mobile Users, White
Canon imageFORMULA R10 - Portable Document Scanner, USB Powered, Duplex Scanning, Document Feeder, Easy Setup, Convenient, Perfect for Mobile Users, White
BROAD COMPATIBILITY – Works with both Windows and Mac devices, be it laptop or computer; This product is not intended for scanning photographs on photo paper / photographic media
$153.00
Bestseller No. 4
IRIScan Express 4 Black Compact Portable USB Simplex Document Scanner, 8 PPM for Contracts, Invoices and Business Cards, Compatible with Windows, Readiris PDF Included
IRIScan Express 4 Black Compact Portable USB Simplex Document Scanner, 8 PPM for Contracts, Invoices and Business Cards, Compatible with Windows, Readiris PDF Included
Find our Software here : irislink.com/start; IRIScan Express is only compatible Windows platform and not macintosh
$129.00
Bestseller No. 5
Canon Canoscan Lide 300 Scanner (PDF, AUTOSCAN, Copy, Send)
Canon Canoscan Lide 300 Scanner (PDF, AUTOSCAN, Copy, Send)
Scanner type: Document; Connectivity technology: USB; With Auto Scan Mode, the scanner automatically detects what you're scanning
$75.00

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.