ComponentsLumos 0.0.1Open component
Img
An optimised image, with the srcset worked out for you.
Img wraps Astro's image handling with three presets, so the common cases do not require you to think about sizes strings or density descriptors. Imported images are resized, converted to modern formats and given a srcset automatically.
---
import Img from "@/components/Img.astro";
import photo from "@/assets/studio.jpg";
---
<Img src={photo} alt="The studio, looking north" />Props
| Prop | Type | Default | What it does |
|---|---|---|---|
srcrequired | ImageMetadata | string | None | An imported asset, a remote http(s) URL, or a path to a file in public/. Nothing renders without one. |
alt | string | None | What the image says. Leave it unset on a decorative image: it renders alt="", which is the correct way to say "skip this". |
variant | "full-width" | "constrained" | "densities" | "full-width" | How the srcset is generated. See below. |
sizes | string | None | How much of the viewport the image covers. Only on constrained. |
width | number | None | Overrides the width Astro reads from the file. Omit either dimension and it is inferred. |
height | number | None | Overrides the height. Omit either dimension and it is inferred. |
quality | "low" | "mid" | "high" | "max" | "high" | Output quality. With Astro's default image service these are 25, 50, 80 and 100. |
loading | "lazy" | "eager" | "lazy" | lazy waits until the image nears the viewport. Set eager for anything visible without scrolling. |
fetchPriority | "auto" | "high" | "low" | "auto" | How urgently to fetch it relative to everything else. Use high on the page's largest above-the-fold image, and only that one. |
transparent | boolean | false | For logos and cut-outs: fits the whole image in rather than cropping, and drops the loading tint. |
The three variants
| Name | Value | Notes |
|---|---|---|
full-width | default | Widths up to the source width, tracking the viewport. Right for anything that spans the page or a column of it. |
constrained | None | Widths up to the source width, capped by sizes. Right when the image sits in a column narrower than the viewport. |
densities | None | The display size at 1× and 2×. Right for a fixed-size image: an avatar, an icon, a logo. |
Above the fold
The largest image on the first screen should not be lazy-loaded: lazy loading delays exactly the image the browser is being measured on.
<Img src={hero} alt="" loading="eager" fetchPriority="high" />Where the file lives matters
An image imported from src/assets is optimised. A file in public/ is served exactly as it is: Astro never reads it, so it renders at its natural size and quality and sizes do nothing. An SVG is passed through untouched. In development the component warns when you pass a prop that cannot apply.
Alt text
If the image carries meaning (a chart, a photo the copy refers to, a screenshot), describe what it shows, not what it is. If it is decoration, leave alt out entirely. An empty alt is a decision; a missing one is a bug, and this component makes the decision the default.