Fluid Image

A simple, responsive image that will maintain its aspect ratio and grow to fit the width of its container.

UsageGuidelinesAPI

Use Fluid Image...

For images with an unknown or undefined aspect ratio.

Don't use Fluid Image...

If you know the aspect ratio of the image. Use Responsive Image instead so that the space is reserved while the page loads.

ReactVanilla

<FluidImage src="/example-images/16x9.webp" alt="Alt text goes here" />

<FluidImage src="/example-images/16x9.webp" alt="Alt text goes here" />

<img
  src="/example-images/16x9.webp"
  alt="Alt text goes here"
  class="swan-fluid-image"
/>

<img
  src="/example-images/16x9.webp"
  alt="Alt text goes here"
  class="swan-fluid-image"
/>

Alt Text

All Fluid Images need an alt attribute of some kind. Refer to Alt Text guidelines.

Multiple source images

Use the srcset prop to set the corresponding srcset attribute on the underlying <img> tag, so that you can provide both hi-res and lo-res versions of an image. The browser will only download the relevant version for the user’s screen size, resulting in better page performance. Refer to srcset at MDN.

<FluidImage
  srcset="/example-images/16x9.webp 123w, /example-images/wide.webp 456w"
  sizes="(max-width 345px) 234px, 789px"
  src="/example-images/16x9.webp"
  alt="example image"
/>

<FluidImage
  srcset="/example-images/16x9.webp 123w, /example-images/wide.webp 456w"
  sizes="(max-width 345px) 234px, 789px"
  src="/example-images/16x9.webp"
  alt="example image"
/>

Best practices

Do

Compress images to minimize file size and increase performance.

Dont

Use unclear or generic file names like “biz_crd-99760.jpg”.

Props

See core props for additional props that can be applied to each of these components. Each component also accepts the React-equivalent native HTML attributes of the element it renders, unless a listed prop replaces one or a note says otherwise.

FluidImage

Renders <img>. No props beyond core props and native HTML attributes.