How to Capture Website Thumbnails at Desktop Size for a Portfolio

To capture a website thumbnail at desktop size, set a desktop browser viewport to the dimensions you want the thumbnail to represent, then capture the visible viewport. Use a full-page screenshot only when your portfolio format calls for a tall image of the entire page. For repeatable captures across many projects, use Playwright; for a one-off capture, Chrome DevTools is enough.

There is no universal thumbnail size: follow the portfolio’s image specifications if it provides them. Otherwise, choose a deliberate desktop width and height, use the same dimensions for every project, and check the saved image before uploading.

1. Choose the screenshot scope and dimensions

“Desktop size” describes the browser viewport used to render the page. It does not determine a universal output size. Set the viewport to match the desktop presentation you want visitors to see, then choose the capture scope:

Capture	Use it for	What the image contains
Viewport	A standard portfolio tile or project preview	The visible browser page area at the current scroll position
Full page	A case study or submission that requests the whole site	The full scrollable page, including content below the viewport
Element	A specific hero, component, or section	The selected page element only

For a conventional preview thumbnail, start at the top of the page and capture the viewport. If the portfolio gives required dimensions, use those. If it does not, select a desktop viewport that fits the intended card and keep it consistent across projects. A full-page capture can be extremely tall, so it is usually a poor substitute for a thumbnail tile.

2. Capture a thumbnail with Chrome DevTools

1. Open the portfolio project website in Chrome.
2. Open DevTools, then enable Device Mode.
3. In the device toolbar, choose Desktop if Chrome is emulating a mobile device. Set the viewport width and height to the desktop presentation you intend to show.
4. Return the page to the scroll position you want represented, usually the top, and wait for the important content to appear.
5. Open the Device Mode options menu. Choose Capture screenshot for the visible viewport or Capture full size screenshot for the full page.
6. Open the downloaded image and check its framing, dimensions, and content before uploading it.

Chrome’s Device Mode lets you select desktop rendering and capture either the visible viewport or the full page. These choices affect what is included in the image; neither one adds the browser’s tabs or address bar to the capture. See the Chrome DevTools Device Mode documentation.

3. Automate consistent captures with Playwright

Playwright is useful when you need to capture several portfolio projects with the same viewport and settings. Install it in a Node.js project, save the script below as capture.mjs, and run it with node capture.mjs.

import { chromium } from 'playwright';

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

try {
  await page.goto('https://example.com', {
    waitUntil: 'networkidle',
    timeout: 60000,
  });
  await page.screenshot({ path: 'portfolio-thumbnail.png' });
} finally {
  await browser.close();
}

Replace https://example.com with the project URL. The example captures the viewport at 1440 by 900 CSS pixels. Those dimensions are an example, not a required portfolio standard; use your submission specifications when available. The finally block closes the browser even if navigation or capture fails.

Capture the whole page or one element

For a full-page image, use fullPage: true:

await page.screenshot({
  path: 'portfolio-full-page.png',
  fullPage: true,
});

For one section, target a locator. This example captures the page’s header; replace the selector with one that matches the element you need:

await page.locator('header').screenshot({
  path: 'portfolio-header.png',
});

Choose image format and scale

Playwright supports PNG, JPEG, and WebP screenshots. Use a matching filename extension to select the format. PNG is a lossless default that suits interface details and text. JPEG can be useful when smaller lossy images are acceptable. WebP is another supported option. Use scale: 'css' for output sized in CSS pixels, or scale: 'device' to account for the device pixel ratio. For consistent portfolio files, set the viewport and device scale factor deliberately and use the same settings for every capture.

await page.screenshot({
  path: 'portfolio-thumbnail.webp',
  type: 'webp',
  scale: 'css',
});

Consult the Playwright screenshot guide and Playwright screenshot reference for supported screenshot options.

4. Check the result before uploading

