---
canonical: 'https://htmlcsstoimage.com/features/html-to-jpeg/ruby'
title: 'Convert HTML to JPEG in Ruby | HTML/CSS to Image'
description: 'Convert HTML and CSS to JPEG in Ruby. Generate a hosted .jpeg image URL.'
---

# Generate JPEG images in Ruby without managing Chrome

Render HTML and CSS from Ruby without installing Chrome, running Ferrum or Selenium, or building a separate image-storage pipeline.

## Why use the API instead of native Ruby browser automation?

- Keep Rails applications and background jobs free of separate browser processes and browser-specific deployment dependencies.
- Use managed browser versions, isolated render jobs, timing controls, and consistent viewport behavior across deployments.
- Receive a hosted .jpeg URL without building a separate pipeline for temporary files, uploads, storage, and delivery.

## Complete Ruby request

Use this request to render the example HTML and CSS as JPEG.

```ruby
require "json"
require "net/http"
require "uri"

request = {
    html: <<~'HCTI_HTML',
          <div class="card">
            <h1>Hello, world!</h1>
            <p>Generated from HTML and CSS.</p>
          </div>
          HCTI_HTML
    css: <<~'HCTI_CSS',
         .card {
           width: 480px;
           padding: 40px;
           background: #f0fdf4;
           color: #052e16;
           font-family: sans-serif;
         }
         HCTI_CSS
    format: "jpeg",
}

uri = URI("https://hcti.io/v1/image")
http_request = Net::HTTP::Post.new(uri)
http_request.basic_auth(ENV.fetch("HCTI_API_ID"), ENV.fetch("HCTI_API_KEY"))
http_request["Content-Type"] = "application/json"
http_request.body = JSON.generate(request)

response = Net::HTTP.start(
    uri.hostname,
    uri.port,
    use_ssl: true,
    open_timeout: 10,
    read_timeout: 30
) { |http| http.request(http_request) }

unless response.is_a?(Net::HTTPSuccess)
    raise format("HCTI request failed (%s): %s", response.code, response.body)
end

result = JSON.parse(response.body)
puts result.fetch("url")

```

## When to use JPEG

JPEG is a practical choice for photographic and content-rich images where broad compatibility and smaller files matter.

- **Smaller photo-heavy images**: Lossy compression keeps files compact when the rendered design contains photography, gradients, or detailed backgrounds.
- **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.

## API request

Send an authenticated `POST` request to `https://hcti.io/v1/image`. Include `html`, optional `css`, `format`, and any viewport or browser options required by the render.

```json
{
  "html": "\u003Carticle class=\u0027card\u0027\u003E...\u003C/article\u003E",
  "css": ".card { display: grid; width: 1200px; }",
  "format": "jpeg",
  "viewport_width": 1200,
  "viewport_height": 630
}
```

## Request workflow

1. **Send HTML and CSS** — Submit the content with format set to jpeg and any viewport or browser settings.
2. **Chromium renders the design** — The API loads the markup, styles, fonts, and assets in a managed browser environment.
3. **Use the .jpeg URL** — Embed the hosted result, download the file, or save it in your own storage and application records.

## Authentication and output handling

- Authenticate from trusted server-side code. Do not expose an API key in browser JavaScript, generated HTML, logs, or agent-visible output.
- Treat the returned URL as the generated `jpeg` resource. Download it, embed it, or copy it to configured storage as required by the workflow.
- Use viewport, selector, timing, and browser options when the default capture does not match the required dimensions or page state.
- If credentials are unavailable, ask the user to configure them securely before attempting an API request.

## Use through MCP

An MCP-compatible agent can connect to `https://mcp.hcti.io` with OAuth and use the connected HTML/CSS to Image account instead of handling an API key directly.

Ask the MCP tool to render the supplied HTML and CSS as JPEG, or specify `format: jpeg` explicitly when constructing the request.

- [Read the MCP integration documentation](https://docs.htmlcsstoimage.com/integrations/mcp/)

## Related conversions

- [URL to JPEG](https://htmlcsstoimage.com/features/url-to-jpeg/ruby.md): Capture a public webpage as JPEG instead of supplying HTML and CSS.
- [HTML to PNG](https://htmlcsstoimage.com/features/html-to-png/ruby.md): PNG preserves sharp edges, text, and transparency, making it ideal for interface captures and designed graphics.
- [HTML to WebP](https://htmlcsstoimage.com/features/html-to-webp/ruby.md): WebP combines modern compression with high visual quality, making it a strong default for images delivered on the web.
- [HTML to PDF](https://htmlcsstoimage.com/features/html-to-pdf.md): Generate paginated documents with page sizing, margins, backgrounds, and print styles.

## Reference links

- [API authentication and request documentation](https://docs.htmlcsstoimage.com/getting-started/using-the-api/)
- [MCP integration documentation](https://docs.htmlcsstoimage.com/integrations/mcp/)
- [Interactive HTML to JPEG page](https://htmlcsstoimage.com/features/html-to-jpeg/ruby)
- [Plans and current limits](https://htmlcsstoimage.com/pricing.md)