URL to Image
The high resolution screenshot API you’ve been searching for.
Table of contents
- Creating an image from a URL
- Additional parameters
- Screenshot examples
- Screenshot part of a page with Selector
- CSS Selectors
- Pages requiring login or sign-in
- Need help getting started?
Creating an image from a URL
With the API, you can automate taking a screenshot of any website.
Pass the url param to the hcti.io/v1/image endpoint, and we’ll generate a screenshot for you. Here’s an example using cURL.
curl -X POST https://hcti.io/v1/image -u 'UserID:APIKey'
--data-urlencode url="https://google.com"
Don’t write code? Don’t worry, you can also do this with our Zapier integration.
Additional parameters
To customize your image further, you can take advantage of the following optional parameters.
| Parameter | |
|---|---|
| css | Inject additional CSS into the page. This is useful when you want to customize the webpage. Such as hiding specific elements (like popups or cookie banners). |
| viewport_width | Set the width of Chrome’s viewport. Defaults to 1366. |
| viewport_height | Set the height of Chrome’s viewport. Defaults to 768. |
| device_scale | This adjusts the pixel ratio for the device. Default: 1. Maximum 3. |
| full_screen | When set to true, the API will generate an image of the entire height of the page. |
| ms_delay | The number of milliseconds the API should delay before taking the screenshot. This is useful when waiting for JavaScript. If you need to use this, we recommend starting with a low number, such as 500. Increasing this value slows down the speed of your initial render. |
| selector | A CSS selector for an element on the webpage. We’ll crop the image to this specific element. For example: section#complete-toolkit.container-lg |
Screenshot examples
A full screenshot of stripe.com. With device scale set to 2, for a super high resolution image.
Screenshot part of a page with Selector
You can set a selector to target a specific part of the page.
For example, on Stripe’s homepage, there is an element with the CSS selector section#complete-toolkit.container-lg.
When passing that to the API, we crop to that element only.
CSS Selectors
To learn about CSS Selectors, we recommend this article. There are also Chrome extensions that detect them for you, we like using: Selector Gadget.
Pages requiring login or sign-in
Our API does not support pages that require login. The URL must be publicly accessible for us to generate an image of it. Supporting login is a common request, but we have chosen not to support it due to the risk of storing and transmitting credentials.
Some sites have the option of creating an “embed” of a page. This is the best option if it’s available to you. You can then use the embed’s HTML to generate a screenshot without login.
Need help getting started?
We’d be happy to walk you through getting started. Send us an email: support@htmlcsstoimage.com. We’re experts at generating images and will help you get going using the API.