HTML to JPG API

Convert HTML files to JPG images using our HTML to JPG API.

Why Nutrient DWS API?

SOC 2 Compliant

Build the workflows you need without worrying about security. We don’t store any document data, and our API endpoints are served through encrypted connections.

Easy Integration

Get up and running in hours, not weeks. Access well-documented APIs and code samples that make integrating with your existing workflows a snap.

Robust and Flexible

With access to more than 30 tools, you can process one document in multiple ways by using API credits. Generate PDF from HTML, convert Word, Excel, PowerPoint and image files to PDF, and more.

Simple and Transparent Pricing

Select a package that suits your needs according to the number of credits you wish to spend. Each API tool and action has a specific credit cost.

Try It Out

This example will convert your uploaded HTML file to a JPG image.

Use Your Free API Calls

Sign up and receive 100 credits for free, or log in to automatically add your API key to sample code. If you are not sure how credits are consumed read more in our pricing documentation , or check out this guide on calculating credit usage.

Add a File

Add an HTML file named index.html to your project folder. You can also use our sample file. The file name is case sensitive. Make sure the file name matches the file name in the sample code.

Run the Code

Copy the code and run it from the same folder you added the files to. For more information, see our language-specific getting started guides.

View the Results

Open image.jpg in your project folder to view the results.

Shell Shell (Windows) Java C# JavaScript Python PHP HTTP

curl -X POST https://api.nutrient.io/build \
  -H "Authorization: Bearer your_api_key_here" \
  -o image.jpg \
  --fail \
  -F [email protected] \
  -F instructions='{
      "parts": [
        {
          "html": "document"
        }
      ],
      "output": {
        "type": "image",
        "format": "jpg",
        "dpi": 500
      }
    }'

curl -X POST https://api.nutrient.io/build ^
  -H "Authorization: Bearer your_api_key_here" ^
  -o image.jpg ^
  --fail ^
  -F [email protected] ^
  -F instructions="{\"parts\": [{\"html\": \"document\"}], \"output\": {\"type\": \"image\", \"format\": \"jpg\", \"dpi\": 500}}"

package com.example.pspdfkit;

import java.io.File;
import java.io.IOException;
import java.nio.file.FileSystems;
import java.nio.file.Files;
import java.nio.file.StandardCopyOption;

import org.json.JSONArray;
import org.json.JSONObject;

import okhttp3.MediaType;
import okhttp3.MultipartBody;
import okhttp3.OkHttpClient;
import okhttp3.Request;
import okhttp3.RequestBody;
import okhttp3.Response;

public final class PspdfkitApiExample {
  public static void main(final String[] args) throws IOException {
    final RequestBody body = new MultipartBody.Builder()
      .setType(MultipartBody.FORM)
      .addFormDataPart(
        "document",
        "index.html",
        RequestBody.create(
          MediaType.parse("text/html"),
          new File("index.html")
        )
      )
      .addFormDataPart(
        "instructions",
        new JSONObject()
          .put("parts", new JSONArray()
            .put(new JSONObject()
              .put("html", "document")
            )
          )
          .put("output", new JSONObject()
            .put("type", "image")
            .put("format", "jpg")
            .put("dpi", 500)
          ).toString()
      )
      .build();

    final Request request = new Request.Builder()
      .url("https://api.nutrient.io/build")
      .method("POST", body)
      .addHeader("Authorization", "Bearer your_api_key_here")
      .build();

    final OkHttpClient client = new OkHttpClient()
      .newBuilder()
      .build();

    final Response response = client.newCall(request).execute();

    if (response.isSuccessful()) {
      Files.copy(
        response.body().byteStream(),
        FileSystems.getDefault().getPath("image.jpg"),
        StandardCopyOption.REPLACE_EXISTING
      );
    } else {
      // Handle the error
      throw new IOException(response.body().string());
    }
  }
}

using System;
using System.IO;
using System.Net;
using RestSharp;

namespace PspdfkitApiDemo
{
  class Program
  {
    static void Main(string[] args)
    {
      var client = new RestClient("https://api.nutrient.io/build");

      var request = new RestRequest(Method.POST)
        .AddHeader("Authorization", "Bearer your_api_key_here")
        .AddFile("document", "index.html")
        .AddParameter("instructions", new JsonObject
        {
          ["parts"] = new JsonArray
          {
            new JsonObject
            {
              ["html"] = "document"
            }
          },
          ["output"] = new JsonObject
          {
            ["type"] = "image",
            ["format"] = "jpg",
            ["dpi"] = 500
          }
        }.ToString());

      request.AdvancedResponseWriter = (responseStream, response) =>
      {
        if (response.StatusCode == HttpStatusCode.OK)
        {
          using (responseStream)
          {
            using var outputFileWriter = File.OpenWrite("image.jpg");
            responseStream.CopyTo(outputFileWriter);
          }
        }
        else
        {
          var responseStreamReader = new StreamReader(responseStream);
          Console.Write(responseStreamReader.ReadToEnd());
        }
      };

      client.Execute(request);
    }
  }
}

// This code requires Node.js. Do not run this code directly in a web browser.

const axios = require('axios')
const FormData = require('form-data')
const fs = require('fs')

