HTML to WebP with Ruby

Generate WebP images with Ruby

No browser management required

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

Start free Read the docs

No browser processes to maintain
Consistent managed Chromium rendering
Complete Ruby request below

Social card with a fun SVG background and highlighted text. — Real HTML and CSS requests followed by their generated images.

Real HTML and CSS requests followed by their generated images.

Ruby workflow

Test the render before adding it to Ruby

Adjust the HTML and CSS here, then use the Ruby example below instead of recreating the browser-rendering workflow locally.

Content

Adjust how content is rendered by adjusting these settings.

Google Fonts ?

Google fonts to load. Separate multiple families with a pipe, such as Roboto|Open Sans, and set font-family in the CSS.

Selector ?

A CSS selector for an element in the HTML. We’ll crop the image to this specific element.

Transparent Background ?

Removes the background from the rendered image.

Image size & Viewport

By default images are cropped to the outermost HTML element or the chosen selector. Adjust viewport and sizing settings below.

Device Scale ?

Adjusts the screenshot pixel ratio. HTML and template renders default to 2; URL renders default to 1.

Viewport ?

Height

Width

Set the height and width of Chrome's viewport. Setting a viewport disables automatic cropping.

Landscape Viewport

Sets the emulated viewport orientation to landscape.

Mobile Viewport

Makes the emulated viewport behave like a mobile device and honor mobile viewport behavior.

Touch Viewport

Makes the emulated viewport report support for touch events.

Timing

By default the API generates a screenshot once everything is loaded. If the page executes JavaScript, you may want extra time before the image is rendered.

Ms Delay ?

Adds extra time for JavaScript to execute before the screenshot is taken. Start with 500 milliseconds if the page renders blank.

Max Wait Ms ?

Sets a limit on how long to wait before taking the screenshot when irrelevant content continues loading.

Render When Ready ?

Waits for the page to signal that the screenshot is ready instead of capturing after normal loading.

Browser Context

These settings impact how Chrome is started, giving you more control when taking screenshots.

Color Scheme ?

Set Chrome to render as if the user prefers light or dark mode.

Media Type

Set Chrome to render the page using print or screen media styles.

Timezone ?

Render the page with Chrome set to a specified timezone.

Managed rendering

Skip the fragile parts of native Ruby browser automation

Keep the application code focused on the request and response while HCTI manages Chromium, render isolation, retries, and hosted output.

No browser runtime to maintain

Keep Rails applications and background jobs free of separate browser processes and browser-specific deployment dependencies.

Predictable production rendering

Use managed browser versions, isolated render jobs, built-in timing controls, and consistent viewport behavior across deployments.

A usable image URL immediately

Receive the hosted .webp result without building a separate pipeline for temporary files, uploads, storage, and delivery.

HTML to image API

Send one Ruby request instead of running a browser

POST the HTML, CSS, and format from Ruby. HCTI handles the browser lifecycle and returns the generated .webp URL.

HTML and CSS input

Send complete markup and styles, including browser-supported fonts, images, SVG, and JavaScript.
WebP output

Set format to webp and use the hosted .webp 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

POST https://hcti.io/v1/image

{

"html": "<article class='card'>...</article>",

"css": ".card { display: grid; width: 1200px; }",

"format": "webp",

"viewport_width": 1200,

"viewport_height": 630

}

How it works

From markup to a finished WebP

Send HTML and CSS

Submit the content with format set to webp 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 .webp 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 WebP? Explore URL to WebP in Ruby

Lossless + transparent

.png

HTML to PNG

Crisp text, sharp UI details, and transparent backgrounds for designed graphics.

Explore PNG

Compact + universal

.jpeg

HTML to JPEG

Smaller files and broad compatibility for photography, previews, and content-heavy pages.

Explore JPEG

Document + printable

.pdf

HTML to PDF

Paginated documents with page sizing, margins, backgrounds, and print styles.

Explore PDF

Example code

Render HTML to WebP in Ruby

Copy a complete Ruby request. Authentication, HTML, CSS, viewport settings, and response handling are shown together.

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: "webp",
}

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

Read the Ruby Docs

Ready to render?

Create your first WebP from HTML and CSS

Send HTML and CSS to the API and receive a hosted .webp image URL without running browser infrastructure.

Start free Read the docs

Generate Images

Generate PDFs

Generate WebP images with Ruby

Test the render before adding it to Ruby

Content

Image size & Viewport

Timing

Browser Context

Verification unavailable

Skip the fragile parts of native Ruby browser automation

No browser runtime to maintain

Predictable production rendering

A usable image URL immediately

Send one Ruby request instead of running a browser

HTML and CSS input

WebP output

Viewport and crop controls

Page environment