• Framing: Confirm the screenshot shows the intended starting view and does not include an accidental scroll position.
• Desktop rendering: Check that the page used the chosen desktop viewport instead of a mobile emulation.
• Content readiness: Verify that key images, fonts, and page content finished rendering. Some pages continue loading or animating after the initial navigation.
• Scope: Make sure a standard thumbnail is not a very tall full-page capture, unless that format was requested.
• Consistency: Use the same viewport, scale, format, and capture scope for all project images in a set.
• Portfolio requirements: Check the destination’s requested file type and dimensions. Do not assume that a particular pixel size is universally accepted.

5. Troubleshooting

Problem	Likely cause	Fix
The image looks like a mobile layout	Device Mode is set to a phone or the automation viewport is narrow.	Select Desktop in Chrome, or set an explicit desktop width and height in the Playwright context.
The thumbnail is unexpectedly tall	Full-page capture was selected.	Use Chrome’s viewport screenshot option or omit fullPage: true in Playwright.
The page is cut off at the wrong point	The capture scope, viewport height, or scroll position differs from the intended preview.	Set the viewport height deliberately, return to the desired scroll position, and capture the viewport. Use full-page only when requested.
Images or fonts are missing	The page had not finished rendering, or some resources load after navigation.	Wait for the relevant content or a specific selector before capturing. If using Playwright, consider waiting for a page-specific element instead of relying only on a generic load event.
Playwright times out waiting for network idle	The site keeps background requests open, such as analytics or live updates.	Use a less restrictive navigation wait condition, then wait for the page element that indicates the visible content is ready.
The output is blurry or has unexpected pixel dimensions	The CSS viewport and device pixel scale were not chosen for the desired output resolution.	Set the viewport and deviceScaleFactor explicitly; choose CSS-pixel or device-pixel screenshot scale according to the portfolio’s display requirements.
The element screenshot fails or captures the wrong region	The selector matches no element, matches several elements, or the target is not visible.	Use a selector for the intended unique element and ensure it is visible before calling locator().screenshot().

6. Performance, reliability, and cost

Chrome DevTools is a good fit for occasional manual work because it needs no capture script. Playwright takes initial setup, but a fixed viewport and script make batches more repeatable. Captures can still vary if a site changes its layout, content, animations, or third-party resources between runs.

Wait only as long as the page needs to become visually ready. A fixed delay can be simple but may waste time or still be too short; waiting for a meaningful selector is often more targeted. Network-idle waits can be unsuitable for pages with long-lived requests. For large pages, full-page output can take longer and create a much taller file than a viewport thumbnail. Both Chrome DevTools and Playwright are software tools; no physical product is needed for this workflow.

7. Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server for developers. Send one GET request with a URL to receive a PNG, JPEG, WebP, or PDF. Its API documentation describes the request options. For a desktop thumbnail, use a viewport capture and set the dimensions you need:

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

import requests

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

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);

Replace the example URL with your project URL. Add the viewport and output options from the docs to match your portfolio’s required dimensions. ScreenshotNeo accepts cookie and consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks, CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers indicate the page verdict and whether the request was billed. Its MCP server gives AI agents tools for screenshots, page information, and PDF capture. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots.

Sign up free for 1,000 screenshots a month, with no card required.

8. Frequently asked questions

Should a portfolio thumbnail show the whole website?

Usually, a thumbnail represents the initial desktop viewport. Use a full-page image when the portfolio specifically asks for a complete page or a tall case-study visual.

What desktop dimensions should I use?

Use the portfolio’s stated dimensions if it has them. Otherwise, choose a viewport that represents the desktop layout and apply it consistently; there is no single size established for every portfolio.

Can I capture just the website’s hero section?

Yes. In Playwright, take a screenshot of a locator for the section you want. In Chrome, use the visible viewport and frame the section within it.

Will a screenshot include the browser tabs and address bar?

The DevTools screenshot options described here capture the rendered webpage, not the surrounding browser window. Review the saved image to confirm the framing.