const formData = new FormData()
formData.append('instructions', JSON.stringify({
  parts: [
    {
      html: "document"
    }
  ],
  output: {
    type: "image",
    format: "jpg",
    dpi: 500
  }
}))
formData.append('document', fs.createReadStream('index.html'))

;(async () => {
  try {
    const response = await axios.post('https://api.nutrient.io/build', formData, {
      headers: formData.getHeaders({
        'Authorization': 'Bearer your_api_key_here'
      }),
      responseType: "stream"
    })

    response.data.pipe(fs.createWriteStream("image.jpg"))
  } catch (e) {
    const errorString = await streamToString(e.response.data)
    console.log(errorString)
  }
})()

function streamToString(stream) {
  const chunks = []
  return new Promise((resolve, reject) => {
    stream.on("data", (chunk) => chunks.push(Buffer.from(chunk)))
    stream.on("error", (err) => reject(err))
    stream.on("end", () => resolve(Buffer.concat(chunks).toString("utf8")))
  })
}

import requests
import json

response = requests.request(
  'POST',
  'https://api.nutrient.io/build',
  headers = {
    'Authorization': 'Bearer your_api_key_here'
  },
  files = {
    'document': open('index.html', 'rb')
  },
  data = {
    'instructions': json.dumps({
      'parts': [
        {
          'html': 'document'
        }
      ],
      'output': {
        'type': 'image',
        'format': 'jpg',
        'dpi': 500
      }
    })
  },
  stream = True
)

if response.ok:
  with open('image.jpg', 'wb') as fd:
    for chunk in response.iter_content(chunk_size=8096):
      fd.write(chunk)
else:
  print(response.text)
  exit()

<?php

$FileHandle = fopen('image.jpg', 'w+');

$curl = curl_init();

curl_setopt_array($curl, array(
  CURLOPT_URL => 'https://api.nutrient.io/build',
  CURLOPT_CUSTOMREQUEST => 'POST',
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_ENCODING => '',
  CURLOPT_POSTFIELDS => array(
    'instructions' => '{
      "parts": [
        {
          "html": "document"
        }
      ],
      "output": {
        "type": "image",
        "format": "jpg",
        "dpi": 500
      }
    }',
    'document' => new CURLFILE('index.html')
  ),
  CURLOPT_HTTPHEADER => array(
    'Authorization: Bearer your_api_key_here'
  ),
  CURLOPT_FILE => $FileHandle,
));

$response = curl_exec($curl);

curl_close($curl);

fclose($FileHandle);

POST https://api.nutrient.io/build HTTP/1.1
Content-Type: multipart/form-data; boundary=--customboundary
Authorization: Bearer your_api_key_here

--customboundary
Content-Disposition: form-data; name="instructions"
Content-Type: application/json

{
  "parts": [
    {
      "html": "document"
    }
  ],
  "output": {
    "type": "image",
    "format": "jpg",
    "dpi": 500
  }
}
--customboundary
Content-Disposition: form-data; name="document"; filename="index.html"
Content-Type: text/html

(document data)
--customboundary--

Using Postman? Download our official collection and start using the API with a single click. Read more

Your API Key

Rendering a Single Page

The default is to render the first page, but you can also render any other page of the document by adding the pages option.

This will render the fifth page (remember pages are indexed starting from 0):

"output": {
  "type": "image",
  "pages": {"start": 4, "end": 4},
  "format": "jpg",
  "width": 500
}

Rendering Multiple Pages

In addition to rendering just a single page (the default is the first), you can also render multiple pages at the same time. Simply add the pages option.

Note: You can only render 50 pages in a single request. Requesting more than 50 pages will result in a status 400 being returned.

The following example will return a ZIP file containing all pages:

"output": {
  "type": "image",
  "pages": {"start": 0, "end": -1},
  "format": "jpg",
  "width": 500
}

You can also render a subset of pages. This will render pages 2, 3, and 4:

"output": {
  "type": "image",
  "pages": {"start": 1, "end": 3},
  "format": "jpg",
  "width": 500
}

The files in the ZIP file will be named <page_number>.jpg

Controlling Image Dimensions

You can give the output images a specific width or height, or you can render them with a specific resolution. You can only choose one of those three options. Specifying more than one will result in a status 400 being returned.

Depending on which option you choose, one or both dimensions will be determined based on the dimensions of the page in the document. The following will go into detail about each of the three options.

Note: There is a limit to the final resolution of the resulting images. Any image is not allowed to be bigger than 34 million pixels (4960×7016px), regardless of the aspect ratio. Requesting a bigger image will result in a status 400 being returned.

You can specify the width . In this case, all rendered pages will have the same width, but they’ll have varying heights depending on the page dimensions in the document:

"output": {
  "type": "image",
  "format": "jpg",
  "width": 768
}

You can specify the height . In this case, all rendered pages will have the same height, but they’ll have varying widths depending on the page dimensions in the document:

"output": {
  "type": "image",
  "format": "jpg",
  "height": 1024
}

And finally, you can specify the dpi . In this case, the width and height of the rendered pages depends only on the page dimensions:

"output": {
  "type": "image",
  "format": "jpg",
  "dpi": 72
}