Media - Figure: the Standard Image Component

Last Updated: August 12, 2026 | Audience: Developers

What It Is

Media - Figure is the standard image component for CAS.org. Use it for any content image. It replaces the older image components, which remain in production only because live instances still point at them.

Component ID: c99d58fe-14c6-c445-5be7-b41e9a85ac65. Group: Media.

What it gives you over a bare image element:

• Figure semantics — renders as figure and figcaption rather than a div with a paragraph under it, so the caption is programmatically associated with the image.
• Per-instance alt text — alt text is a prop, so the same component can carry different alt text on every placement instead of inheriting one value from the asset.
• Above-the-fold loading control — lets you opt a hero image out of lazy loading instead of lazy-loading everything by default and paying for it in LCP.
• Focal point — controls which part of the image survives a crop at narrow breakpoints.
• Caption and credit — separate fields, so a photographer or licence credit is not jammed into the caption sentence.
• Long description — for complex scientific figures where a reasonable alt string cannot carry the information. Charts, reaction schemes, and multi-panel figures need this.
• Client-First class names — consistent with the rest of the build. See Client-First v3 Class Naming.

Alt Text Rules

• Decorative images get empty alt text. WCAG requires alt="" on images that carry no information. Adding a description to a decorative image actively harms screen reader users, because it forces them to listen to something that tells them nothing.
• Informative images get a specific description. "Molecular structure of compound X" not "image" and not "chemistry."
• Don't start with "image of" or "photo of." Screen readers already announce that it is an image.
• If the image is a chart or a complex figure, put a short summary in alt text and the full description in the Long description field. Do not attempt a 300-word alt string.
• If the image is inside a link, the alt text describes the link destination, not the picture.

Choosing It Over the Legacy Components

Several image components are still registered and still hold live instances. For new work, use Media - Figure. Do not add instances of the others.

• Media - Visual image — 51 live instances.
• Media - Visual image - Duplicate — 42 live instances. A second near-identical definition of the same thing. Both are in production; neither can be retired until instances are repointed.
• Image — a generic image component with configurable aspect ratio.
• Media - Hexagon image — still the right choice when you specifically need the CAS hexagon mask. Not superseded.

Migration of the legacy instances is pending and has not started. Repointing an instance is not a rename; it changes what renders on a live page, so it happens deliberately, page by page, with the page reviewed afterwards. Do not bulk-swap.

Known Gaps

Two things on this component are not finished, and knowing about them saves an hour of confusion:

• Credit prop binding is not wired to the CMS. It works as a static per-instance value.
• Focal point wiring still needs Designer steps to finish. Verify the crop behaviour at narrow breakpoints rather than assuming it.

Image Specs

Format and dimension specs have not changed. See Image & Media Guidelines for the full workflow. Briefly: AVIF, feature images 1200–1920px wide, inline images 720–1440px, thumbnails 800–1200px, speaker and author photos 300–800px square.

Common Mistakes

• Describing a decorative image. Empty alt is the correct answer, not a fallback.
• Adding new instances of Media - Visual image. It exists for the instances already on live pages, not for new work.
• Leaving lazy loading on for a hero image. The above-the-fold control exists for exactly this case and it affects Largest Contentful Paint.
• Putting the credit inside the caption. They are separate fields and they render differently.
• Skipping the long description on a chart. If a sighted reader gets information from the figure that alt text cannot convey, the figure is inaccessible without it.