Ignoring Images

By default, all images in your documentation content are zoomable when using the Starlight Image Zoom plugin with a few exceptions.

Exceptions

The following images are ignored by the Starlight Image Zoom plugin:

• Icons rendered using the Starlight <Icon> component
• Images embedded in interactive elements such as buttons, links, etc.
• Images embedded in elements with the not-content CSS class

Ignoring specific images

The Starlight Image Zoom plugin will ignore images with the data-zoom-off attribute. You can add this attribute to any image to prevent it from being zoomable.

src/content/docs/example.mdx

---
title: My page title
---

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

<Image src={algorithm} alt="A book with a diagram on it" data-zoom-off />

Preview

Photo by Андрей Сизов on Unsplash