Demo

The following examples showcase the Starlight Image Zoom plugin in action.

Markdown

src/content/docs/example.md

---
title: My page title
---

![Ceramic mug on table](../../assets/mug.jpg)

The code above generates the following image on the page.

Photo by Robert Shunev on Unsplash

<Image />

src/content/docs/example.mdx

---
title: My page title
---

import { Image } from 'astro:assets'
import paper from '../../assets/paper.jpg'

<Image src={paper} alt="Brown pencil on white printing paper" />

Photo by Sven Mieke on Unsplash

<Picture />

src/content/docs/example.mdx

---
title: My page title
---

import { Picture } from 'astro:assets'
import blackboard from '../../assets/blackboard.jpg'

<Picture src={blackboard} formats={['avif', 'webp']} alt="A blackboard with a bunch of diagrams on it" />

Photo by Dan Cristian Pădureț on Unsplash