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.

  • 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://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.

Loading playground…

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.

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

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.