How to Capture a Screenshot of a Website’s Homepage

Short answer: use your browser’s built-in screenshot command. In Chrome, open DevTools, choose More options → Capture a full size screenshot for the entire homepage, or Capture screenshot for only the visible viewport. In Firefox, right-click the page, choose Take Screenshot, then select Save full page or Save visible.

A viewport screenshot contains only what is currently visible. A full-page screenshot includes content below the fold. Decide which one you need before capturing.

1. Choose the right capture

Goal	Use	Result
Show what a visitor currently sees	Visible or viewport capture	One browser-window view
Document the complete homepage	Full-page capture	Content below the fold is included
Capture a hero, form, or card	Element capture	Only the selected element and its descendants
Paste an image into another app	Clipboard copy	Image is copied instead of downloaded

2. Capture a homepage in Chrome

Open the homepage in Chrome.
Open DevTools with F12, Ctrl+Shift+I on Windows/Linux, or Command+Option+I on macOS.
Turn on Device Mode if you need a particular desktop or mobile viewport. Set the device preset, width, height, and device-pixel ratio as needed.
In the Device Mode toolbar, open More options (the three-dot menu).
Choose Capture screenshot for the visible viewport.
Choose Capture a full size screenshot for the complete page, including content outside the viewport. Chrome documents these as separate commands: Capture a screenshot.

Chrome downloads the result as an image. Before capturing, wait for the homepage to finish loading and scroll through once if the site loads images only after scrolling. Dynamic pages can change while Chrome assembles a full-page image, so check the output for missing or repeated sections.

3. Capture a homepage in Firefox

Open the homepage.
Right-click an empty part of the page and select Take Screenshot. The shortcut is Ctrl+Shift+S on Windows/Linux or Command+Shift+S on macOS.
Select Save full page for the entire document, or Save visible for the current viewport.
Choose Download to save a PNG, or Copy to place it on the clipboard.

Mozilla describes the feature and its save/copy choices in Take screenshots in Firefox.

4. Capture one element or a timed state in Firefox DevTools

Firefox’s Web Console includes a :screenshot helper for page, full-page, and selector captures. Open DevTools, select the Web Console, and run commands such as:

:screenshot homepage.png --fullpage
:screenshot hero.png --selector ".hero"
:screenshot menu.png --delay 2
:screenshot copied.png --clipboard

--fullpage includes content outside the window.
--selector limits the image to one CSS element and its descendants.
--delay waits before capture, which helps with hover menus, animations, or late content.
--clipboard copies the image instead of relying on a downloaded file.

Use a new filename for each capture. Firefox documentation warns that a later capture with the same filename overwrites the earlier file. See Taking screenshots with Firefox DevTools.

5. Set viewport, device, and scale deliberately

A homepage can look different at each viewport. For a reproducible capture:

Choose a desktop or mobile device preset in Chrome Device Mode.
Set the viewport width and height explicitly.
Use the same zoom level for comparable captures.
Capture at the intended device-pixel ratio when comparing visual changes.
Record the URL, viewport, browser, and capture date alongside the image.

A mobile emulation screenshot is not identical to a physical phone: browser chrome, font rendering, network conditions, and touch behavior can differ.

Full-page capture may trigger lazy-loaded images as the page is traversed, but pages do not all behave the same way. If sections are blank:

Reload with a stable connection.
Scroll from top to bottom once and wait for images to appear.
Pause animations or wait for the final state before capturing.
Accept or dismiss cookie consent when it blocks content.
Capture again and inspect the image at 100% zoom.

For a menu or hover state, use Firefox’s --delay option or open the state manually before a visible capture. A screenshot records pixels, not interactive behavior.

7. Save, name, and verify the file

Use a descriptive filename such as homepage-desktop-full-1440x900-2026-10-01.png.
Keep PNG for sharp UI text, JPEG for photographic pages, and WebP when file size matters and your workflow supports it.
Open the saved image and inspect the top, middle, and bottom. Look for duplicated sticky headers, clipped fixed elements, missing lazy images, and consent dialogs.
Do not reuse a filename when you need to preserve earlier captures.

