Image
Use the image component to display a graphical representation.
On this page
On this page
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.
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.
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.
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.
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.
Optimize your images to reduce file size without compromising quality. Smaller file sizes improve page loading speed.