Image parameters in Content SDK apps

When using the NextImage component (imported from @content-sdk\next) or the Image component (imported from @content-sdk\react), you can apply image parameters. Some of these parameters affect visual aspects of the rendered image, such as sizing. Others provide more generic metadata, such as the language or version of the image.

These parameters either appear in the srcset attribute of the rendered HTML img element or are appended to the image's source URL as query string parameters.

Here is a list of parameters you can define as part of the imageParams object for both Image and NextImage components:

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`	Whether to allow the image to stretch or upscale beyond its original size (`1` to enable stretching, `0` to disable it).
`iar`	Whether to ignore the image's aspect ratio when resizing it (`1` to ignore the aspect ratio, `0` to preserve it).
`sc`	Scale by floating point number (for example, `sc=.25` scales the image to 25% of its normal size).
`thn`	Whether to return a version of the image optimized for use as a thumbnail (`1` to return the thumbnail, `0` to return the regular image).
`dmc`	Whether to disable media caching for both retrieval and storage (`1` to disable media caching, `0` to enable it).

Note

The Image component also supports the standard srcSet property, which accepts a subset of imageParams keys (namely w, h, mw, mh, iar, as, and sc).

NextImage supports all next/image properties except src, and it does not support srcSet.

Examples

The Image component

The following example demonstrates how to configure an Image component with the srcSet and sizes properties. This example renders a responsive image with server-side resizing, and the parameters provided appear as corresponding srcset and sizes attributes on the resulting HTML img element.

For example:

RequestResponse

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

The NextImage component

This first example shows how to leverage server-side resizing by providing image size parameters to a NextImage component via the imageParams property. Specifying the size of the image like this means you also need to set the Next.js unoptimized property to true.

RequestResponse

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

This second example uses priority to specify that the image has high priority and must be preloaded rather than lazy-loaded, and the fill property to cause the image to fill the parent element instead of having a specific width or height.

RequestResponse

<NextImage
  field={props.fields.image}
  sizes="(min-width: 960px) 300px, 100px"
  fill={true}
  priority={true}
/>

Do you have some feedback for us?

If you have suggestions for improving this article,