---
title: Image
description: Render optimized images with optional light and dark sources
type: reference
summary: Use the Geistdocs Image wrapper for documentation-aware Next.js images.
related:
  - /docs/components
  - /docs/syntax
---

import { Image } from "@vercel/geistdocs/components/image";

<div className="not-prose my-6 flex min-h-40 items-center justify-center rounded-lg border border-gray-400 bg-background-100 p-6">
  <Image
    alt="Geistdocs preview favicon"
    className="size-16"
    figureClassName="my-0 w-auto"
    height={64}
    src="/favicon.preview.ico"
    width={64}
  />
</div>

```tsx
import { Image } from "@vercel/geistdocs/components/image";

export function Screenshot() {
  return <Image alt="Project dashboard" src="/dashboard.png" />;
}
```

Pass `srcLight` and `srcDark` for theme-aware artwork. `Image` is also included in the default MDX component map.