---
title: "width and height parameters"
description: "Set viewport width and height for your render. Default 1440x900, range 1 to 5000."
url: "https://html2img.com/docs/parameters/dimensions/"
---

# Width & Height Parameters

The `width` and `height` parameters control the viewport dimensions for capturing images.

> **Note**
>
> When [`format`](https://html2img.com/docs/parameters/format/) is `pdf`, content reflows to A4 pages and `width`/`height` have no visible effect on their own. The exception is [`scale_to_fit`](https://html2img.com/docs/parameters/scale-to-fit/): with it enabled, content is laid out at your requested `width` and then scaled down to fit the page.

## Specifications

### Width Parameter

| Property | Value |
|----------|-------|
| Type | integer |
| Required | No |
| Default | 1440 |
| Range | 1-5000 |
| API | Both HTML/CSS and Screenshot APIs |

### Height Parameter

| Property | Value |
|----------|-------|
| Type | integer |
| Required | No |
| Default | 900 |
| Range | 1-5000 |
| API | Both HTML/CSS and Screenshot APIs |

## Description

These parameters determine:
- The viewport size for rendering content
- The dimensions of the output image (unless `fullpage` is true)
- The responsive breakpoint for the content

> **Warning**
>
> When using DPI values greater than 1, the actual rendered dimensions will be multiplied by the DPI value. For example:
> - With width=1920 and DPI=2, the final image will be 3840px wide
> - With height=1080 and DPI=2, the final image will be 2160px tall
>
> To maintain specific output dimensions when using higher DPI:
> - Either divide your desired dimensions by the DPI value
> - Or omit width/height to let the image scale naturally with DPI
>
> See the [DPI parameter](https://html2img.com/docs/parameters/dpi/) documentation for more details.

## Examples

### Basic Dimensions
```json
{
    "html": "<div>Responsive Content</div>",
    "width": 1920,
    "height": 1080
}
```

### Mobile Viewport
```json
{
    "url": "https://example.com",
    "width": 375,
    "height": 667
}
```

### Tablet Viewport with Custom Height
```json
{
    "html": "<div>Tablet Content</div>",
    "width": 768,
    "height": 1024,
    "dpi": 2
}
```

> **Warning**
>
> Larger dimensions increase processing time and memory usage. For high-resolution images, consider using a smaller viewport with a higher DPI value instead of very large dimensions.

## Common Viewport Sizes

Here are some common viewport sizes you might want to use:

| Device | Width | Height |
|--------|--------|---------|
| Desktop HD | 1920 | 1080 |
| Desktop | 1440 | 900 |
| Laptop | 1366 | 768 |
| Tablet | 768 | 1024 |
| Mobile | 375 | 667 |

> **Note**
>
> When using responsive designs, test your content at multiple viewport sizes before locking in a render width.

## Common values

- **1200x630** - Open Graph image, Twitter, LinkedIn share previews.
- **1080x1080** - Instagram square post.
- **1280x720** - YouTube thumbnail.
- **1920x1080** - Desktop screenshot.
- **375x667** - Mobile screenshot at iPhone SE viewport.
- **1240x1754** - A4 portrait at 150 DPI, useful for invoices and certificates.

## When to use

Set `width` and `height` whenever you need a specific output size, especially for social platforms with rigid spec requirements. Leave them at the defaults (1440x900) for general-purpose renders. For full-page captures, set `width` to the device width and use [fullpage](https://html2img.com/docs/parameters/fullpage/) to let the height grow.

## Common mistakes

- **Forgetting that DPI multiplies dimensions.** A `width: 1200` with `dpi: 2` produces a 2400px file. Either divide your target by the DPI or omit `width` and let DPI scale.
- **Setting unusually large dimensions.** A 5000x5000 render eats memory and time. Prefer a smaller viewport with higher DPI when you want a sharp file.

See also: [twitter-embed example](https://html2img.com/docs/examples/twitter-embed/), [product-card example](https://html2img.com/docs/examples/product-card/), [invoice-receipt example](https://html2img.com/docs/examples/invoice-receipt/), and the [getting started guide](https://html2img.com/docs/getting-started/).

## Templates that use this parameter

These templates render at platform-specific dimensions, so the width and height parameters are central to the design:

- [Open Graph image template](https://html2img.com/templates/open-graph-image/)
- [Twitter post template](https://html2img.com/templates/twitter-post/)
- [Instagram story template](https://html2img.com/templates/instagram-story/)
- [YouTube thumbnail template](https://html2img.com/templates/youtube-thumbnail/)
- [Pinterest pin template](https://html2img.com/templates/pinterest-pin/)