---
title: ImageOptimizerOptions
summary: Options for the Fastly Image Optimizer, specified via the imageOptimizerOptions property in the Request constructor. See the Image Optimizer reference docs for detailed documentation on all options.
url: https://www.fastly.com/documentation/reference/compute/sdks/javascript/js-compute/image-optimizer/interface.ImageOptimizerOptions/
---

**Kind:** Interface  
**Module:** [image-optimizer](https://www.fastly.com/documentation/reference/compute/sdks/javascript/js-compute/image-optimizer/)  
**Package:** @fastly/js-compute 4.0.1  
**Since:** 3.36.0  
**Source:** https://github.com/fastly/js-compute-runtime/blob/70cf30af4e657879b2d1e7eafab880e39e3a3f7d/types/image-optimizer.d.ts#L289

Options for the Fastly Image Optimizer, specified via the `imageOptimizerOptions` property
in the `Request` constructor. See the
[Image Optimizer reference docs](https://www.fastly.com/documentation/reference/io/) for
detailed documentation on all options.

```js
import { Format, Orient, CropMode, Region } from 'fastly:image-optimizer';

async function handleRequest(event) {
  return await fetch('https://www.w3.org/Graphics/PNG/text2.png', {
    imageOptimizerOptions: {
      region: Region.UsEast,
      format: Format.PNG,
      bgColor: { r: 100, g: 255, b: 9, a: 0.5 },
      brightness: -20,
      orient: Orient.FlipVertical,
      crop: { size: { ratio: { width: 4, height: 3 } }, mode: CropMode.Safe },
    },
    backend: 'my-backend'
  });
}

addEventListener("fetch", (event) => event.respondWith(handleRequest(event)));
```

## Properties

### region

**Type:** `'us_east' | 'us_central' | 'us_west' | 'eu_central' | 'eu_west' | 'asia' | 'australia'`  
**Source:** https://github.com/fastly/js-compute-runtime/blob/70cf30af4e657879b2d1e7eafab880e39e3a3f7d/types/image-optimizer.d.ts#L293

Specify the region where image optimizations should occur. This is the only required option.

### auto

**Type:** `'avif' | 'webp'`  
**Flags:** optional  
**Source:** https://github.com/fastly/js-compute-runtime/blob/70cf30af4e657879b2d1e7eafab880e39e3a3f7d/types/image-optimizer.d.ts#L304

Enable optimization features automatically based on browser support.

### bgColor

**Type:** `Color`  
**Flags:** optional  
**Source:** https://github.com/fastly/js-compute-runtime/blob/70cf30af4e657879b2d1e7eafab880e39e3a3f7d/types/image-optimizer.d.ts#L308

Set the background color of an image.

### blur

**Type:** `number | Percentage`  
**Flags:** optional  
**Source:** https://github.com/fastly/js-compute-runtime/blob/70cf30af4e657879b2d1e7eafab880e39e3a3f7d/types/image-optimizer.d.ts#L313

Set the blurriness of the output image. Number values are in the range 0.5-1000;
percentage strings are also accepted.

### brightness

**Type:** `number`  
**Flags:** optional  
**Source:** https://github.com/fastly/js-compute-runtime/blob/70cf30af4e657879b2d1e7eafab880e39e3a3f7d/types/image-optimizer.d.ts#L317

Set the brightness of the output image (-100 to 100).

### bw

**Type:** `'threshold' | 'atkinson'`  
**Flags:** optional  
**Source:** https://github.com/fastly/js-compute-runtime/blob/70cf30af4e657879b2d1e7eafab880e39e3a3f7d/types/image-optimizer.d.ts#L321

Convert an image to black and white using a given algorithm.

### canvas

**Type:** `{ size: Size; position?: Position }`  
**Flags:** optional  
**Source:** https://github.com/fastly/js-compute-runtime/blob/70cf30af4e657879b2d1e7eafab880e39e3a3f7d/types/image-optimizer.d.ts#L325

Increase the size of the canvas around an image.

### contrast

**Type:** `number`  
**Flags:** optional  
**Source:** https://github.com/fastly/js-compute-runtime/blob/70cf30af4e657879b2d1e7eafab880e39e3a3f7d/types/image-optimizer.d.ts#L332

Set the contrast of the output image (-100 to 100).

### crop

**Type:** `{ size: Size; position?: Position; mode?: 'smart' | 'safe' }`  
**Flags:** optional  
**Source:** https://github.com/fastly/js-compute-runtime/blob/70cf30af4e657879b2d1e7eafab880e39e3a3f7d/types/image-optimizer.d.ts#L336

Remove pixels from an image.

### disable

**Type:** `'upscale'`  
**Flags:** optional  
**Source:** https://github.com/fastly/js-compute-runtime/blob/70cf30af4e657879b2d1e7eafab880e39e3a3f7d/types/image-optimizer.d.ts#L344

Disable features that are enabled by default.

### dpr

**Type:** `number`  
**Flags:** optional  
**Source:** https://github.com/fastly/js-compute-runtime/blob/70cf30af4e657879b2d1e7eafab880e39e3a3f7d/types/image-optimizer.d.ts#L348

Set the ratio between physical pixels and logical pixels (1-10).

### enable

**Type:** `'upscale'`  
**Flags:** optional  
**Source:** https://github.com/fastly/js-compute-runtime/blob/70cf30af4e657879b2d1e7eafab880e39e3a3f7d/types/image-optimizer.d.ts#L352

Enable features that are disabled by default.

### fit

**Type:** `'bounds' | 'cover' | 'crop'`  
**Flags:** optional  
**Source:** https://github.com/fastly/js-compute-runtime/blob/70cf30af4e657879b2d1e7eafab880e39e3a3f7d/types/image-optimizer.d.ts#L356

Set how the image will fit within the size bounds provided.

### format

**Type:** `'auto' | 'avif' | 'bjpg' | 'gif' | 'jpg' | 'jxl' | 'mp4' | 'pjpg' | 'pjxl' | 'png' | 'png8' | 'svg' | 'webp' | 'webpll' | 'webply'`  
**Flags:** optional  
**Source:** https://github.com/fastly/js-compute-runtime/blob/70cf30af4e657879b2d1e7eafab880e39e3a3f7d/types/image-optimizer.d.ts#L360

Specify the output format to convert the image to.

### frame

**Type:** `1`  
**Flags:** optional  
**Source:** https://github.com/fastly/js-compute-runtime/blob/70cf30af4e657879b2d1e7eafab880e39e3a3f7d/types/image-optimizer.d.ts#L379

Extract the first frame from an animated image sequence.

### height

**Type:** `number | Percentage`  
**Flags:** optional  
**Source:** https://github.com/fastly/js-compute-runtime/blob/70cf30af4e657879b2d1e7eafab880e39e3a3f7d/types/image-optimizer.d.ts#L383

Resize the height of the image, as integer pixels or a percentage string.

### level

**Type:** `string`  
**Flags:** optional  
**Source:** https://github.com/fastly/js-compute-runtime/blob/70cf30af4e657879b2d1e7eafab880e39e3a3f7d/types/image-optimizer.d.ts#L390

Specify the level constraints when converting to video. Must be one of:
`"1.0"`, `"1.1"`, `"1.2"`, `"1.3"`, `"2.0"`, `"2.1"`, `"2.2"`, `"3.0"`, `"3.1"`,
`"3.2"`, `"4.0"`, `"4.1"`, `"4.2"`, `"5.0"`, `"5.1"`, `"5.2"`, `"6.0"`, `"6.1"`,
or `"6.2"`.

### metadata

**Type:** `'copyright' | 'c2pa' | 'copyright,c2pa'`  
**Flags:** optional  
**Source:** https://github.com/fastly/js-compute-runtime/blob/70cf30af4e657879b2d1e7eafab880e39e3a3f7d/types/image-optimizer.d.ts#L394

Control which metadata fields are preserved during transformation.

### optimize

**Type:** `'low' | 'medium' | 'high'`  
**Flags:** optional  
**Source:** https://github.com/fastly/js-compute-runtime/blob/70cf30af4e657879b2d1e7eafab880e39e3a3f7d/types/image-optimizer.d.ts#L398

Automatically apply optimal quality compression.

### orient

**Type:** `'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8'`  
**Flags:** optional  
**Source:** https://github.com/fastly/js-compute-runtime/blob/70cf30af4e657879b2d1e7eafab880e39e3a3f7d/types/image-optimizer.d.ts#L402

Change the cardinal orientation of the image.

### pad

**Type:** `Sides`  
**Flags:** optional  
**Source:** https://github.com/fastly/js-compute-runtime/blob/70cf30af4e657879b2d1e7eafab880e39e3a3f7d/types/image-optimizer.d.ts#L406

Add pixels to the edge of an image.

### precrop

**Type:** `{ size: Size; position?: Position; mode?: 'smart' | 'safe' }`  
**Flags:** optional  
**Source:** https://github.com/fastly/js-compute-runtime/blob/70cf30af4e657879b2d1e7eafab880e39e3a3f7d/types/image-optimizer.d.ts#L410

Remove pixels from an image before any other transformations occur.

### profile

**Type:** `'baseline' | 'main' | 'high'`  
**Flags:** optional  
**Source:** https://github.com/fastly/js-compute-runtime/blob/70cf30af4e657879b2d1e7eafab880e39e3a3f7d/types/image-optimizer.d.ts#L418

Specify the H.264 profile class when converting to video.

### quality

**Type:** `number`  
**Flags:** optional  
**Source:** https://github.com/fastly/js-compute-runtime/blob/70cf30af4e657879b2d1e7eafab880e39e3a3f7d/types/image-optimizer.d.ts#L422

Optimize the image to the given compression level for lossy file formatted images (0-100).

### resizeFilter

**Type:** `'nearest' | 'bilinear' | 'linear' | 'bicubic' | 'cubic' | 'lanczos2' | 'lanczos3' | 'lanczos'`  
**Flags:** optional  
**Source:** https://github.com/fastly/js-compute-runtime/blob/70cf30af4e657879b2d1e7eafab880e39e3a3f7d/types/image-optimizer.d.ts#L426

Specify the resize filter used when resizing images.

### saturation

**Type:** `number`  
**Flags:** optional  
**Source:** https://github.com/fastly/js-compute-runtime/blob/70cf30af4e657879b2d1e7eafab880e39e3a3f7d/types/image-optimizer.d.ts#L438

Set the saturation of the output image (-100 to 100).

### sharpen

**Type:** `{ amount: number; radius: number; threshold: number }`  
**Flags:** optional  
**Source:** https://github.com/fastly/js-compute-runtime/blob/70cf30af4e657879b2d1e7eafab880e39e3a3f7d/types/image-optimizer.d.ts#L442

Set the sharpness of the output image.

- `amount`: `number` — Sharpening amount (0-10). 
- `radius`: `number` — Sharpening radius (0.5-1000). 
- `threshold`: `number` — Sharpening threshold (0-255).

### trim

**Type:** `Sides`  
**Flags:** optional  
**Source:** https://github.com/fastly/js-compute-runtime/blob/70cf30af4e657879b2d1e7eafab880e39e3a3f7d/types/image-optimizer.d.ts#L453

Remove pixels from the edge of an image.

### trimColor

**Type:** `Color | { color: Color; threshold?: number }`  
**Flags:** optional  
**Source:** https://github.com/fastly/js-compute-runtime/blob/70cf30af4e657879b2d1e7eafab880e39e3a3f7d/types/image-optimizer.d.ts#L458

Trim pixels from the image edges that match the specified color. Either a [Color](https://www.fastly.com/documentation/reference/compute/sdks/javascript/js-compute/image-optimizer/type.Color/)
value, or an object with `color` and optional `threshold` (0-1) properties.

### viewbox

**Type:** `1`  
**Flags:** optional  
**Source:** https://github.com/fastly/js-compute-runtime/blob/70cf30af4e657879b2d1e7eafab880e39e3a3f7d/types/image-optimizer.d.ts#L468

Remove explicit width and height properties in SVG output.

### width

**Type:** `number | Percentage`  
**Flags:** optional  
**Source:** https://github.com/fastly/js-compute-runtime/blob/70cf30af4e657879b2d1e7eafab880e39e3a3f7d/types/image-optimizer.d.ts#L472

Resize the width of the image, as integer pixels or a percentage string.