Image

A responsive img that fills the box it is given.

A plain responsive <img>. It fills its container and covers it, so the surrounding box owns the aspect ratio — the image never decides its own shape. Lazy and async by default; passloading="eager" for something above the fold.

alt defaults to "", which marks the image decorative and hides it from assistive technology. That default is correct for the many frames where the photo repeats what the text beside it already says, and wrong everywhere else — a meaningful photo must be given a description. Alt text is a PIM field, not a rendering decision (ADR 0029); staging simply has none written yet.

Unlike Heading and Text this primitive has a<style>, so a parent's scoped rules do reach it.

In a ratio box

Both frames hold the same photo. The left is--ratio-photo (5:3, what the photos actually are); the right is a square, and the cover crop is what that costs.

Tone
Living room with a corner window over the courtyard.
Living room with a corner window over the courtyard.

Props

packages/primitives/src/Image.astro
PropTypeRequired
srcstringyes
altstring
loading"lazy" | "eager"
classstring