Navigation: [/sitemap.md](/sitemap.md)

---
type: doc
title: Image
description: Deprecated image component guidance for Fulldev UI projects.
---

import { Icon } from "@/components/ui/icon"

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

<Alert variant="destructive">
  <Icon name="triangle-alert" />
  <AlertTitle>Deprecated component</AlertTitle>
  <AlertDescription>
    The Fulldev Image component is deprecated. Use Astro's built-in Image
    component directly for optimized project and remote images.
  </AlertDescription>
</Alert>

Fulldev UI no longer ships a separate Image abstraction. Astro's image pipeline
owns image optimization, responsive sizing, and format output better than a
library wrapper can.

## Recommended Usage

```astro
---
import { Image } from "astro:assets"

import heroImage from "@/assets/hero.jpg"
---

<Image
  src={heroImage}
  alt="Product dashboard"
  widths={[640, 960, 1280]}
  sizes="(min-width: 768px) 50vw, 100vw"
/>
```

Use block props for images rendered by installable Fulldev blocks. Keep image
files and project-specific media owned by the project that installs the block.