---
title: Image
description: Use the image component to display a graphical representation.
keywords: ['illustration', 'picture', 'screenshot']
---

## Usage

Use an image to display a graphical representation, such as a photograph or a visual illustration, on a web page. Use it in combination with text to provide context or additional information.

**✅ Do**

![](https://github.com/primer/brand/assets/912236/3ffc80cb-4d7d-4ef4-b66f-10e902d8f17c)

_Use an image to display a photograph in combination with descriptive text to provide context._

**❌ Don't**

![](https://github.com/primer/brand/assets/912236/6f29d849-9379-4327-a4aa-e1233e19861b)

_Don't use an icon as an image or illustration._

## Options

### Size

Choose the appropriate dimensions for the image to fit the desired layout using the `width/height` or the `aspect-ratio` properties. Avoid using images that are too large or too small for their intended display. When using images in a list, make sure they are all the same size to achieve a visually balanced layout.

**✅ Do**

![](https://github.com/primer/brand/assets/912236/7e9cf19c-1545-4b47-9ac8-0442050eb509)

_In a list or group, use images of the same size and aspect ratio._

**❌ Don't**

![](https://github.com/primer/brand/assets/912236/6efc49d3-f982-4f9f-9951-413a05f329cc)

_Don't use images of different sizes in the same section._

## Accessibility

Use the `alt` attribute to provide alternative text that is displayed if the image cannot be loaded or for accessibility purposes. It is important to include descriptive alternative text that conveys the meaning or content of the image. For more info, see [alternative text for images](https://primer.style/design/guides/accessibility/alternative-text-for-images).

Optimize your images to reduce file size without compromising quality. Smaller file sizes improve page loading speed.

## Related components

- [Card](../Card/index.md): to display navigational related content with higher visual weight.
- [River](../River/index.md): To display a list of content items with a visual asset.
- [Avatar](../Avatar/index.md): Use avatar to display a thumbnail representation of a person.
