Image Preview

Images, like photos and illustrations, help reinforce a message and express your product or app's style.

Loading...
Open in CodeSandbox

Resources

Image storybook
React guidance
Image storybook
Web Components guidance

Layout

To give an image additional prominence, you can use the shadow prop to make it appear elevated. Too many shadows can cause a busy layout, so use them sparingly.

Image layout

Accessibility

Use the alt prop to provide a text attribution for images. Alt text should be brief but accurate—one or two sentences that describe the image and its context. If the image represents a function, be sure to indicate that. If it’s meant to be consumed with other objects on the page, consider that as well.

Don’t repeat information that’s on the page in alt text since screen readers will read it twice.

If images are solely decorative and don’t provide useful information or context, use role="presentation" to hide them from assistive technologies.