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
- Setting the Viewport
- Understanding high resolution (retina) images
- Resize on the fly with query params
- Height and width for print
- 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
<body> tags) will not automatically crop.
<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
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
urlor send a full HTML page, you will get back an image rendered inside the default viewport.
You can customize this by adjusting the
viewport_widthparameters while creating your image.
We recommend using this for images rendered by
urlor 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
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.
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:
(300 * 8.27) / 2 = 1240 pixels
(300 * 11.69) / 2 = 1754 pixels
Business card example
For a 300 DPI business card (3.5 x 2 inches).
(300 * 3.5) / 2 = 525 pixels
(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
width style parameters to the outermost HTML element in your code.
Talk to a human: email@example.com. We always respond within 24 hours. And often, even faster.