There is no single correct size for a website screenshot: set its CSS viewport to match the screen or layout you need to show. Good starting points are 1366 × 768 for a laptop view, 1920 × 1080 for a large desktop view, 375 × 812 for a phone, and 768 pixels wide for a tablet. Use a viewport capture to show what fits on screen; use a full-page capture to document everything below the fold.
Choose a screenshot size for its purpose
A website screenshot has two separate sizing decisions: the browser viewport used to render the page, and the dimensions of the image you ultimately publish or share. Start by deciding what the picture must communicate. A first-screen design review, a mobile layout check, and a record of an entire long page call for different captures.
- Show the initial screen: capture the visible viewport at a representative desktop or mobile size. This is useful for a landing-page preview or a focused layout review.
- Check responsive behavior: capture the page at the widths your users are likely to encounter, including the widths where your own layout changes.
- Document a whole page: use full-page capture when readers need content below the fold, such as for documentation or a complete review.
These are practical starting points, not web standards. A screenshot at one width cannot establish that a responsive site works at every width. The web.dev guidance is that people are used to scrolling vertically, not horizontally; a page that forces sideways scrolling on a phone is usually a layout problem to investigate.
Practical desktop, tablet, and mobile dimensions
Use CSS pixels to describe the viewport. Chrome DevTools lists width presets from 320 pixels for Mobile S through 2560 pixels for 4K, and OpenGraph.io documents ready-made screenshot dimensions. Together, these provide useful reference points:
Recommended Free Tools
#1 Best Overall
- CRISP CLARITY: This 23.8″ Philips V line monitor delivers crisp Full HD 1920x1080 visuals. Enjoy movies, shows and videos with remarkable detail
- INCREDIBLE CONTRAST: The VA panel produces brighter whites and deeper blacks. You get true-to-life images and more gradients with 16.7 million colors
- THE PERFECT VIEW: The 178/178 degree extra wide viewing angle prevents the shifting of colors when viewed from an offset angle, so you always get consistent colors
- WORK SEAMLESSLY: This sleek monitor is virtually bezel-free on three sides, so the screen looks even bigger for the viewer. This minimalistic design also allows for seamless multi-monitor setups that enhance your workflow and boost productivity
- A BETTER READING EXPERIENCE: For busy office workers, EasyRead mode provides a more paper-like experience for when viewing lengthy documents
| Use | Starting viewport | When to choose it |
|---|---|---|
| Small phone | 320px wide | Check a narrow mobile layout or small-screen breakpoint. |
| Typical phone | 375 × 812px | A practical phone capture preset. |
| Larger phone | 425px wide | Check a wider mobile layout. |
| Tablet | 768px wide; OpenGraph.io also lists 1024 × 768px | Include this when the design rearranges between phone and desktop. |
| Laptop | 1366 × 768px | A general desktop browser view and OpenGraph.io’s documented default preset. |
| Wider laptop | 1440px wide | A Chrome DevTools Laptop L width for testing a wider layout. |
| Large desktop | 1920 × 1080px | A large-monitor screenshot where the additional width matters. |
| Very wide desktop | 2560px wide | A Chrome DevTools 4K width preset; useful when this screen class is relevant. |
The named Chrome DevTools width presets are Mobile S 320px, Mobile M 375px, Mobile L 425px, Tablet 768px, Laptop 1024px, Laptop L 1440px, and 4K 2560px. OpenGraph.io’s documented presets are 375 × 812px, 1024 × 768px, 1366 × 768px, and 1920 × 1080px. Presets are convenient test cases, not a list of mandatory device standards. A site’s content, breakpoints, and audience should determine which ones you actually need.
Viewport capture or full-page screenshot?
Use a viewport capture for what appears without scrolling
A viewport screenshot records the browser’s visible area at a chosen CSS width and height. It is the right choice for responsive QA of the first screen, a focused comparison of a header or hero section, or a preview that should resemble an ordinary browser window. Its height matters as well as its width: a 1366 × 768 capture shows a different amount of page content than a 1366 × 900 capture.
Rank #2
- CRISP CLARITY: This 22 inch class (21.5″ viewable) Philips V line monitor delivers crisp Full HD 1920x1080 visuals. Enjoy movies, shows and videos with remarkable detail
- 100HZ FAST REFRESH RATE: 100Hz brings your favorite movies and video games to life. Stream, binge, and play effortlessly
- SMOOTH ACTION WITH ADAPTIVE-SYNC: Adaptive-Sync technology ensures fluid action sequences and rapid response time. Every frame will be rendered smoothly with crystal clarity and without stutter
- INCREDIBLE CONTRAST: The VA panel produces brighter whites and deeper blacks. You get true-to-life images and more gradients with 16.7 million colors
- THE PERFECT VIEW: The 178/178 degree extra wide viewing angle prevents the shifting of colors when viewed from an offset angle, so you always get consistent colors
Use full-page capture to show the complete document
A full-page screenshot captures or stitches the entire scrollable page, rather than only the currently visible portion. Choose it for a complete reference, long-page documentation, or a review where content below the fold is part of the deliverable. It is not a substitute for viewport captures when you need to show how a page looks on a particular screen: a very tall image does not communicate the ordinary viewing experience as clearly, and may be cumbersome to inspect or publish.
How to set a website screenshot size in Chrome DevTools
For a browser-based capture, use Chrome DevTools device emulation to set a CSS viewport rather than relying on the physical resolution of your monitor. The labels below describe the Device Mode workflow; Chrome’s documented presets and custom dimensions let you choose a representative size.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Rank #3
- Clear visuals. Fluid motion: A 144Hz refresh rate and 1ms MPRT deliver smooth, tear‑free motion across work, gaming, and streaming for clearer, more fluid viewing.
- Eye comfort: TÜV Rheinland 3‑star* certification reduces harmful blue light while preserving stunning color quality without compromise. *TÜV Rheinland 3-star eye comfort certification.
- Wide viewing angle: Get consistent views across a wide 178° /178° viewing angle.
- In-Plane Switching (IPS): See excellent color accuracy and consistency across wide viewing angles with In-plane Switching (IPS) technology.
- Ultra-thin bezels: Maximize your viewing experience with thin bezels.
- Open the page in Chrome and open DevTools. Select the device toolbar icon, or use the DevTools device toolbar toggle, to enter Device Mode.
- Choose a device preset for a quick starting point, or select the responsive/custom option and enter the viewport width and height you want to inspect, such as 1366 by 768 for a desktop view or 375 by 812 for a phone-sized view.
- Set the device pixel ratio (DPR) if you need to emulate a higher-density display. Keep the CSS viewport dimensions unchanged when the question is whether the layout fits at a particular CSS width.
- Inspect the layout and scroll behavior. If the design has mobile and desktop arrangements, capture each relevant context and label the screenshot with its viewport dimensions.
- For a full-page record, use a full-page capture method rather than assuming a viewport screenshot includes content below the fold. Chrome DevTools documents full-page capture as a separate capability.
Device emulation is useful for repeatable visual checks, but it is still an emulated viewport. It does not make a single screenshot representative of all devices or all widths. For responsive work, check widths around the places where navigation, columns, or other major components change, not just the named presets.
CSS viewport size is not the same as image pixel size
CSS pixels describe the layout viewport. Device pixel ratio describes how many physical image pixels correspond to a CSS pixel on a display or in an emulated capture. A high-DPR output may therefore be two or three times the CSS dimensions in physical pixels while preserving the same layout width. For example, a 375-CSS-pixel-wide mobile layout can be represented by an image that is 750 physical pixels wide at 2×; the page has not become a 750-CSS-pixel desktop layout.
Rank #4
- CURVED FOR ENHANCED ENGAGEMENT: An immersive viewing experience with a curved monitor that wraps more closely around your field of vision; It creates a wider view, enhancing depth perception and minimizing peripheral distraction
- SMOOTH PERFORMANCE FOR SEAMLESS CONTENT: Stay in the action when playing games, watching videos, or working on creative projects; The 100Hz refresh rate reduces lag and motion blur so you don't miss a thing in fast-paced moments¹
- MORE GAMING POWER: Gain the edge with optimizable game settings; Color and image contrast can be adjusted to see scenes more vividly and spot enemies hiding in the dark; Game Mode adjusts any game to fill the screen so you can view every detail²
- KEEP IT EASY ON THE EYES: Care for your eyes and stay comfortable, even during long sessions; Advanced eye comfort technology certified by TÜV reduces eye strain by minimizing blue light and reducing irritating screen flicker²
- INCREASED VERSATILITY: Connect to more; Plug devices straight into your monitor for increased flexibility, making your computing environment even more convenient
When comparing responsive behavior, keep the CSS viewport fixed and vary DPR only when image sharpness or high-density rendering is part of the test. When producing an asset, decide both the intended display width and whether a higher-resolution source is needed. Do not select a screenshot width solely because that is the physical pixel width of your monitor.
Size screenshots for articles and documentation
The capture can be wider than the space where it will appear. For publication, make the displayed image fit the content column so it does not overflow the page or force readers to zoom out. Google’s developer style guide uses an 856px main-body column as an example and gives 1712px as the maximum source width for a 2× image in that context. Those are contextual examples, not universal column or export requirements.
Free tools Windows power users keep installed
One-click scans. No signup required.
Best Value
- 【INTEGRATED SPEAKERS】Whether you're at work or in the midst of an intense gaming session, our built-in speakers provide rich and seamless audio, all while keeping your desk clutter-free.
- 【EASY ON THE EYES】 Protect your eyes and enhance your comfort with Blue-Light Shift technology. This feature reduces harmful blue light emissions from your screen, helping to alleviate eye strain during long hours of use and promoting healthier viewing habits.
- 【WIDEN YOUR PERSPECTIVE】Our sleek minimal bezel design ensures undivided attention. The nearly bezel-free display seamlessly connects in a dual monitor arrangement, delivering an unobstructed view that lets you focus on more at once, completely distraction-free.
Keep enough source resolution for labels and small interface text to remain legible, then render the image at the column width. A 1920px-wide screenshot displayed at 1920px inside a narrower article column wastes space and can break the layout; a 2× source can be helpful when the displayed version is smaller and fine text needs to stay crisp.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Do not confuse browser captures with website image specifications
A browser screenshot records a rendered page at a viewport or across the full page. A hero image, banner, blog image, or background is a designed content asset with its own crop and aspect-ratio needs. Shopify’s 2026 guide suggests 1280 × 720px desktop and 360 × 200px mobile hero images, 1200 × 800px blog images, 1200 × 400px banners, and 2560 × 1400px desktop background images. These are Shopify content-image suggestions, not required dimensions for capturing a website in a browser.
Web-app-manifest screenshots also have a separate specification. The web.dev manifest guidance says each dimension must be at least 320px and no more than 3840px, and the larger dimension cannot exceed 2.3 times the smaller. Wide and narrow form factors can identify screenshots intended to show desktop and mobile layouts. Apply those limits when preparing manifest screenshots, not as a general rule for every website screenshot.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server. You can choose the target viewport with request parameters, then have a GET request return an image or PDF. The one-call cURL example below saves a WebP screenshot; see the ScreenshotNeo API documentation for the available parameters and output options.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo can accept cookie or consent banners before capture and remove more than 60 known consent platforms, newsletter popups, and chat widgets; each of those steps can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the page verdict and billing status in headers. Its MCP server provides take_screenshot, get_page_info, and capture_pdf for AI agents and MCP clients. The Free plan includes 1,000 screenshots per month without a card; paid plans start at $5 for 3,000 screenshots. Sign up for ScreenshotNeo’s free plan to get 1,000 screenshots a month with no card.
A quick checklist before you capture
- Choose a CSS viewport that represents the audience or layout under review; do not assume one desktop size is enough.
- Record the width and height, and note whether the capture is a viewport or full-page image.
- Include tablet or intermediate widths when the layout changes between phone and desktop.
- Keep DPR separate from CSS viewport width when diagnosing layout behavior.
- For published documentation, size the displayed image to its content column and use a higher-resolution source only when it improves legibility.
- Check that you are following a platform-specific specification only when the output is for that platform, such as a web-app manifest.
Frequently Asked Questions
Will changing the screenshot viewport change the actual size of my website for visitors?
No. The selected viewport controls the rendering context for that capture or emulation; it does not by itself change the website’s CSS or deployed behavior.
Should I capture every listed preset?
Not necessarily. Choose widths that represent your audience and the points where your responsive layout changes. The named presets are starting points, not a complete test matrix.
Quick Recap
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.
