Image

Image centers an image, rounds its corners, and sets its width. A plain Markdown image - ![](...) - is enough for most images; use Image for a size, a caption or a dark-mode version.

<Image src="/images/card-demo.svg" size="60%" alt="A card with lines of text and a button" />

size is the width on a wide screen; on a narrow one the image shrinks to fit.

Caption

With caption, the image sits in a bordered card, with the text under it:

<Image
  src="/images/card-demo.svg"
  size="60%"
  alt="A card with lines of text and a button"
  caption="Cards link to pages, with an icon or an image."
/>

Dark mode

srcDark is shown in place of src in dark mode - switch the theme in the topbar to see this logo change:

<Image src="/images/logo-light.svg" srcDark="/images/logo-dark.svg" size="320px" alt="Acme's logo" />

Zoom

Every image in a page opens larger when clicked - an Image, a Markdown image, an <img>, or an image in a Frame. Click, press Esc or use the close button to go back. Try it on the images above.

noZoom turns that off for one image - this one doesn’t open:

<Image src="/images/card-demo.svg" size="40%" alt="A card with lines of text and a button" noZoom />

<img src="/images/card-demo.svg" alt="A card with lines of text and a button" noZoom />

These don’t open larger either:

• An image inside a link - [![Dashboard](/images/dashboard.png)](/docs/dashboard/), an <a> around an <img>, a linked Card or Tile: clicking it follows the link.
• A component’s own picture - a Card’s image, an Icon, and anything in a Tile’s preview.

noZoom needs an <img> or Image tag - a Markdown image ![...](...) has no way to carry it.

How images load

Images are set up to load well, with nothing to do:

• An image loads when the reader gets near it, not with the page - a page with twenty screenshots opens as fast as one with none. The first image of a page is the exception: it’s usually at the top, so it loads with the page.
• The page keeps the image’s place while it loads. The build reads each image file’s width and height and writes them on the image, so the text below doesn’t jump when the image arrives.

This applies to Image, to Markdown images, and to <img> tags.

To load an image with the page - a large image at the top that isn’t the first one - set loading="eager":

<Image src="/images/hero.png" alt="The dashboard" loading="eager" />

Limits:

• The size is read for an image in your project, written with its path from the project folder (/images/dashboard.png), as PNG, JPEG, GIF, WebP or SVG. An image on another site gets no size - the text below it moves when it loads.
• An <img> with its own width or height keeps exactly those, and gets none from the build.
• Images are published as they are: they aren’t resized or converted. Save them at the size they’re shown - about 1,600 pixels wide is plenty for a full-width screenshot.

Props