# HTML to image

- Human page: https://happytails.ai/en/image-tools/html-to-image/
- Markdown: https://happytails.ai/en/image-tools/html-to-image.md
- Structured JSON: https://happytails.ai/agents/en/image-tools/html-to-image/index.json
- Visibility: public

## Tool capabilities

| Property | Value |
| --- | --- |
| Tool ID | `html-to-image` |
| Category | image-tools |
| Implementation | Registered implementation. Registration alone is not a production-quality guarantee. |
| Browser execution | Use the visible action or interactive controls. |
| Browser processing | Browser; see tool notes for network behavior. |
| HTTP API | Not callable through HTTP. |
| Browser-agent interface | run_current_tool |

### Implementation notes

Render simple HTML as a PNG entirely in your browser. Scripts, supplied CSS, images, and external resources are stripped. This is not a website screenshot tool.

### Inputs and settings

Text input: HTML source.

Example or placeholder shown in the interface (not a validated fixture):

```text
<p>Hello <strong>world</strong>.</p>
```

Paste HTML markup, not a website URL. Up to 1,000,000 characters. Review the settings before running.

| Setting | Meaning | Control type | Default | Constraints |
| --- | --- | --- | --- | --- |
| `width` | Image width (pixels) | number | 800 | min=100 max=1920 step=1 |
| `height` | Image height (pixels) | number | 600 | min=100 max=2000 step=1 |

### Browser-agent workflow

1. Open the human page in a browser that supports WebMCP.
2. Discover the interface exposed by that page; use its actual schema.
3. Select files on the page first when the tool requires files.
4. Call `run_current_tool` with valid input and settings.
5. Inspect the returned result or error and the displayed output. Retrieve files from the displayed download links.

Calls do not automatically copy or download results. Browser permissions still apply. Interface availability alone is not proof of successful execution.

### Planning specification

Isolated rendering, viewport selection and remote-resource limits.

This describes intended requirements. Use the implementation notes, interface schema and observed output to determine current support.

### Complete machine-readable capability record

```json
{
  "id": "html-to-image",
  "category": "image-tools",
  "built": true,
  "requirements": "Isolated rendering, viewport selection and remote-resource limits.",
  "implementation": {
    "fields": [
      {
        "key": "width",
        "label": "Image width (pixels)",
        "value": 800,
        "type": "number",
        "min": 100,
        "max": 1920,
        "step": 1
      },
      {
        "key": "height",
        "label": "Image height (pixels)",
        "value": 600,
        "type": "number",
        "min": 100,
        "max": 2000,
        "step": 1
      }
    ],
    "note": "Render simple HTML as a PNG entirely in your browser. Scripts, supplied CSS, images, and external resources are stripped. This is not a website screenshot tool.",
    "experience": {
      "automatic": false,
      "single": false,
      "label": "HTML source",
      "placeholder": "<p>Hello <strong>world</strong>.</p>",
      "help": "Paste HTML markup, not a website URL. Up to 1,000,000 characters. Review the settings before running.",
      "action": null
    },
    "mode": "explicit",
    "interactive": false
  },
  "execution": "Browser interface",
  "api": null,
  "browser_agent": {
    "supported": true,
    "name": "run_current_tool",
    "discovery": "WebMCP on the human page in a supporting browser",
    "verification": "See audit/API-AUDIT.md; availability is not verification"
  }
}
```

## Page guide

Isolated rendering, viewport selection and remote-resource limits..

## How to use HTML to image

1. Enter html source in the input field.
2. Review the settings, then choose Run HTML to image.
3. Review the result, then use Copy result or a download link when available.

## Working with html to image

An image conversion changes its file format; resizing changes pixel dimensions; compression changes how the image is stored. These operations can be combined, but each solves a different problem. Choose the dimensions needed by the destination before optimizing the final file size.

## Common questions

### Does converting JPG to PNG improve the original detail?

A lossless destination does not recover detail already discarded by a lossy source. It can avoid another lossy save, but it may also produce a larger file.

### What happens to transparent pixels?

That depends on the output format. Formats without transparency need a background color. Check edges around logos, product cutouts and text so that an unexpected background does not become part of the exported image.