Components

Image

Displays a static image

Overview

  • Available since: Orlando
  • A11Y: WCAG 2.1 AA

Image displays a static image for additional context, or for adding a visual representation of your content.

ServiceNow link
Image code documentation

UIB and developer guidance

Figma link
Image Figma component

Horizon components and styles library

Loading playground

When to use

Use image to complement your content, explain complex ideas visually, or make your pages more engaging. They're essential for stories, explanations, and branding.

When not to use

Avoid using images if they're irrelevant or low quality. Make sure every image serves a purpose and enhances the user experience.

Anatomy

Anatomy of the image component
  1. Container: Holds the image

Usage

Use the image component to place static images in your page.

Configurations

Learn how to customize image by configuring the available properties.

Plugin

To use this component, you must activate the com.servicenow_now_image plugin on your ServiceNow instance.

Presets and controllers

This component can contain preset configuration values. Presets automatically configure properties and event handlers for a component, making the component ready to work when you add it to a page. Presets are designed to suit a specific use case. However, you can override a preset with a custom configuration if you find it necessary for your design. Any preset values that you override aren’t upgraded when updates are available. If you don’t want to use the preset provided, select the option to configure the component manually. For more information, see Presets.

A preset connects to a controller, which acts as a data resource for the component. Controllers provide the configuration data and event binding the component needs to function in your experience. For more information, see Controllers.

You can apply one preset to a single instance of a component on a page. In the Tokyo release, there are 2 controllers available: the UI page controller and the Record controller. The Record controller retrieves metadata and configurations for the page definition. The UI page controller retrieves data related to the page behavior, such as component preference states and cross-component behaviors.

Select the image

Provide the URL to the image. Any file type using the element that is supported by web browsers is acceptable. Newer formats such as WebP and AVIF have better performance than the older PNG, JPEG, and GIF file formats.

Fit the image

Configure how you want the image to fit into it’s container. This is necessary when the height and width of the container differ from the image's dimensions. Be aware that your choice could affect the proportions of your image unless you fit it to scale.

Positioning the image

You can position the image in the center of the container (default) or align it to any of the corners.

Design recommendations

  • Display images at their intended aspect ratio to avoid distortion
  • Size the image to fit the desired display. The image should not appear blurry or pixelated
  • Be sensitive to load times, keep resolutions minimal when possible
  • Provide alternative text or a caption to ensure accessibility
  • Use context-relevant images
  • Provide a focal point and avoid images that require the user to search for the meaning

Usability

Image complies with all internationalization and accessibility requirements.

Accessibility

Learn how to access the actionable elements of image through screen readers.

Keyboard interactions

Arrow up, Arrow down, Arrow left, Arrow right: Used to access and read the ALT text attached to the image when the screen reader is in browse/read mode.
Note: Because the image component has no actionable elements in it, the tab key can’t select the component.

Screen readers

Screen readers can access the image component using browse/read mode.