8. Common problems and fixes

Problem	Likely cause	Fix
Only the visible area was saved	Viewport command was selected	Use Chrome’s Capture a full size screenshot or Firefox’s Save full page.
Bottom sections are blank	Lazy loading or a script triggered only by scrolling	Scroll through the page, wait for assets, then capture again.
Cookie dialog covers the image	Consent banner was not dismissed	Accept or dismiss it before a browser capture.
Menu is missing	Capture happened before the hover or animation state	Open the menu first, or use a capture delay.
Image is blurry	Low device scale, browser zoom, or an upscaled image	Use the intended device-pixel ratio and avoid enlarging the result.
Fixed header appears repeatedly	Full-page stitching captured a fixed element on multiple segments	Hide the header temporarily, use a viewport capture, or use an API with selector-hiding controls.
Capture command is unavailable	DevTools is closed or the wrong menu is open	Open DevTools Device Mode in Chrome, or use Firefox’s page context menu.
Downloaded file replaced an earlier one	Same filename was reused	Choose a unique filename for every capture.

9. Or skip the browser setup

ScreenshotNeo captures a homepage with one GET request and returns PNG, JPEG, WebP, or PDF. Its clean-shot flow accepts cookie and consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed; response headers identify the page verdict and whether the request was billed.

See the ScreenshotNeo API documentation for all options. This basic cURL request saves a WebP image:

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

Python:

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://example.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://example.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()));

You can also select an element, use full-page capture with lazy images loaded, set dark mode or any viewport, provide custom CSS and JavaScript, click before capture, hide selectors, wait for a selector or network idle, block ads and trackers, send cookies or headers, set timezone and geolocation, resize images, cache with a chosen TTL, create signed public links, submit asynchronous jobs with signed webhooks, capture up to 100 URLs per bulk call, and use the usage API. An MCP server provides take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients.

Free accounts include 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 shots; every feature is available on every plan. Create a free ScreenshotNeo account.

10. Performance, reliability, and cost considerations

Browser capture: best for an occasional manual image, with no API cost. It depends on the local browser, extensions, login state, viewport, and page timing.
Repeatability: record viewport and state, use stable filenames, and review dynamic pages because full-page stitching can vary.
Automation: an API avoids keeping a browser open and supports retries, custom waits, headers, cookies, caching, and bulk requests.
Billing: ScreenshotNeo bills only clean shots; failed loads, bot checks, blank pages, timeouts, and cache hits cost nothing. Check X-Page-Verdict and X-Billed in responses.
Cost control: choose a cache TTL for repeated URLs, use bulk capture for batches, and select the smallest output format that meets your quality needs.

11. Homepage screenshot checklist

Did you choose viewport, full page, or one element?
Is the viewport or device preset recorded?
Have images and fonts finished loading?
Are consent banners, popups, and chat widgets handled?
Did you check the top, middle, and bottom of the result?
Is the filename unique and descriptive?
For automation, are waits, retries, caching, and failure handling defined?

12. FAQ

What is the difference between a viewport and full-page screenshot?

A viewport screenshot contains the currently visible browser area. A full-page screenshot includes content below the fold.

Can I copy a homepage screenshot instead of downloading it?

Yes. Firefox’s screenshot UI offers Copy, and its DevTools helper supports --clipboard.

Why does a full-page image sometimes look different from scrolling manually?

Full-page tools assemble content while the page is rendered. Lazy loading, animations, fixed elements, and changing data can produce a different result.

Should I install an extension?

Not for the core task. Chrome and Firefox provide built-in full-page and visible capture commands. Extensions are optional when you need a workflow those commands do not provide.

Can I capture many homepages automatically?

Yes. A screenshot API such as ScreenshotNeo can automate requests, use caching, and submit bulk captures instead of repeating browser steps.