Image

An image is a graphical representation of something, such as photographs or illustrations. They are used to enhance visual appeal while engaging users more effectively. Images can be a powerful aid to understanding complex ideas.

Interactive Playground
Type
When to Use
Accessibility
Related Content

Interactive Playground

The Interactive Playground allows you to experiment with various image styles and features. Once you get the results you want, copy the HTML or React code provided and paste it into your application.

<img
  alt="Random image"
  src="https://source.unsplash.com/random/200x300"
  class="neo-img neo-img--fluid"
>

<Image
  src="https://source.unsplash.com/random/200x300"
  alt="Random image"
  thumbnail={false}
  fallback="https://via.placeholder.com/200x300"
/>

Type

There are two forms of an image; the photograph and the thumbnail. Each is used for a specific purpose.

Photograph

The marketing team has a large collection of approved photographs in their image library . Use these collections for your designs. Never use free or stock photos. If you need assistance, reach out to the marketing team.

A three-by-two arrangement of photo portraits of different people

Thumbnail

Thumbnail images are great for putting together a layout with placeholder instead of the final picture. The actual image is added later. The thumbnail provides a concept of what the final result will look like.

When to Use

Images are used only for public facing pages in the user interface. They should be used sparingly and should never be used to replace icons.

An image of a login screen for Avaya's CCaaS product

Accessibility

When using images, it is important to ensure that all users can understand, navigate and interact with the content. Accessibility means that we must design and build with all types of users in mind, including those with physical, motor or mental impairment.

Alternative Text

Alternative Text is embedded into the code. It provides a concise description of the important elements of each image. Alt text should convey the purpose and meaning of the image and how it relates to what is happening in the user interface.

Screen readers and other assistive technologies rely upon alt text to describe the image and meaning to users. Employ clear and specific language, and avoid vague or redundant descriptions.

Be sure to include all relevant information from the image in the alt text. If the color of a person’s shirt is not relevant to the situation, it can safely be left out of the alt text.

Decorative Images

If an image is purely decorative and conveys no meaningful information, such as a company logo, leave the alt text field empty. You can also use the aria-hidden attribute to indicate that the image should be ignored by screen readers. This helps to reduce clutter and allows assistive technologies to focus on important content.

Components

Avatar