Setting height and width

Learn how to set the height and width for your images with the API.

Table of contents

Setting height & width in HTML
- Adding margins around the image
Setting the Viewport
Understanding high resolution (retina) images
Resize on the fly with query params
- Examples
Height and width for print
- A4 paper example
- Business card example
Need help?

Setting height & width in HTML

When sending an HTML snippet to the API it will auto crop your image to the height/width of the outermost HTML element.

The following example will generate a screenshot that is 400px wide and 200px tall.

Note: This works for HTML snippets only. Full HTML pages (has <html> and <body> tags) will not automatically crop.

Hello, world

<div style="height: 200px; width: 400px; border: 1px solid; text-align: center;">
  <h2>Hello, world</h2>
</div>

See how in the code sample we have set the height: 200px; width: 400px; in the outermost div.

Adding margins around the image

Margins are respected by the auto crop. To add some space around your image, you can add margin: 20px to the outermost element.

Height and width example

<div style="height: 200px; width: 400px; margin: 20px; border: 1px solid; text-align: center;">
  <h2>Height and width example</h2>
</div>

Setting the Viewport

When rendering your image, we use a live instance of Google Chrome running on one of our servers. In Chrome, the viewport is the total viewable area rendered by the browser.

By default, the viewport is set to: 1366x768. If you use the API to screenshot a url or send a full HTML page, you will get back an image rendered inside the default viewport.
You can customize this by adjusting the viewport_height and viewport_width parameters while creating your image.
We recommend using this for images rendered by url or when sending a full page. HTML snippets are better sized using automatic cropping and height/width in CSS.

Understanding high resolution (retina) images

Every device has a DPR (device pixel ratio). Higher quality screens will have a 2x or higher DPR. This means, for crisp/clear images, they need 2x or 3x as many pixels as a traditional, lower resolution screen.

We render HTML/CSS images @2X by default.
This results in a high quality image that will work well with any monitor.
When specifying 400px in your HTML, the resulting image will be 800px to account for high resolution screens.

Resize on the fly with query params

Every image generated by the API can also be adjusted on the fly with the height and width query params.

This is useful for displaying images at different resolutions without having to setup your own CDN.
When only one param is passed, the API will maintain the aspect ratio of the original image.

Examples

?width=400

Auto adjust the width of your image

?height=300

Auto adjust the height of your image

Height and width for print

Images generated by the API can also be used for print. Learn how to convert pixels to DPI (dots per inch).

Inches to pixels Formula:(DPI * (size in inches)) / 2 = pixels
DPI = Dots Per Inch. For a high quality print, you will want 300 DPI.

A4 paper example

For a 300 DPI print on A4 (8.27 x 11.69 inches) paper, you would do the following:

Width: (300 * 8.27) / 2 = 1240 pixels
Height: (300 * 11.69) / 2 = 1754 pixels

Business card example

For a 300 DPI business card (3.5 x 2 inches).

Width: (300 * 3.5) / 2 = 525 pixels
Height: (300 * 2) / 2 = 300 pixels

Once you have determined your height and width in pixels, you can then set your HTML to render the exact size you need. We recommend doing this by adding height and width style parameters to the outermost HTML element in your code.

Need help?

Talk to a human: support@htmlcsstoimage.com. We always respond within 24 hours. And often, even faster.