URL to PNG API

Screenshot webpages as PNG

Send a public URL to the API and receive a hosted .png screenshot. Control the viewport, full-page capture, selected element, and browser state.

Start free Read the API docs
  • Full-page screenshots
  • CSS selector capture
  • Hosted .png image URL
Real URL screenshot API requests followed by their rendered webpage images.
Request
POST https://hcti.io/v1/image
{
"url": "https://google.com",
"format": "png",
"viewport_height": 480,
"viewport_width": 640
}
https://hcti.io/v1/image/019fb43a-a8b4-7017-a337-6bac3e7305a0.png
https://google.com
Screenshot of Google in a small viewport

Live demo

Try URL to PNG

Enter a public URL, choose the capture settings, and generate a PNG screenshot with the same API used in production.

Options

Enter a public webpage URL.

Apply styles after the page loads and before the screenshot is captured.

Content

Adjust how content is rendered by adjusting these settings.
?

A CSS selector for an element in the HTML. We’ll crop the image to this specific element.

?

Removes the background from the rendered image.

Image size & Viewport

By default images are cropped to the outermost HTML element or the chosen selector. Adjust viewport and sizing settings below.
?

Take a screenshot of the entire screen

?

Adjusts the screenshot pixel ratio. HTML and template renders default to 2; URL renders default to 1.

?

Set the height and width of Chrome's viewport. Setting a viewport disables automatic cropping.

Sets the emulated viewport orientation to landscape.

Makes the emulated viewport behave like a mobile device and honor mobile viewport behavior.

Makes the emulated viewport report support for touch events.

Timing

By default the API generates a screenshot once everything is loaded. If the page executes JavaScript, you may want extra time before the image is rendered.
?

Adds extra time for JavaScript to execute before the screenshot is taken. Start with 500 milliseconds if the page renders blank.

?

Sets a limit on how long to wait before taking the screenshot when irrelevant content continues loading.

?

Waits for the page to signal that the screenshot is ready instead of capturing after normal loading.

Browser Context

These settings impact how Chrome is started, giving you more control when taking screenshots.
?

Set Chrome to render as if the user prefers light or dark mode.

Set Chrome to render the page using print or screen media styles.

?

Render the page with Chrome set to a specified timezone.

?

Attempt to block cookie/consent banners from displaying.

Send X-HCTI-SCREENSHOT: 1 with the top-level page navigation.

Preview

Your screenshot will appear here

Enter a URL, choose the settings you need, and generate the image.

Format advantages

Why capture webpages as PNG?

PNG preserves sharp text, interface details, and transparency, making it a reliable format for webpage archives and UI captures.

Lossless page detail

Keep text, icons, charts, and interface elements crisp without compression artifacts.

Transparent backgrounds

Preserve transparent page backgrounds when the captured design is intended for overlays or compositing.

Reliable visual fidelity

Use PNG when exact colors and sharp edges matter more than the smallest possible file.

URL screenshot API

Request PNG output directly

Send a public URL to the API with format set to png. Chromium loads the webpage and the response points to the generated .png screenshot.

  • Public webpage URL

    Send the URL to load, including webpages whose final state depends on browser-rendered JavaScript.

  • PNG output

    Set format to png and use the hosted .png URL returned by the API.

  • Viewport and crop controls

    Set viewport dimensions, capture the full page, or crop the result to a CSS selector.

  • Browser environment

    Choose color scheme, timezone, mobile behavior, timing, and other page-loading controls.

POST https://hcti.io/v1/image request example.
Request
POST https://hcti.io/v1/image
{
"url": "https://example.com",
"format": "png",
"viewport_width": 1200,
"viewport_height": 630
}

How it works

From webpage URL to a finished PNG

  1. Send the webpage URL

    Submit a public URL with format set to png and any viewport, selector, or browser settings.

  2. Chromium loads the page

    The API runs the webpage, styles, fonts, images, and JavaScript in a managed browser environment.

  3. Use the .png URL

    Embed the hosted result, download the file, or save it in your own storage and application records.

Output formats

One API, the format your workflow needs

Keep the same URL and capture settings. Choose lossless detail, compact compatibility, modern web delivery, or a paginated document.

Looking to convert HTML & CSS to PNG? Explore HTML to PNG
Compact + universal
.jpeg

URL to JPEG

Smaller files and broad compatibility for photographic and content-heavy webpages.

Explore JPEG
Modern + efficient
.webp

URL to WebP

Strong visual quality with modern compression for web delivery.

Explore WebP
Document + printable
.pdf

URL to PDF

Paginated webpage captures with page sizing, margins, backgrounds, and print styles.

Explore PDF

Example code

Capture a webpage as PNG from your app

Choose a language and copy a complete request using a public URL and explicit screenshot settings.

const apiId = process.env.HCTI_API_ID;
const apiKey = process.env.HCTI_API_KEY;
if (!apiId || !apiKey) {
    throw new Error("Missing HCTI_API_ID or HCTI_API_KEY");
}
const authorization = `Basic ${Buffer.from(`${apiId}:${apiKey}`).toString("base64")}`;

const request = {
    url: "https://example.com",
    format: "png",
    viewport_height: 630,
    viewport_width: 1200,
};

const response = await fetch("https://hcti.io/v1/image", {
    method: "POST",
    headers: {
        Authorization: authorization,
        "Content-Type": "application/json",
    },
    body: JSON.stringify(request),
});
if (!response.ok) {
    throw new Error(`HCTI request failed: ${response.status} ${await response.text()}`);
}
const result = await response.json() as { url: string };
console.log(result.url);
Read the TypeScript Docs

Ready to capture?

Take your first PNG webpage screenshot

Send a public URL to the API and receive a hosted .png image without running browser infrastructure.

Start free Read the API docs