<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5HGSQD2L" height="0" width="0" style="display:none;visibility:hidden" title="GTM"></iframe>

Fluid Image

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

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.

The preview has been updated.

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.

Share

Best practices

Do

  • Use descriptive, friendly file names like "blue-square-business-cards.jpg" for better Google indexing.
  • Compress images to minimize file size and increase performance.

Don't

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

Props

FluidImage
This component is implemented using the <img /> as the root element. You can utilize the native attributes supported by <img /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.

Related

Was this page useful?

Thanks for your feedback!

Feel free to include your name if you wish to have a follow up conversation.


Published: Jan 31, 2022Last updated: Sep 18, 2024