---
title: "The image size parameters"
slug: "the-image-size-parameters"
abstract: "Reference documentation for image size parameters you can use for responsive images"
---
# The image size parameters

When using the JSS `NextImage` or `Image`components provided by JSS for React, Angular, Vue.js and React Native applications, you can provide the image resizing parameters to the components.

Some of the image size parameters affect image aspects, such as sizing. Others apply to any media type, such as language, version, database, and cache functionality.

They are used to set the `srcset` attribute on the HTML `img` element or appended to the image source URL as query string parameters.

> [!important]
> Because JSS does not support security hashing of media URLs, you must [white-list these parameter sets on the server](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/media-handler.html "Media Handler").

The following table describes the supported parameters:

| Key | Description |
| --- | --- |
| `w` | Width in pixels. |
| `h` | Height in pixels. |
| `mw` | Maximum width in pixels. |
| `mh` | Maximum height in pixels. |
| `la` | Language (defaults to context language). |
| `vs` | Version (defaults to the latest version). |
| `db` | Database name (defaults to context database). |
| `bc` | Background color (defaults to black). |
| `as` | Allow stretch (as=1). |
| `sc` | Scale by floating point number (sc=.25 = 25%). |
| `thn` | Thumbnail (thn=1). |
| `dmc` | Disable media caching, both retrieval and storage (dmc=1). |

## Examples

The following examples show how you can use the `imageParams` property for various frameworks.

### React and Next.js

In a JSS React/Next.js application, with the `Image` component.

```xml
<Image
  field={props.fields.sample2}
  srcSet={[{ mw: 300 }, { mw: 100 }]}
  sizes="(min-width: 960px) 300px, 100px"
  className="img-fluid"
/>

```

In a JSS Next.js application, you can also use the `NextImage` component. If you want to provide image size parameters, you must also set the `unoptimized` property to `true`. For example:

```xml
<NextImage
  field={props.fields.image}
  unoptimized={true}
  imageParams={{ mw: 100, mh: 50 }}
  height="50"
  width="94"/>

```

### Vue.js

In a JSS Vue.js application:

```xml
<sc-image
  :media="fields.sample2"
  :srcSet="[{ mw: 300 }, { mw: 100 }]"
  sizes="(min-width: 960px) 300px, 100px"
  class="img-fluid"
/>

```

### Angular

In a JSS Angular application, you can use the parameters to set the `srcset` attribute on the image:

```xml
<img *scImage="rendering.fields.sample2; attrs: srcSetImageAttributes"
  sizes="(min-width: 960px) 300px, 100px"
  class="img-fluid"  />

```

where the structure of the `srcSetImageAttributes` object is:

```csharp
srcSetImageAttributes = {
    srcSet: [
      { mw: 300 },
      { mw: 100 }
    ]
  };

```

You can also use the image size parameters as URL parameters that append to the media URL:

```xml
<img *scImage="rendering.fields.sample2; editable: false; urlParams: scaledImageParams"
  height="50"
  width="94" />

```

where the structure of the `scaledImageParams` object is:

```csharp
scaledImageParams = {
    mw: 100,
    mh: 50,
 };

```