URL to WebP API

Screenshot webpages as WebP

Send a public URL to the API and receive a hosted .webp 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 .webp 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": "webp",
"viewport_height": 480,
"viewport_width": 640
}
https://hcti.io/v1/image/019fb43a-a8b4-7017-a337-6bac3e7305a0.webp
https://google.com
Screenshot of Google in a small viewport

Live demo

Try URL to WebP

Enter a public URL, choose the capture settings, and generate a WebP 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 WebP?

WebP combines modern compression with strong visual quality, making it a good fit for webpage screenshots delivered on the web.

Efficient compression

Deliver high-quality webpage captures with smaller files than many traditional image formats.

Transparency support

Keep transparent page areas while benefiting from a web-focused output format.

Built for web delivery

Use WebP for product previews, content feeds, monitoring dashboards, and performance-sensitive applications.

URL screenshot API

Request WebP output directly

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

  • Public webpage URL

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

  • WebP output

    Set format to webp and use the hosted .webp 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": "webp",
"viewport_width": 1200,
"viewport_height": 630
}

How it works

From webpage URL to a finished WebP

  1. Send the webpage URL

    Submit a public URL with format set to webp 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 .webp 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 WebP? Explore HTML to WebP
Lossless + transparent
.png

URL to PNG

Crisp text, sharp interface details, and transparent page backgrounds.

Explore PNG
Compact + universal
.jpeg

URL to JPEG

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

Explore JPEG
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 WebP 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: "webp",
    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 WebP webpage screenshot

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

Start free Read the API docs