Image
Always sized. Cover on thumbs. Fallback is an inset plus icon.
Spec
- Width/height attributes or
aspect-ratio. Never an unsized jump. - Thumbnails:
object-fit: cover. - Fallback: inset surface + reserved image-off treatment (icon).
srcset/sizeswhen you have more than one density.altfor content. Emptyalt=""when decorative.
Live demo
Runnable controls. Not a screenshot. Paper / Ink in the header recolors tokens.
Sized, srcset, cover thumb
Fallback inset + icon
Do / Don't
| Do | Don't |
|---|---|
| Reserve the box. | Let the layout jump when the file arrives. |
| Empty alt when decorative. | “Image” or the filename as alt. |
Motion
None on the image itself. Fallback swap is instant.
| Property | Duration | Easing | Trigger | Reduced motion |
|---|---|---|---|---|
| — | — | — | — | — |
Accessibility
- Alt describes the content, not the file.
- Fallback still exposes the alt (or a short “Couldn't load image”).
- Don't convey meaning only by the picture if a metric exists — put the number in text.
- These notes describe construction. They are not a guarantee of WCAG conformance. Validate with axe, keyboard, and operators. See Accessibility.