Skip to main content

Image

Last updated:
11/15/2023

Image allows a single image asset to be added to the page.

View in Storybook
A perfect pitbull puppy with baby blue eyes, a black nose, a white horn-shaped marking on his face, and a very curious ear, laying on a black couch with his front paws crossed.

Modifiers

With caption

Add an image caption when the image needs further explanation or description. Image captions should not be longer than two sentences. Descriptive image captions also help with SEO. Captions can be either left-aligned or center-aligned.

A perfect pitbull puppy with baby blue eyes, a black nose, a white horn-shaped marking on his face, and a very curious ear, laying on a black couch with his front paws crossed.

This is an image caption.

A perfect pitbull puppy with baby blue eyes, a black nose, a white horn-shaped marking on his face, and a very curious ear, laying on a black couch with his front paws crossed.

This is an image caption.

With decorative treatment

The decorative treatment style adds a hard gradient dropshadow to the image. The style is used to emphasize an image that is more important than other images on the page. The decorative treatment should be used to emphasize an image that is central to the content of the page. Do not overuse the decorative treatment.

A perfect pitbull puppy with baby blue eyes, a black nose, a white horn-shaped marking on his face, and a very curious ear, laying on a black couch with his front paws crossed.

This is an image caption.

A perfect pitbull puppy with baby blue eyes, a black nose, a white horn-shaped marking on his face, and a very curious ear, laying on a black couch with his front paws crossed.

This is an image caption.

Styles

1:1

The image aspect is fixed at 1:1. The image will be square, meaning the height and width are equal. This aspect ratio is generally used for product images and product cards.

A very cute grey pitbull with brown eyes, a black nose, a white horn-shaped marking on his face, and a very curious ear, wearing his buffalo plaid hoodie.

4:3

The image aspect ratio is fixed at 4:3. This aspect ratio is generally used for content cards.

A brown tabby cat with yellow eyes and majestic whiskers looming over his abode with a sense of superiority.

16:9

The image aspect ratio is fixed at 16:9. The image’s height is dependent on the image’s width. This aspect ratio is generally used for landscape images and content cards.

A perfect pitbull puppy with baby blue eyes, a black nose, a white horn-shaped marking on his face, and a very curious ear, laying on a black couch with his front paws crossed.

21:9

The image aspect ratio is fixed at 21:9. The image’s height is dependent on the image’s width. This aspect ratio is generally used for landscape images.

A mackerel tabby cat with yellow eyes and a red-tile nose eagerly trying to use a computer keyboard from underneath his owner's arm.

Usage

Refer to Web sustainability for more information on how images impact online waste.

Do:

  • Be mindful of image file size
    • Most images should be 100kb or less
    • Hero images should be 100kb-300kb
  • Use SVGs in place of images whenever possible
    • Refer to Images for more information on when to use SVGs
  • Use the decorative treatment style to emphasize important content

Don't:

  • Add image-based gradients, background colors, or decorative treatments into images
  • Use images of text or images with text — the only exception to this is labels on graphs and charts
  • Add unnecessary images
  • Overuse the decorative treatment style — limit to one per page

Content guidelines

Refer to Images for more information on writing effective alternative (alt) text.

Do:

  • Always add alternative text, unless the image is purely decorative
  • Use file names that are descriptive — this will help with SEO

Don't:

  • Add alt text to decorative images

Accessibility

This component passes AAA WCAG standards. However, changes made by the content owner or implementer could impact accessibility compliance. Be sure to follow code standards and content guidelines to ensure that this component is fully accessible.