How to Crop Website Thumbnails So the Header and Hero Section Are Visible

To crop a website thumbnail so its header and hero are both visible, start with the thumbnail’s final shape and size. Capture the page at a viewport that shows both sections, or select a page element or coordinate region that contains them. Crop from the top or define the region explicitly, then resize proportionally and inspect the result at its actual display size. There is no universal thumbnail size or crop position: the right values depend on the destination and the page layout.

1. Decide the final thumbnail shape

Before capturing, find the destination card’s required aspect ratio and pixel dimensions. A wide card and a square preview need different compositions. Do not assume a full-page screenshot will make a good small thumbnail: reducing a tall page can make the header and hero difficult to recognize.

Write down the target width and height, then calculate the ratio as width ÷ height. Use the destination’s documented dimensions where available. If none are specified, choose dimensions that fit the intended card and review the result in context rather than treating any one size as universal.

2. Choose a capture method

Method	Use it when	Trade-off
Viewport capture	The browser view can show the full header and the useful hero content at once.	Simple framing, but the viewport height may include extra material or cut off lower hero content.
Element capture	The page has a stable element that contains the composition you want.	Selectors depend on the site’s markup and can change.
Explicit region	You know the page coordinates and dimensions of the desired area.	Coordinates can become wrong when responsive layout, fonts, or content shift.
Full-page then crop	You also need a page record, or direct framing is impractical.	A tall capture needs a separate crop step to become a compact thumbnail.

Viewport dimensions affect page layout, so choose a width that produces the header and hero arrangement you want. The capture-website project documents width, height, full-page capture, and clip coordinates. It also documents that clip cannot be combined with element or full-page capture. OpenGraph.io’s screenshot API documentation describes dimensions, full-page capture, selector-based capture, and excluded selectors.

3. Capture a viewport with Playwright

This runnable Node.js example captures the page viewport after waiting for a chosen hero selector. Set the viewport to the layout you want and adjust the selector and dimensions for the target page. Install Playwright with npm install playwright, then run the script with Node.js.

const { chromium } = require('playwright');

(async () => {
  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.locator('header').waitFor({ state: 'visible', timeout: 10000 });
    await page.locator('main').waitFor({ state: 'visible', timeout: 10000 });
    await page.screenshot({ path: 'thumbnail.png' });
  } finally {
    await browser.close();
  }
})();

Replace header and main with selectors that match the page. Some sites keep network connections open, so networkidle may not occur; in that case wait for a page-specific selector or use a short fixed delay after navigation. The viewport screenshot includes the visible browser area; make sure its height includes the complete part of the hero that matters.

4. Capture a deliberate region or element

When the desired area is known, a clip gives you coordinate control. Here is a Playwright example that captures a rectangular region from the page. Coordinates are CSS pixels relative to the page viewport.

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({ headless: true });
  const page = await browser.newPage({ viewport: { width: 1440, height: 1000 } });

  try {
    await page.goto('https://example.com', { waitUntil: 'domcontentloaded' });
    await page.locator('header').waitFor({ state: 'visible' });
    await page.screenshot({
      path: 'header-hero.png',
      clip: { x: 0, y: 0, width: 1440, height: 760 }
    });
  } finally {
    await browser.close();
  }
})();

Measure or inspect the page before fixing coordinates. A centered hero may need a narrower region than the viewport, while a full-width header needs the full page width. For element capture, use await page.locator('YOUR_SELECTOR').screenshot({ path: 'thumbnail.png' }) after navigation and visibility checks. This captures the element’s bounds, so verify that the selected element contains both the header and hero; many sites place them in separate containers, in which case a viewport or clip is more appropriate.

For tooling that supports crop anchors, Shopify documents top, bottom, center, left, right, and explicit-region crop choices in its CropRegion documentation. A top-oriented crop often helps retain a site header, but check that the hero remains inside the retained area.

5. Crop and resize without stretching

If you already have a screenshot, crop it to the target aspect ratio before resizing. Keep the crop rectangle large enough to include the complete header and the useful hero content. Avoid stretching the image to force a fit: that distorts logos, typography, and page proportions. Wagtail’s image documentation describes proportion-preserving resizing and focal-point-aware cropping; see Wagtail’s image guide.

With ImageMagick installed, this command crops from the top and resizes to fit a 1200 by 630 canvas without distortion. It may leave transparent or background space if the source ratio differs; use a deliberate crop first when exact composition matters.

