Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
To turn HTML and CSS into an image, send them to an image-rendering API and use the returned image URL. With HTML/CSS to Image (HCTI), the request is a POST to https://hcti.io/v1/image, authenticated with your API ID and API key using HTTP Basic Auth. You can submit markup and styles, a public webpage URL, or values for a reusable template, then request PNG, JPG, WebP, or PDF output.
Render HTML and CSS as an image
Use the html field for a snippet or complete document, and css for its styling. The following cURL example sends a small card, asks for a Google font, and increases the pixel ratio for a sharper result. Replace the credentials with values from your HCTI account.
curl -X POST https://hcti.io/v1/image
-u 'YOUR_API_ID:YOUR_API_KEY'
-H 'Content-Type: application/json'
-d '{
"html": "<div class="card"><h1>Hello, world!</h1><p>A rendered card</p></div>",
"css": ".card { width: 560px; padding: 28px; border-radius: 16px; background: #03B875; color: white; font-family: Roboto, sans-serif; } h1 { margin: 0 0 8px; }",
"google_fonts": "Roboto",
"device_scale": 2
}'The API responds with JSON that includes a generated image URL and an image ID. Use the returned URL rather than assuming a fixed output filename or path. The documented endpoint and request flow are described in the HCTI API documentation.
Recommended Free Tools
For production, keep your HTML and CSS valid and self-contained where possible. External assets, fonts, and remote content introduce dependencies that can fail or load slowly. A higher device_scale makes the output denser and typically increases its pixel dimensions and file size; choose it based on where the image will be displayed, not simply the maximum setting.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Use the generated URL and choose a format
The initial rendering defaults to PNG. The returned image URL can be requested with a supported extension to choose PNG, JPG, WebP, or PDF. JPG and WebP are served from the stored PNG, while PDF is rendered and saved separately; do not treat a PDF request as a file-format conversion of the stored PNG.
| Format | Typical use | What to know |
|---|---|---|
| PNG | Graphics with text, sharp edges, or transparency needs | Default format. |
| JPG | Photographic content where smaller files may be useful | Served from the stored PNG. |
| WebP | Web delivery when the consuming system accepts WebP | Served from the stored PNG. |
| Document-style output | Rendered and saved separately; use PDF options for page and print settings. |
Use the matching extension on the generated URL, such as .webp or .pdf, and verify that the consuming application supports the chosen format. For PDF-specific page size, margins, scale, or background printing, configure pdf_options in the API request.
Screenshot a public webpage
To capture a live webpage rather than supply markup, send its fully qualified address in url. When url is present, it takes precedence over html; CSS can still be injected to adjust the captured page. This request illustrates a full-height capture, a short readiness delay, and a viewport width:
curl -X POST https://hcti.io/v1/image
-u 'YOUR_API_ID:YOUR_API_KEY'
-H 'Content-Type: application/json'
-d '{
"url": "https://example.com",
"css": "body { font-family: Arial, sans-serif; }",
"full_screen": true,
"width": 1440,
"height": 900,
"ms_delay": 1000,
"device_scale": 1
}'Pick a viewport that reflects the intended display. full_screen captures the full page height; it does not mean that an extremely tall page will produce a small file. If the target page depends on JavaScript, use a suitable wait setting: ms_delay provides a delay, while max_wait_ms sets a maximum wait for page readiness. Longer waits can help content appear, but add latency and should not be used as a substitute for diagnosing an inaccessible or stalled page.
Useful URL-capture controls
headers: add custom HTTP headers where origin restrictions allow them. Do not assume every target site will accept an arbitrary header.media_type: choose screen or print media styles, which matters when the page has print-specific CSS.google_fonts: request one or more Google Fonts; separate multiple font names with|.croppingand viewport controls: use the documented crop and dimension options to focus an output on the intended region rather than rendering an unnecessarily large canvas.device_scale: set the pixel ratio from 0.1 to 3. Higher values yield more pixels but also larger outputs.
For especially large captures, jumbo_max_width and jumbo_max_height support dimensions up to 80,000 pixels when both are set. These consume additional image credits, so reserve them for cases that genuinely need a very large canvas.
Generate PDFs with page and print settings
For a PDF, set format to pdf or request the generated URL with a .pdf extension. Configure the documented pdf_options for page size, margins, scale, and background printing. If a page relies on print styles, set media_type to print; for a browser-like view, use screen media instead.
curl -X POST https://hcti.io/v1/image
-u 'YOUR_API_ID:YOUR_API_KEY'
-H 'Content-Type: application/json'
-d '{
"html": "<main><h1>Invoice</h1><p>Amount due: $125.00</p></main>",
"css": "body { font-family: Arial, sans-serif; } main { padding: 32px; }",
"format": "pdf",
"media_type": "print",
"pdf_options": {
"format": "A4",
"margin": "12mm",
"print_background": true
}
}'Use PDF output when you need document pagination or printing behavior. For a social card, badge, or other fixed-size visual, use an image format instead. Exact PDF option names and accepted values can change, so check the current parameter documentation before relying on less common settings.
Free tools Windows power users keep installed
One-click scans. No signup required.
Reuse templates for changing data
If the visual layout stays the same while its contents change, create a template and send only the values that vary. The template endpoint is https://hcti.io/v1/image/:template_id; replace :template_id with the identifier for your template.
curl -X POST 'https://hcti.io/v1/image/YOUR_TEMPLATE_ID'
-u 'YOUR_API_ID:YOUR_API_KEY'
-H 'Content-Type: application/json'
-d '{
"template_values": {
"title": "Quarterly results",
"revenue": "$125,000",
"growth": "12%"
}
}'Templates are useful for generating repeated assets such as report cards or personalized graphics without resending the whole design each time. Keep the template structure stable and supply only the fields it expects; the request example here follows the documented template-values workflow.
Generate Open Graph images
Open Graph images are the preview graphics shown when a page is shared on social platforms and messaging apps. HCTI documents automatic Open Graph image generation as a workflow based on page screenshots or metadata. Choose a design that remains legible at the smaller preview sizes where these cards appear, and ensure that the content used to create each card matches the page it represents.
Authentication and safe integration
HCTI uses HTTP Basic authentication: the API ID is the username and the API key is the password. Treat the key like a password. Call the API from a server or other trusted environment rather than placing the credential in browser JavaScript, a public mobile app, or a repository.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →If a browser needs to display an image generated on demand, the official clients and signed-image URLs provide an alternative to exposing the API key. Signed URLs use an HMAC SHA256 token, and the official clients can generate them. Follow the vendor’s current signing instructions rather than implementing a token format from memory.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Options that matter in production
Fonts and page readiness
Specify Google Fonts with google_fonts when the design depends on them. For URL captures, use ms_delay or max_wait_ms only as needed to allow scripts and content to settle. A fixed delay may be too short for a slow page and wasteful for a fast one; choose the smallest wait that reliably produces the required content.
Viewport, full page, and large output
Set viewport width and height for the intended responsive layout, then use full_screen when the full document is required. Use device_scale to trade output dimensions and weight for sharpness. The jumbo dimension options permit unusually large outputs, up to 80,000 pixels when both are set, with additional credit use.
Headers and access constraints
Custom headers can support requests that need specific headers, subject to origin restrictions. They do not guarantee access to private pages or pages protected by authentication or anti-bot controls. Only submit URLs and credentials you are authorized to use, and avoid embedding sensitive values in client-side code or logs.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Print versus screen and file size
Use media_type to select print or screen CSS. For a raster image, balance dimensions, pixel ratio, and format against downstream file-size constraints. For a document, control pagination and backgrounds through pdf_options rather than expecting the image output’s layout to determine the PDF pages.
Best Value
Troubleshooting failed or unexpected renders
- Authentication fails: confirm the API ID is the Basic Auth username and the API key is the password; check for accidental whitespace and use a server-side request.
- The URL capture ignores supplied HTML: this is expected when
urlis present because it takes precedence overhtml. Removeurlto render your markup. - JavaScript content is missing: allow additional readiness time with
ms_delayormax_wait_ms. If the target remains inaccessible, a longer wait will not fix the underlying page access problem. - The page uses the wrong responsive layout: adjust viewport dimensions to the width and height needed by the design, then render again.
- The font looks different: specify the required font with
google_fonts, verify the spelling, and allow enough time for the page and font to load. - The output is too soft: increase
device_scalewithin its documented 0.1–3 range, while checking the resulting dimensions and file size. - The file is unexpectedly large: reduce the viewport, page height, or pixel ratio, and avoid jumbo dimensions unless needed. JPG or WebP may suit delivery cases where those formats are accepted.
- The PDF layout differs from the image: PDF is rendered and saved separately. Set
formator request the PDF URL explicitly, then tunepdf_optionsandmedia_type. - A custom header has no effect: confirm the target origin allows it; the API documents origin restrictions for headers.
Performance, reliability, and cost considerations
Each render depends on the complexity of the markup or target page, remote assets, font loading, and readiness waits. Minimize external dependencies where possible, request only the required page area, and avoid excessively high pixel ratios for thumbnails or previews. A delay improves the chance that dynamic content has appeared but increases end-to-end wait time.
The documented implementation material does not establish universal render-time guarantees, uptime figures, or a numerical throughput limit, so do not size a production system around an assumed fixed latency or rate. For a workload with strict delivery requirements, validate the API behavior with your own pages and plan an application-level retry and failure path. Keep generated URLs and image IDs alongside your job records if you need to associate outputs with source data.
Or skip the browser setup
If your job is simply to capture a website, ScreenshotNeo offers a single GET request that returns a screenshot or PDF. It accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each cleanup step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, with response headers identifying the page verdict and billing status. Its MCP server exposes screenshot, page-info, and PDF tools to AI agents and MCP clients.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemscURL example (see the ScreenshotNeo documentation for parameters):
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython:
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}`);ScreenshotNeo includes 1,000 screenshots per month on its free plan with no card; paid plans start at $5 for 3,000. Sign up for free and get 1,000 screenshots a month with no card.
Frequently Asked Questions
Can I use HCTI to render a complete HTML document rather than a snippet?
Yes. The documented input accepts either an HTML snippet or a full document in the `html` field.
Can I use an HCTI-generated image URL in a web page?
Yes. The API response includes a generated URL; keep API credentials private and use the documented signed-URL approach when an on-demand browser flow needs to avoid exposing the key.
Does HCTI convert its stored PNG into PDF?
No. PDF is rendered and saved separately rather than being converted from the stored PNG.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
