How to Convert a Webpage to PNG

To convert a webpage to PNG, capture the browser-rendered page as an image. For a one-off full-page image, Firefox’s built-in screenshot tool is the quickest option. For scripts, use Firefox Developer Tools, Chrome Headless, Cloudflare Browser Rendering, or a hosted screenshot API such as ScreenshotNeo.

Choose full page when you need the entire scrollable document. Choose a viewport screenshot when you need only what is visible in a browser window. An HTML download or PDF is not automatically a PNG; those are different representations and may require a separate rendering step.

1. Convert a webpage to PNG in Firefox

Full-page screenshot with Firefox’s built-in tool

Open the webpage in Firefox.
Right-click the page and choose Take Screenshot. You can also press Ctrl+Shift+S on Windows or Linux, or Command+Shift+S on macOS.
Choose Save full page for the complete scrollable page, or Save visible for the current viewport.
Download the image. Firefox saves it as a PNG in the default download folder.

Mozilla documents both visible and full-page capture in its Firefox screenshot help.

Capture an element or control the pixel ratio

Firefox Developer Tools exposes a :screenshot Web Console helper. Open Developer Tools, select the Web Console, and run:

:screenshot --fullpage --filename page.png

Useful options include:

Option	Purpose
`--fullpage`	Capture beyond the current window bounds.
`--selector ".article"`	Capture one element matched by a CSS selector.
`--delay 2000`	Wait before capturing, in milliseconds.
`--dpr 2`	Set device pixel ratio for sharper output.
`--filename name.png`	Choose the output filename.

Reusing a filename overwrites the previous image. Firefox’s Web Console screenshot documentation describes these flags.

2. Convert a webpage to PNG with Chrome Headless

Chrome Headless can save a viewport screenshot from the command line:

chrome --headless --screenshot --window-size=412,892 https://developer.chrome.com/

The command writes screenshot.png to the current working directory. Use --window-size=WIDTH,HEIGHT to control the viewport:

google-chrome --headless --disable-gpu \
  --window-size=1440,900 \
  --screenshot=homepage.png \
  https://example.com

Chrome’s documented --screenshot flag captures the target page, but the cited command-line reference does not establish that it captures the entire scrollable document. Do not assume a long page is full-page. For a documented full-page option, use Firefox’s --fullpage helper or an API with an explicit fullPage setting. Chrome’s --print-to-pdf flag creates a PDF, not a PNG. See the Chrome Headless documentation.

3. Automate full-page PNG capture with Cloudflare Browser Rendering

Cloudflare Browser Rendering provides an API route for repeated captures. Its screenshot options include fullPage, viewport dimensions, device scale factor, and element selection. PNG is the default format.

curl -X POST "https://api.cloudflare.com/client/v4/accounts/ACCOUNT_ID/browser-rendering/screenshot" \
  -H "Authorization: Bearer CLOUDFLARE_API_TOKEN" \
  -H "Content-Type: application/json" \
  --data '{
    "url": "https://example.com",
    "screenshotOptions": {
      "fullPage": true,
      "type": "png",
      "viewport": {"width": 1440, "height": 900 },
      "deviceScaleFactor": 2
    }
  }' \
  --output screenshot.png

When the page is JavaScript-heavy, configure navigation waits or other documented wait controls so the capture does not occur before the application renders. Increase the device scale factor when the output looks pixelated. Cloudflare documents that the quality option is incompatible with PNG; use a format that supports quality controls if you need lossy compression. Protect API tokens, credentials, and session cookies.

4. Convert a webpage to PNG in code

Python with Playwright

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=True)
    page = browser.new_page(viewport={"width": 1440, "height": 900}, device_scale_factor=2)
    page.goto("https://example.com", wait_until="networkidle")
    page.screenshot(path="page.png", full_page=True)
    browser.close()

Install the dependency with pip install playwright, then install its browser with playwright install chromium. For pages whose content appears after a known event, wait for that selector instead of relying only on network idle:

page.goto("https://example.com", wait_until="domcontentloaded")
page.wait_for_selector("main.article", state="visible", timeout=30000)
page.screenshot(path="article.png", full_page=True)

Node.js with Playwright

import { chromium } from "playwright";

const browser = await chromium.launch({ headless: true });
const page = await browser.newPage({
  viewport: { width: 1440, height: 900 },
  deviceScaleFactor: 2
});
await page.goto("https://example.com", { waitUntil: "networkidle" });
await page.screenshot({ path: "page.png", fullPage: true });
await browser.close();

Install with npm install playwright and npx playwright install chromium.

5. Control what appears in the PNG

