Image

Extension of the native <img> and <source> elements. When loading images it is important to load assets matching the needed size, this is done using the loader prop and setting sizes.

Examples

Image with fixed size

View standalone

Code

<Image
  alt="Masked woman with sticker on arm"
  height={552}
  src="/design-system/docs/images/example-image.jpg"
  width={754}
/>

Image with responsive size

View standalone

Code

<Image
  alt="Masked woman with sticker on arm"
  height={552}
  sizes="100vw"
  src="/design-system/docs/images/example-image.jpg"
  width={754}
/>

Rounded

View standalone

Image with rounded corners

Code

<Image
  alt="Masked woman with sticker on arm"
  height={552}
  rounded
  src="/design-system/docs/images/example-image.jpg"
  width={754}
/>

With loader

View standalone

Pass loader function to resolve src to optimized URLs.

Code

<Image
  alt="Masked woman with sticker on arm"
  height={552}
  loader={function noRefCheck() {}}
  sizes="100vw"
  src="/design-system/docs/images/example-image.jpg"
  width={754}
/>

Usage within a picture element with image sources

View standalone

Using the <Box as="picture"> and <ImageSource> components to offer alternative versions of the image for art-direction. This will use the loader and generate a srcSet if specified. The <ImageSource>'s should go before the <Image>.

Code

<Box as="picture">
  <ImageSource
    height={512}
    loader={function noRefCheck() {}}
    media="(min-width: 512px)"
    sizes="100vw"
    src="/design-system/docs/images/example-512.svg"
    type="image/svg+xml"
    width={512}
  />
  <ImageSource
    height={375}
    loader={function noRefCheck() {}}
    media="(min-width: 375px)"
    sizes="100vw"
    src="/design-system/docs/images/example-375.svg"
    type="image/svg+xml"
    width={375}
  />
  <Image
    alt="Masked woman with sticker on arm"
    height={552}
    loader={function noRefCheck() {}}
    sizes="100vw"
    src="/design-system/docs/images/example-320.svg"
    width={754}
  />
</Box>

Props

Image

`loader`

ImageLoader

Default: "({ src }) => src"

`width`

number

`height`

number

`quality`

number

Quality passed to the loader

Default: 75

`rounded`

boolean

Corner style

Default: false

`fetchpriority`

"auto" | "high" | "low"

> Provides a hint of the relative priority to use when fetching the image. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img#attr-fetchpriority

`atoms`

Applies permitted design system styles. See styling documentation for more.

ImageSource

`loader`

ImageLoader

Default: "({ src }) => src"

`height`

number

`width`

number

`src`

string

`quality`

number

Default: 75

`atoms`

Applies permitted design system styles. See styling documentation for more.