Smaller photo-heavy images
Lossy compression keeps files compact when the rendered design contains photography, gradients, or detailed backgrounds.
HTML to JPEG API
Convert HTML and CSS to JPEG
Send HTML and CSS to the API and receive a hosted .jpeg image URL. HCTI manages Chromium, rendering, storage, and delivery.
- HTML, CSS, and JavaScript
- Hosted .jpeg image URL
- Viewport and browser controls
View example
Request
Live demo
Turn HTML and CSS into a JPEG image
Edit the HTML and CSS, choose the image settings, and render a JPEG with the same API used in production.
Format advantages
Why generate JPEG images from HTML?
JPEG is a practical choice for photographic and content-rich images where broad compatibility and smaller files matter.
Broad compatibility
JPEG works across browsers, email clients, social platforms, document tools, and long-running application workflows.
Easy to distribute
Use a familiar image format for previews, downloads, attachments, and automated publishing.
HTML to image API
Request JPEG output directly
Send HTML and CSS to the API with the format set to jpeg. Chromium renders the content and the response URL points to the generated .jpeg image.
-
HTML and CSS input
Send complete markup and styles, including browser-supported fonts, images, SVG, and JavaScript.
-
JPEG output
Set format to jpeg and use the hosted .jpeg URL returned by the API.
-
Viewport and crop controls
Set viewport dimensions and device scale, or crop the result to a CSS selector.
-
Page environment
Choose light or dark mode, timezone, and screen or print media.
Request
How it works
From markup to a finished JPEG
-
Send HTML and CSS
Submit the content with format set to jpeg and any viewport or browser settings.
-
Chromium renders the design
The API loads the markup, styles, fonts, and assets in a managed browser environment.
-
Use the .jpeg 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 HTML and CSS. Choose lossless detail, compact compatibility, modern web delivery, or a paginated document.
Looking to capture a webpage as JPEG? Explore URL to JPEGLossless + transparent
Modern + efficient
Document + printable
.png
HTML to PNG
Crisp text, sharp UI details, and transparent backgrounds for designed graphics.
Explore PNG.webp
HTML to WebP
Strong visual quality, transparency, and modern compression for web delivery.
Explore WebP.pdf
HTML to PDF
Paginated documents with page sizing, margins, backgrounds, and print styles.
Explore PDFExample code
Create a JPEG image from your app
Choose a language and copy a complete request using this page's simple HTML and CSS example.
Loading code example
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 = {
html: `<div class="card">
<h1>Hello, world!</h1>
<p>Generated from HTML and CSS.</p>
</div>`,
css: `.card {
width: 480px;
padding: 40px;
background: #f0fdf4;
color: #052e16;
font-family: sans-serif;
}`,
format: "jpeg",
};
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);
Loading code example
Loading code example
Loading code example
Loading code example
Loading code example
Loading code example
Loading code example
Loading code example
Ready to render?
Create your first JPEG from HTML and CSS
Send HTML and CSS to the API and receive a hosted .jpeg image URL without running browser infrastructure.