React image component

The @responsive-image/react package provides a native React image component to render responsive images.

Installation

In your application's directory:

npm

npm install @responsive-image/react

yarn

yarn add @responsive-image/react

pnpm

pnpm add @responsive-image/react

Image component

The addon provides a <ResponsiveImage> component for rendering the set of images, taking local images or remote images as the src prop. Please refer to the main image component guide for all details and supported arguments!

Local images

To process local images you will need to setup one of the build plugins depending on your app's setup.

Remote images

The @responsibe-image/cdn package provides multiple helper functions to support remote images served from different image CDNs for use with the <responsive-image/> component.

Please refer to the image CDN guide for details on all supported options and examples of the respective image CDN.