Skip to content
Design System
  • Home
  • Settings
  • Styles
  • Layouts
  • Components
  • Scripts
  • Templates
  • Access control banner
  • Activity
  • Archived content
  • Breadcrumbs
  • Cards
  • Collapsible containers
  • Columns
  • Content slider (carousel)
  • Crosslinks (You may also like)
  • Disclosure button
  • Evangelists
  • Fifty-fifty
  • Footer
  • Group list
  • Header
  • Hero
  • Image component
  • Members
  • Navigation
  • Navigation with new logo v1
  • Navigation with new logo v2
  • Notes
  • Pagination
  • Pre-footer
  • Quote component
  • RSS
  • Table of contents
  • Tag list
  • Text component
  • Translations
  • Video component

Image component

Open this Image component in a new tab

HTML:

<figure class="component component--image">
	<div class="l-frame l-frame--16-9">
		<img src="/dist/assets/images/temp-developers-920.jpg"
		     srcset="/dist/assets/images/temp-developers-360.jpg 360w, /dist/assets/images/temp-developers-580.jpg 580w, /dist/assets/images/temp-developers-920.jpg 920w, /dist/assets/images/temp-developers-1520.jpg 1520w"
		     sizes="100vw"
		     loading="lazy"
		     alt="A Macbook screen with code, as seen from over the developer's shoulder" />
	</div>
	<figcaption>
		<p>The figcaption is not a replacement for the image's <code>alt</code> attribute. It should be used for providing relevant supporting content.</p>
	</figcaption>
</figure>

¶Considerations

Note the use of the frame layout, to create the desired aspect ratio, and the loading="lazy" attribute on <img> for native lazy-loading. If you cannot anticipate the aspect ratio of images (e.g. if they are uploaded via a CMS without constraints on the image size), please omit the frame layout div.

¶Alternative text

Every instance of <img> must include the alt attribute. If the image is decorative it can be left blank. Otherwise, the alt requires a text value explaining the nature of the image for users of Assistive Technology. This alt decision tree is helpful for determining whether and how to provide alternative text.

Copyright © 2025 W3C - generated 10 Jan 2025, 12:43:28 UTC

Feedback is welcome and can be submitted as a GitHub issue.