Images are used to display graphics and custom icons.

Structure

The Image component renders a native HTML <img> element. When provided with multiple conditional sources (for color scheme or media query variants), it wraps the <img> in a <picture> element with one <source> per entry. The <picture> element uses display: contents so it introduces no layout or accessibility side effects and the <img> remains the only element visible to assistive technology.

Image has no inherent interactivity, keyboard handling, or focus behavior.

Effective alt text

Alt text is used as a fallback when an image can't be loaded due to network issues, errors, user settings, or for users of assistive technology. The Image component defaults to alt="", which marks it as decorative and hides it from the accessibility tree. This is the correct behavior for most images being used as decorative.

Images that aren't decorative are considered either informative or functional. Informative images require alt text that provides additional information or context. Functional images are used within interactive elements to describe what action will take place or the destination the element will link to. For more information on each, see W3C's articles for Informative Images and Functional Images.

Be mindful that alt text is required for the best user experience and accessibility. For more information on deciding when and how to use proper alt text, see W3C's An alt Decision Tree.

On this page