---
hide_title: false
hide_table_of_contents: false
pagination_next: null
pagination_prev: null
---

# `imageOptimizerOptions` 

Options specified in the [`Request`](../globals/Request/Request.mdx) constructor for running the [Fastly Image Optimizer](https://docs.fastly.com/products/image-optimizer). More detailed documentation on all Image Optimizer options is available in the [Image Optimizer reference docs](https://www.fastly.com/documentation/reference/io/).

## Parameters

All parameters other than `region` are optional.

- `region`: _[`Region`](./Region.mdx)_ Where image optimizations should occur.
- `auto`: _[`Auto`](./Auto.mdx)_ Enable optimization features automatically.
- `bgColor`: _[`Color`](#color)_ Set the background color of an image.
- `blur`: _`number` (0.5-1000) or [`Percentage`](#percentage)_ Set the blurriness of the output image.
- `brightness`: _`number` (-100-100)_ Set the brightness of the output image.
- `bw`: _[`BWAlgorithm`](./BWAlgorithm.mdx)_ Convert an image to black and white.
- `canvas`: _`Object`_ Increase the size of the canvas around an image.
    - `size`: _[`Size`](#size)_
    - `position` (optional): _[`Position`](#position)_
- `contrast`: _`number` (-100-100)_ Set the contrast of the output image.
- `crop`: _`Object`_ Remove pixels from an image.
    - `size`: _[`Size`](#size)_
    - `position` (optional): _[`Position`](#position)_
    - `mode` (optional): _[`CropMode`](./CropMode.mdx)_
- `disable`: _[`Disable`](./Disable.mdx)_ Disable functionality that is enabled by default.
- `dpr`: `number` Ratio between physical pixels and logical pixels.
- `enable`: _[`Enable`](./Enable.mdx)_ Enable functionality that is disabled by default.
- `fit`: _[`Fit`](./Fit.mdx)_ Set how the image will fit within the size bounds provided.
- `format`: _[`Format`](./Format.mdx)_ Specify the output format to convert the image to.
- `frame`: _`number` (must have the value 1)_ Extract the first frame from an animated image sequence.
- `height`: _`integer` (number of pixels) or [`Percentage`](#percentage)_ Resize the height of the image.
- `level`: _`String` containing one of the [allowed values](https://www.fastly.com/documentation/reference/io/level/#allowed-values)_ Specify the level constraints when converting to video.
- `metadata`: _[`Metadata`](./Metadata.mdx)_ Control which metadata fields are preserved during transformation.
- `optimize`: _[`Optimize`](./Optimize.mdx)_ Automatically apply optimal quality compression.
- `orient`: _[`Orient`](./Orient.mdx)_ Change the cardinal orientation of the image.
- `pad`: _[`Sides`](#sides)_ Add pixels to the edge of an image.
- `precrop`: _`Object`_ Remove pixels from an image before any other transformations occur.
    - `size`: _[`Size`](#size)_
    - `position`: _[`Position`](#position)_
    - `mode`: _[`CropMode`](./CropMode.mdx)_
- `profile`: _[`Profile`](./Profile.mdx)_ Specify the profile class of application when converting to video.
- `quality`: _`integer` (1-100)_ Optimize the image to the given compression level for lossy file formatted images.
- `resizeFilter`: _[`ResizeFilter`](./ResizeFilter.mdx)_ Specify the resize filter used when resizing images.
- `saturation`: _`number` (-100-100)_ Set the saturation of the output image.
- `sharpen`: _`Object`_ Set the sharpness of the output image.
    - `amount`: _`number` (0-10)_
    - `radius`: _`number` (0.5-1000)_
    - `threshold`: _`integer` (0-255)_
- `trim`: _[`Sides`](#sides)_ Remove pixels from the edge of an image.
- `viewbox`: _`number` (must have the value 1)_ Remove explicit width and height properties in SVG output.
- `width`: _`integer` (number of pixels) or [`Percentage`](#percentage)_ Resize the width of the image.

## Types

### Color

Either:

- a 3 or 6 character hexadecimal string
- an `Object` containing:
    - `r`: _`integer` (0-255)_ Red component
    - `g`: _`integer` (0-255)_ Green component
    - `b`: _`integer` (0-255)_ Blue component
    - `a` (optional): _`number` (0.0-1.0)_ Alpha component 

### Percentage

A `String` containing a number suffixed with a percent sign (%).

### Position

An `Object` containing:

- Exactly one of:
    - `x`: _`integer` (number of pixels) or [`Percentage`](#percentage)_ 
    - `offsetX`: _`number` (interpreted as a percentage)_
- Exactly one of: 
    - `y`: _`integer` (number of pixels) or [`Percentage`](#percentage)_ 
    - `offsetY`: _`number` (interpreted as a percentage)_

### Sides

An `Object` containing `top`, `bottom`, `left`, and `right`, all of which are either an `integer` or [`Percentage`](#percentage).

### Size

An `Object` containing either:

- `absolute`: _`Object`_
    - `width`: _`integer` (number of pixels) or [`Percentage`](#percentage)_ 
    - `height`: _`integer` (number of pixels) or [`Percentage`](#percentage)_ 
- `ratio`: _`Object`_
    - `width`: _`number`_
    - `height`: _`number`_

## Examples

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

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

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
      },
      blur: '1%',
      brightness: -20,
      contrast: -20,
      height: 600,
      level: '4.0',
      orient: Orient.FlipVertical,
      saturation: 80,
      sharpen: { 'amount': 5, 'radius': 6, 'threshold': 44 },
      canvas: { 'size': { 'absolute': { 'width': 400, 'height': 400 } } },
      crop: { size: { absolute: { width: 200, height: 200 }, mode: CropMode.Safe } },
      trim: { top: 10, left: 10, right: 10, bottom: 10 },
      pad: { top: 30, left: 30, right: "1%", bottom: 30 }
    },
    backend: 'w3'
  });
}
```