# Images

> Learn how to add images to prompts for AI models supporting visual inputs, including image formats and usage.

Images can be added to the prompt for models that support this feature (like `gpt-4o`). Use the `defImages` function to declare the images. Supported images will vary with models but typically include `PNG`, `JPEG`, `WEBP`, and `GIF`. Both local files and URLs are supported.

```js
defImages(env.files);
```

[Play](https://youtube.com/watch?v=XbWgDn7NdTg)

Read more about [OpenAI Vision](https://platform.openai.com/docs/guides/vision/limitations).

## URLs

[Section titled “URLs”](#urls)

Public URLs (that do not require authentication) will be passed directly to OpenAI.

```js
defImages(
  "https://github.com/microsoft/genaiscript/blob/main/docs/public/images/logo.png?raw=true",
);
```

Local files are loaded and encoded as a data uri.

## Buffer, Blob, ReadableStream

[Section titled “Buffer, Blob, ReadableStream”](#buffer-blob-readablestream)

The `defImages` function also supports [Buffer](https://nodejs.org/api/buffer.html), [Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob), [ReadableStream](https://nodejs.org/api/stream.html).

This example takes a screenshot of bing.com and adds it to the images.

```js
import { browse } from "@genaiscript/plugin-playwright";
const page = await browse("https://bing.com");
const screenshot = await page.screenshot(); // returns a node.js Buffer
defImages(screenshot);
```

## Detail

[Section titled “Detail”](#detail)

OpenAI supports a “low” / “high” field. An image in “low” detail will be downsampled to 512x512 pixels.

```js
defImages(img, { detail: "low" });
```

## Cropping

[Section titled “Cropping”](#cropping)

You can crop a region of interest from the image.

```js
defImages(img, { crop: { x: 0, y: 0, w: 512, h: 512 } });
```

## Auto crop

[Section titled “Auto crop”](#auto-crop)

You can also automatically remove uniform color on the edges of the image.

```js
defImages(img, { autoCrop: true });
```

## Greyscale

[Section titled “Greyscale”](#greyscale)

You can convert the image to greyscale.

```js
defImages(img, { greyscale: true });
```

## Rotate

[Section titled “Rotate”](#rotate)

You can rotate the image.

```js
defImages(img, { rotate: 90 });
```

## Scale

[Section titled “Scale”](#scale)

You can scale the image.

```js
defImages(img, { scale: 0.5 });
```

## Flip

[Section titled “Flip”](#flip)

You can flip the image.

```js
defImages(img, { flip: { horizontal: true; vertical: true } })
```

## Max width, max height

[Section titled “Max width, max height”](#max-width-max-height)

You can specify a maximum width, maximum height. GenAIScript will resize the image to fit into the constraints.

```js
defImages(img, { maxWidth: 800 });
// and / or
defImages(img, { maxHeight: 800 });
```