magick input.png -gravity north -crop 1200x630+0+0 +repage -resize 1200x630> thumbnail.png

The example assumes the source is at least 1200 pixels wide and 630 pixels tall. For smaller or differently proportioned sources, calculate a crop rectangle that fits the source, then resize proportionally. Do not copy the example dimensions as a universal destination standard.

6. Validate the thumbnail

Open the output at the actual card size, not only at full resolution.
Confirm the whole header and the intended hero content are visible.
Check that important subjects, buttons, or text are not clipped by the crop.
Confirm the image has the required file format, dimensions, and aspect ratio.
Re-capture if responsive layout, delayed images, or fonts shifted the composition.

Full-page capture serves a different purpose: it preserves scrollable content, but generally needs another crop to become a compact preview. For capture-website, clip and fullPage cannot be used together, so capture the target viewport or region directly when thumbnail framing is the objective.

7. Common problems and fixes

Problem	Likely cause	Fix
Header appears, hero is cut off	Crop is anchored too high or viewport is too short.	Increase viewport height or move the crop’s lower edge down; inspect at card size.
Hero appears, header is missing	Crop begins below the top, or the header is fixed/overlaid.	Start at the page top and check whether the header appears after scrolling or loading.
Wrong layout in screenshot	Capture viewport triggers a different responsive breakpoint.	Adjust viewport width and height to match the desired composition.
Clip is empty or offset	Coordinates exceed viewport bounds or layout moved before capture.	Wait for stable content, re-measure, and keep clip coordinates within the viewport.
Element selector times out	Selector does not match, content is delayed, or element is hidden.	Inspect the page markup, use a stable selector, and wait for visible state.
Screenshot is blank or incomplete	Navigation failed, capture ran before rendering, or the site blocks automation.	Check navigation errors, wait for a specific visible element, and retry with a sensible timeout.
Text looks soft or distorted	Image was stretched or enlarged from too few source pixels.	Preserve proportions and capture at adequate dimensions or device scale.
Lazy-loaded hero image is absent	The image loads only after scrolling or waiting.	Scroll the hero into view, wait for its image to load, then capture the intended viewport or region.

8. Performance, reliability, and cost

For repeated captures, prefer a direct viewport, element, or clip capture over capturing an entire long page and processing it afterward when the full page is not needed. Use selector-based waits for the header and hero so the screenshot does not depend on an arbitrary long delay. A fixed delay can help with late rendering, but it adds latency to every capture and still cannot guarantee that dynamic content is ready.

Coordinate crops are efficient but brittle when responsive breakpoints or content change. Element captures adapt to element bounds but rely on selectors that remain valid. For reliability, keep the target URL, viewport, selector or coordinates, wait condition, and output dimensions together as configuration; record failures and retry only transient navigation or loading errors. Always inspect samples after a site redesign.

Self-hosted browser capture has no per-shot API charge, but it uses compute, browser memory, maintenance, and time. A hosted screenshot API trades browser setup and operations for service pricing. Compare cost using the number of successful usable captures you need and the work needed to maintain your own browser workflow.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. Its one-call endpoint can return a screenshot in PNG, JPEG, or WebP, or a PDF; the supplied API features include full-page and element capture, viewport and device presets, custom CSS and JavaScript, wait conditions, and image resizing. See the ScreenshotNeo API documentation.

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

Cookie banners, newsletter popups, and chat widgets are removed before the shot; each cleanup step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and the response identifies the page verdict and billing status in headers. An MCP server lets AI agents use take_screenshot, get_page_info, and capture_pdf. The Free plan includes 1,000 shots a month with no card; paid plans start at $5 for 3,000 shots. Every feature is on every plan.

FAQ

Should I use a full-page screenshot for a thumbnail?

Usually not when the thumbnail’s job is to show the header and hero. A viewport or targeted crop makes those sections legible; use full-page capture when you need a page record, then crop for the thumbnail.

Is there a standard thumbnail size?

No single size was established by the reviewed documentation. Use the dimensions required by the destination and preserve the screenshot’s proportions.

Can I capture the header and hero as one element?

Only if the page provides an element whose bounds contain both. Otherwise capture a viewport or explicit region.

Why does the same crop look different on another page?

Page layouts, responsive breakpoints, fixed headers, and content height vary. Recheck the viewport or region for each layout rather than assuming one coordinate set fits all pages.