<Image
  width="300px"
  height="200px"
  src="https://picsum.photos/300/300/?random"
/>

Lazy-loading

For situations where an image is displayed below the fold, use the lazyLoad prop. This is an important performance optimization.

<Image
  lazyLoad
  width="300px"
  height="200px"
  src="https://picsum.photos/300/200/?random"
/>

Preventing right-click

We generally don't want artwork images to be downloaded by users. Mark an image with the preventRightClick prop, and users will be unable to right click to "Save Image".

<Image
  width="300px"
  height="200px"
  src="https://picsum.photos/300/200/?random"
  preventRightClick
/>

Responsive image recipe using an Image component

You may wish to include an image that responsively scales down with the width of the container. Try scaling the viewport smaller than the below image.

Please make sure you describe the image
<ResponsiveBox
  aspectWidth={700}
  aspectHeight={400}
  maxWidth={700}
  maxHeight={400}
>
  <Image
    width="100%"
    height="100%"
    src="https://picsum.photos/seed/hello/700/400"
    srcSet="https://picsum.photos/seed/hello/700/400 1x, https://picsum.photos/seed/hello/1400/800 2x"
    alt="Please make sure you describe the image"
  />
</ResponsiveBox>

You may wish to keep the image at 100% width, regardless of the original native width of the image.

Please make sure you describe the image
<ResponsiveBox aspectWidth={700} aspectHeight={400} maxWidth="100%">
  <Image
    width="100%"
    height="100%"
    src="https://picsum.photos/seed/hello/700/400"
    srcSet="https://picsum.photos/seed/hello/700/400 1x, https://picsum.photos/seed/hello/1400/800 2x"
    alt="Please make sure you describe the image"
  />
</ResponsiveBox>
On this page
Lazy-loading
Preventing right-click
Responsive image recipe using an Image component