Use the image component to display a graphical representation.


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.


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


Don't use an icon as an image or illustration.



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.


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


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


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.

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

  • Card: to display navigational related content with higher visual weight.
  • River: To display a list of content items with a visual asset.
  • Avatar: Use avatar to display a thumbnail representation of a person.