The image size parameters

Current version: 22.0

When using the JSS NextImage or Imagecomponents 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.

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.

RequestResponse

<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:

RequestResponse

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

Vue.js

In a JSS Vue.js application:

RequestResponse

<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:

RequestResponse

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

where the structure of the srcSetImageAttributes object is:

RequestResponse

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

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

RequestResponse

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

where the structure of the scaledImageParams object is:

RequestResponse

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

Do you have some feedback for us?

If you have suggestions for improving this article,