# @askrjs/vite/image

> Published API exports for @askrjs/vite/image.

Source: [https://askrjs.com/docs/reference/api/vite/image](https://askrjs.com/docs/reference/api/vite/image)

Status: stable. Packages: @askrjs/vite/image.

**Published packages are authoritative.** Examples may lag behind a published contract. When guidance differs, verify the exports and TypeScript declarations in your installed package, then file an issue.

## Exports

This entrypoint publishes 10 exports from the declarations shipped by @askrjs/vite.

### `image`

```ts
image: { (source: URL, options?: ImageOptions): ResponsiveImage; (source: ResponsiveImage): ResponsiveImage; }
```

Declare a source-controlled image for the opt-in Vite image pipeline.

### `Image`

```ts
Image: (props: ImageProps) => ReturnType<typeof jsxs>
```

Render responsive metadata as accessible picture/source/img markup.

### `ImageFit`

```ts
ImageFit: "inside" | "cover"
```

Resize strategy: `"inside"` fits within bounds, `"cover"` crops to fill.

### `ImageOptions`

```ts
ImageOptions: any
```

Per-declaration overrides for a single `image()` call.

- `widths`: widths?: readonly number[];

- `formats`: formats?: readonly ImageOutputFormat[];

- `quality`: quality?: ImageQualityOptions;

- `fit`: fit?: ImageFit;

- `aspectRatio`: Required output width/height ratio when fit is cover.

- `position`: Sharp-compatible crop position. Defaults to centre.

### `ImageOutputFormat`

```ts
ImageOutputFormat: "avif" | "webp" | "source"
```

Output image formats the pipeline can emit; `"source"` keeps the original format.

### `ImagePipelineOptions`

```ts
ImagePipelineOptions: any
```

Plugin-level defaults applied to every `image()` declaration.

- `widths`: widths?: readonly number[];

- `formats`: formats?: readonly ImageOutputFormat[];

- `quality`: quality?: ImageQualityOptions;

### `ImageProps`

```ts
ImageProps: any
```

Props accepted by the {@link Image} component.

- `alt`: alt: string;

- `image`: image: ResponsiveImage;

- `sizes`: sizes?: string | undefined;

### `ImageQualityOptions`

```ts
ImageQualityOptions: any
```

Per-format quality settings (0-100) used when encoding output images.

- `avif`: avif?: number;

- `webp`: webp?: number;

- `jpeg`: jpeg?: number;

- `png`: png?: number;

### `ResponsiveImage`

```ts
ResponsiveImage: any
```

Build-time-resolved metadata for a declared image, ready to render.

- `__askrImage`: readonly __askrImage: true;

- `src`: readonly src: string;

- `srcset`: readonly srcset?: string;

- `width`: readonly width: number;

- `height`: readonly height: number;

- `sources`: readonly sources: readonly ResponsiveImageSource[];

### `ResponsiveImageSource`

```ts
ResponsiveImageSource: any
```

A single `<source>` candidate within a {@link ResponsiveImage}.

- `type`: type: string;

- `srcset`: srcset: string;

## Documentation navigation

[Previous](https://askrjs.com/docs/reference/api/vite/server/index.md)