# Image Centers an image, rounds its corners, and constrains its width to `size` — a percentage or pixel value applied at full screen width, that still shrinks on a narrower viewport like any other content: Example image ```mdx Example image ``` Set `caption` and the image gains a bordered, rounded card background — the image sits inset inside it, with the caption text centered underneath, inside the same card: Example image ```mdx Example image ``` **`Image` props** Image path or URL. Shown instead of `src` when the site is in dark mode; omit it and `src` is used in both modes. A CSS width (`"80%"`, `"480px"`, ...) applied at full screen width. Omit it and the image renders with no card background at all, exactly like before this prop existed. ## Zoom Every content image — one rendered by `Image` above, wrapped in a [Frame](/docs/content/components/frame/), a raw ``, or plain markdown `![]()` syntax — is clickable by default and opens in a fullscreen lightbox (click anywhere, press Esc, or use the close button to dismiss it). Add `noZoom` to opt a specific image out: Example image ```mdx Example image Example image ``` `noZoom` works the same way on a raw `` tag, not just `Image`. It doesn't apply to `Card`'s own image (its header art, not standalone content) or to `Icon`'s `src` variant (a small inline glyph).