imageOptimizerOptions

Options specified in the Request constructor for running the Fastly Image Optimizer. More detailed documentation on all Image Optimizer options is available in the Image Optimizer reference docs.

Parameters

All parameters other than region are optional.

• region: Region Where image optimizations should occur.
• auto: Auto Enable optimization features automatically.
• bgColor: Color Set the background color of an image.
• blur: number (0.5-1000) or Percentage Set the blurriness of the output image.
• brightness: number (-100-100) Set the brightness of the output image.
• bw: BWAlgorithm Convert an image to black and white.
• canvas: Object Increase the size of the canvas around an image.
  • size: Size
  • position (optional): Position
• contrast: number (-100-100) Set the contrast of the output image.
• crop: Object Remove pixels from an image.
  • size: Size
  • position (optional): Position
  • mode (optional): CropMode
• disable: Disable Disable functionality that is enabled by default.
• dpr: number Ratio between physical pixels and logical pixels.
• enable: Enable Enable functionality that is disabled by default.
• fit: Fit Set how the image will fit within the size bounds provided.
• format: Format 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 Resize the height of the image.
• level: String containing one of the allowed values Specify the level constraints when converting to video.
• metadata: Metadata Control which metadata fields are preserved during transformation.
• optimize: Optimize Automatically apply optimal quality compression.
• orient: Orient Change the cardinal orientation of the image.
• pad: Sides Add pixels to the edge of an image.
• precrop: Object Remove pixels from an image before any other transformations occur.
  • size: Size
  • position: Position
  • mode: CropMode
• profile: Profile 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 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 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 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
  • offsetX: number (interpreted as a percentage)
• Exactly one of:
  • y: integer (number of pixels) or 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.

Size

An Object containing either:

• absolute: Object
  • width: integer (number of pixels) or Percentage
  • height: integer (number of pixels) or Percentage
• ratio: Object
  • width: number
  • height: number

Examples

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'
  });
}