KM Design System
  • KM Design System
  • Getting Started
  • Create An Article
    • Standard Template
    • FAQ Template
    • How-To Template
    • KCS Template
    • Known Error Template
    • Known Issue Template
    • Service Description Template
    • What Is Template
  • Contribute To the Design System
  • Requesting Help
  • Writing
  • Accessible Writing
  • Fonts & Typefaces
  • Grammar & Mechanics
  • Headers
  • Meta Tags
  • Title Capitalization
  • Web Components
    • Accordion
      • How-To Apply Accordion
      • Accordion Bug
    • Horizontal Rule
    • Images
    • Links
      • How To Apply Link Variant
    • Tables
      • How To Create Accessible Tables
      • Styling & Formatting (coming soon)
  • Patterns
    • 3 Card Layout
      • Article 3 Card
      • Category Desc 3 Card
  • Release Notes
    • March 18, 2021 Release
Powered by GitBook
On this page
  • Principles
  • Alt Text
  • Sizes

Was this helpful?

  1. Web Components

Images

PreviousHorizontal RuleNextLinks

Last updated 4 years ago

Was this helpful?

Principles

Images can aid in communicating your message or facilitate your instructions. They can provide clarity to abstract ideas or messages and can show users how to complete a task.

Alt Text

Alt text is a way to label images, and it's especially important for people who can’t see the images on our website. Alt text should describe the image in a brief sentence or two.

Sizes

Your images should be pre-sized to exact dimensions prior to uploading them into an article. This ensures that your user will see your content as you intended and reduce the load times of your knowledge article.

To ensure a seamless experience across all devices and platforms, it is a good practice to use standard image ratios: 16:9, 3:4, 1:1.

Use the tabs below for sample image sizes in each ratio.

800px width, 450px height

This is the largest width you can use for any image. KB articles have a max-width of 800px that your image cannot exceed.

Use case

400px width, 225px height

This size is ideal for supplementing content and side-by-side comparisons.

Use Case

For more on how and why we use alt text, read the section.

Do not depend on the ServiceNow editor to resize your images for you. If you do not have editing capabilities, for assistance.

Writing for Accessibility
submit a ticket
A sample of 800px X 450px
400x225 Sample