# Image
The *image* component is based on the standard [image](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) and [picture](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) elements. A **picture** element can be created by passing one or more [source](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source) elements as `children` with a prop of `slot="source"`. Consult [MDN](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) for more information on responsive images.

## Accessibility
An *image* must **always** have an `alt` attribute. Not only does it give the *image* meaning for non-sighted users, but if the *image* fails to load, the `alt` text will be displayed instead. Always use descriptive `alt` text that concisely describes what the *image* conveys. Make sure you are communicating what the *image* is telling you visually. Usage of other aria attributes such as `aria-describedbby` or `aria-labelledby` are helpful when a shorter description is not adequate or the *image* is too complex to easily describe. Learn more about appropriate usage from [W3C](https://www.w3.org/TR/WCAG20-TECHS/aria#ARIA15). If the *image* is purely for visual decoration and does not convey any meaningful information, such as an icon to reinforce adjacent text, then you should set the `alt` attribute to an empty string: `alt=""` or/and add `role="presentation"`.