Viewport Screenshot
What a viewport screenshot is, how it differs from full-page capture, and when it's the right choice.
A viewport screenshot captures only the part of a web page visible in the browser window, the viewport, at its current size and scroll position. Content above or below the visible area is not included. The image size equals the viewport size multiplied by the device scale factor, for example 1920×1080 at 1x or 3840×2160 at 2x.
In web development, the viewport is the area where the page renders, measured in CSS pixels. It excludes browser chrome such as the tab strip and address bar. A viewport screenshot therefore shows the page as a visitor first sees it, without the browser interface around it.
Viewport screenshot vs full-page screenshot
A viewport screenshot shows one screen of content, the same as a visitor sees on arrival. A full-page screenshot renders the entire document from top to bottom in one image. Viewport captures are smaller, faster and easier to compare. Full-page captures show everything but can be very tall and can break layouts built around the viewport height.
Where viewport screenshots are used
- Checking the first screen of a landing page.
- Thumbnails and link previews.
- Visual regression tests focused on the header and hero area.
- Responsive checks at fixed device sizes.
Viewport sizes and responsive capture
The viewport width decides which responsive layout the page shows. A 390 pixel wide viewport triggers a phone layout, while 1920 shows a desktop layout. Temposhot Website Capture offers Desktop 1920×1080, Tablet 768×1024 and Mobile 390×844, with Area set to Viewport or Full page per URL.
Common mistakes with viewport screenshots
- Capturing before the page finishes loading or animating.
- Leaving a cookie banner covering the viewport.
- Expecting content below the fold to appear.
- Comparing captures taken at different scale factors.
Taking the same screenshots again and again?
Add the URLs to Website Capture, set Viewport and a device, and start one run with up to 10 Concurrent browsers. See capture options.
Common questions
What does "above the fold" mean?
The content visible without scrolling, which is what a viewport screenshot shows.
Does a viewport screenshot include the address bar?
No. It contains only the rendered page.
Sources
Related resources
- Website Capture quick start: first URL list run.
- Website Capture options: device, area and wait settings.
- Screenshot resolution checker: verify image size.
Taking the same screenshots again and again?
Temposhot captures a screen, window or area on a timer and exports the set as a PDF, images, ZIP or MP4. The free browser tools fix single images.
Related resources
Related terms
- Full-Page ScreenshotWhat a full-page screenshot is, how it differs from viewport and scrolling captures, and when to use one.
- Responsive ScreenshotWhat responsive screenshots are, the common viewport sizes used, and mistakes to avoid when capturing across devices.
- Scrolling ScreenshotWhat a scrolling screenshot is, how it differs from a full-page screenshot, and when to use one.
- Headless BrowserWhat a headless browser is, how it's used for automated screenshots, and common pitfalls.
- Screen CaptureWhat screen capture means, the different capture methods, and how to choose the right one.