Viewport: Set width and height to match the target device or layout breakpoint.
Device pixel ratio: Use a scale factor such as 2 for sharper images, while watching memory use.
Full page: Use a documented full-page option; a large viewport is not the same thing.
Element capture: Target a CSS selector when only a chart, card, or article is needed.
Waiting: Wait for a selector, a delay, or a network-idle condition after JavaScript renders.
Fonts and images: Ensure web fonts, lazy images, and animations have finished before capture.
Privacy: Local browser capture keeps the page on your machine. Hosted APIs receive the URL and may receive credentials or rendered content, so review their security terms.

6. Or skip the browser setup

ScreenshotNeo returns a PNG, JPEG, WebP, or PDF from one GET request. See the API documentation for all options.

cURL

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

Python

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)

Node.js

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

Set the requested output format and capture behavior with ScreenshotNeo’s options, including full-page capture, lazy-image loading, CSS selectors, dark mode, custom CSS and JavaScript, click actions, waits, blocked resource types, headers, cookies, user agents, timezone, geolocation, transparency, resizing, caching, signed links, asynchronous jobs, webhooks, bulk capture, and PDF settings.

Consent banners, newsletter popups, and chat widgets are removed before the shot. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the result with X-Page-Verdict and X-Billed headers. An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000. Create a free ScreenshotNeo account.

7. Troubleshooting

Symptom	Likely cause	Fix
Only the visible area appears	The command captured the viewport.	Use Firefox `--fullpage`, Playwright `fullPage: true`, or Cloudflare `fullPage: true`.
Blank or half-rendered page	Capture started before JavaScript finished.	Wait for a page-specific selector, network idle, or a measured delay.
Lazy images are missing	Images load only after scrolling.	Use a full-page renderer that loads lazy content, or scroll through the page before capture.
Text looks blurry	Device pixel ratio is too low.	Increase DPR or device scale factor; reduce dimensions if memory becomes a problem.
Fonts differ from the browser	Web fonts failed or were not ready.	Wait for fonts, verify network access, and capture after the intended font is applied.
PNG file is unexpectedly large	PNG is lossless and high-DPR images contain more pixels.	Resize the output, lower DPR, or choose WebP/JPEG when lossless PNG is unnecessary.
Cloudflare request fails	Invalid account, token, permissions, or JSON.	Check the account ID, token scope, content type, and request body; keep tokens out of source control.
Repeated filename disappears	The same filename was reused.	Provide a unique filename for each capture.

8. Performance, reliability, and cost

Speed: Viewport captures are usually faster and use less memory than full-page, high-DPR captures.
Reliability: Wait for a meaningful selector on application pages. A fixed delay alone can be too short or unnecessarily slow.
Repeatability: Fix viewport, DPR, timezone, locale, user agent, and authentication state when comparing screenshots.
Long pages: Full-page images can become very tall. Capture a key element or split the page when downstream systems have dimension limits.
Cost: Local Firefox, Chrome, and Playwright use your own machine. Hosted rendering requires an account and may charge according to the provider’s current terms. ScreenshotNeo’s current plans include 1,000 free shots monthly, then $5 for 3,000, $15 for 15,000, $39 for 60,000, $99 for 250,000, and $249 for 1,000,000; yearly billing gives two months free.

9. Which method should you use?

Need	Recommended route	Reason
One occasional full-page PNG	Firefox screenshot UI	Built-in full-page save with no setup.
Element, delay, DPR, or filename control	Firefox Developer Tools	Documented `:screenshot` options.
Scripted viewport capture	Chrome Headless	Simple command-line PNG output and window sizing.
Automated full-page API capture	ScreenshotNeo	Clean shots, only clean shots billed, and the lowest paid plan.
Cloudflare-based browser automation	Cloudflare Browser Rendering	Explicit full-page, viewport, scale, and selector settings.

10. FAQ

Is converting a webpage to PNG the same as downloading its HTML?

No. A PNG is an image of the rendered page, including the current layout, fonts, images, and visible state.

Can I convert a webpage to PNG without opening a visible browser?

Yes. Chrome Headless, Playwright, Cloudflare Browser Rendering, and ScreenshotNeo run capture without a visible browser window.

Why is my full-page PNG much taller than expected?

Full-page capture includes the document’s complete scroll height. That is expected; use an element capture or a viewport screenshot when you need a bounded image.

Should I use PNG, JPEG, or WebP?

PNG preserves sharp text and transparency. JPEG is smaller for photographs. WebP often provides a smaller file while retaining good quality. Choose based on the downstream system and whether lossless output is required.

Yes, when the renderer has a valid authenticated session, cookies, or authorization headers. Treat those credentials as secrets and avoid exposing them in logs or URLs.