Use images in JSS applications

Current version: 22.0

You can display images in your JSS applications using the <Image/> components provided by framework-specific SDKs. Images take their attributes, like other JSS components, from the field data provided to the parent component properties props.

All the sample applications come with an example configuration for whitelisting image resizing parameters that you can inspect in /sitecore/<app-name>.config, where <app-name> stands for the name of the application, as configured in the package.json file, in the config options. In most cases, you will require additional image sizes for your application.


If you are developing a Next.js application, you can use the NextImage component instead.

Specify query parameters for the media URL

When using the <Image /> component, you can use the imageParams property to attach parameters to Sitecore media URLs and affect various image aspects, such as sizing.

To specify query parameters for images rendered in your JSS application:

  1. In the /sitecore/<app-name>.config file, configure the Sitecore Media Handler to whitelist image sizing parameters.

  2. Specify the image sizing parameters in the imageParams property of the <Image/> component. For example:

      imageParams={{ mw: 100, mh: 50 }}

Render a responsive image

To render a responsive image with server-side resizing, you can use the srcSet and sizes properties of the <Image/> component. Defining these properties sets the srcset and sizes attributes on the image HTML element.

To set the srcset and sizes attributes on the rendered image:

  1. In the /sitecore/<app-name>.config file, configure the Sitecore Media Handler to whitelist image sizing parameters if you have not already done so.

  2. Specify Sitecore resizing parameters in the srcSet and sizes properties on the <Image/> component, such as w, h, mw, mh. For example:

      srcSet={[{ mw: 300 }, { mw: 100 }]}
      sizes="(min-width: 960px) 300px, 100px"

Optimize images

If you are using the Sitecore Media Library for images, you can use third-party tools to optimize images, such as Sitecore Dianoga or imgIX.

Do you have some feedback for us?

If you have suggestions for improving this article,