# Image

```astro
---
import pricingImage from "@/assets/images/pricing-9.jpg";
import { Image } from "@/components/starwind/image";
---

<Image src={pricingImage} alt="Pricing illustration" class="rounded-lg" />
```

## Installation

```bash
npx starwind@latest add image
```

## Usage

### General Notes

The `Image` component is a thin wrapper around Astro's built-in `<Image />` component. It provides:

- **Automatic size inference**: `inferSize` is enabled by default, so you don't need to specify width and height for remote images
- **Responsive defaults**: Images are set to `w-full h-auto` for responsive behavior
- **Optimized output**: Leverages Astro's image optimization pipeline

### Remote URL

You can use remote URLs directly. For deterministic builds, provide dimensions and disable remote
size inference.

```astro
---
import { Image } from "@/components/starwind/image";
---

<Image
  src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
  alt="Sleek gray design"
  width={800}
  height={533}
  inferSize={false}
  class="rounded-lg"
/>
```

> **Info:** This remote example supplies `width` and `height` with `inferSize={false}`, and the docs site does not authorize its host for Astro image optimization. The browser loads the image directly, so documentation builds do not depend on the remote image host. Authorize the host in Astro only when build-time optimization is required.

## Framework Availability
Image is available for Astro. React should use a framework-native equivalent.
Astro available; React framework native
| Framework | Status | Notes |
| --- | --- | --- |
| Astro | available | - |
| React | framework native | React projects should use the framework or app router image primitive instead. |
## API Reference
### Image
| Prop | Type | Required | Default | Kind | Description |
| --- | --- | --- | --- | --- | --- |
| `inferSize` | `boolean` | No | `true` | Wrapper prop | Infers missing image dimensions from the source when possible. |
- Inherits Partial<import("astro/types").ComponentProps<typeof AstroImage>>.

## Changelog

### v1.1.0

- Moved Image to contract-generated Astro registry output while preserving its `astro:assets` integration; Image remains Astro-only.

### v1.0.2 

- Refactor tailwind variants functions into separate `variants.ts` file

### v1.0.0

- Initial release with starwind v1.13.0