# Image


## Anatomy

```tsx
import { ChromaPanel } from "chroma-panel/panel";
import "chroma-panel/image";

<ChromaPanel modes={["image"]} imageOptions={{ maxColors: 12 }} />;
```

Large images are downscaled before they are read, so a 4000x3000 photo never
loads in full. A loaded image stays put when you close and reopen the picker, and
is released when you replace it, remove it, or leave the page.

`imageOptions` is shorthand. These two are the same:

```tsx
<ChromaPanel imageOptions={{ maxColors: 12 }} />
<ChromaPanel modeProps={{ image: { extractOptions: { maxColors: 12 } } }} />
```

Sampling takes a few milliseconds, so it runs on the main thread. If you raise
`size` a lot, move it to a worker. Build the URL in your own source so your
bundler resolves it:

```ts
const url = new URL("chroma-panel/image-worker", import.meta.url);
const worker = new Worker(url, { type: "module" });

await extractPalette(file, { size: 400, worker });
```

## API reference

<SignatureList names="extractPalette, quantize" />

## Mode id

`'image'`. List it in `modes` to show the tab, and in the order you want the tabs.