Presets

Crop

Keeps only a specific region of the image, and removes the rest.

Name

width

Type: number Default: Width of the image

height

Type: number Default: Height of the image

gravity

Type: string Default: center center | northwest | north | northeast | east | southeast | south | southwest | west

Crop requires at least width or height is required for a crop operation.

Example

Crop an image to 200x200 pixels and center the image on the largest face in the picture.

config.yml

presets:
  crop_200x200_face:
    steps:
      - $crop:
          width: 200
          height: 200
          gravity: face

Crop so that the image fits within a 200 pixels width and keep height from the original.

config.yml

presets:
  crop_200_width:
    steps:
      - $crop:
          width: 200

Fit

Fits the image into a box. Keeps aspect ratio and does not remove any parts of the image.

Name

width

Type: number Default: Width of the image

height

Type: number Default: Height of the image

Fit requires at least width or height is required for a crop operation.

Example

Fit an image within 200x200 pixels large area and keep aspect ratio.

config.yml

presets:
  fit_200x200:
    steps:
      - $fit:
          width: 200
          height: 200

Fill

Resizes the image to fill a bounding box. With aspect ratio intact and will remove parts of the image that are outside the box. Use gravity to move the image within the bounding box.

Name

width

Type: number Required

height

Type: number Required

gravity

Type: string Default: center center | northwest | north | northeast | east | southeast | south | southwest | west

Fill will not scale up images if they are smaller than the defined width and height of the preset.

Example

Creates an image with 200x200 pixels size and any bleeding pixels are cut off, if there is faces in the picture, center on the largest one found.

config.yml

presets:
  fill_200x200_face:
    steps:
      - $fill:
          width: 200
          height: 200
          gravity: face

Resize

Resizes images to the exact dimension specified, without keeping aspect ratio, and does not remove any part of the image.

Name

width

Type: number Required

height

Type: number Required

Resizes images to the exact dimension of 200x200 pixels.

config.yml

presets:
  resize_200x200:
    steps:
      - $resize:
          width: 200
          height: 200

Rotate

Rotates images to the angle specified or auto-rotate to correct orientation, will scale up and crop any bleed after rotation.

Name

angle

Type: number | 'auto' Default: 0 -180 - 180 | auto

Rotate image to correct orientation.

config.yml

presets:
  rotate_200x200_auto:
    steps:
      - $rotate:
          angle: auto

Rotate image, scale up and crop bleed.

config.yml

presets:
  rotate_200x200_15:
    steps:
      - $rotate:
          angle: 15

Format

Changes the format of the image. Conversion is implemented between all of SpaceChops supported formats.

Name

type	Type: string Required jpeg | png | gif | webp

Fill the area of 200x200 pixels with the image and format to jpeg if the original is another type.

config.yml

presets:
  fill_200x200:
    steps:
      - $fill:
          width: 200
          height: 200
      - $format:
          type: jpeg

Compress

Compresses the image (but does not strip metadata). If used together with Format, Compress should be placed after Format as it depends on the filetype.

Name

quality

Type: number Default: 100

lossy

Type: boolean Default: false

Fill an area of 200x200 pixels and compress the image using mozjpeg to a quality of 82, to make the images fast and SEO friendly.

config.yml

presets:
  fill_200x200:
    steps:
      - $fill:
          width: 200
          height: 200
      - $format:
          type: jpeg
      - $compress:
          quality: 82

Strip

Strips the image of all EXIF data.

Exif data is nowadays often quite large, and for images to be fast to load this should be removed.

Name

icc_profile

Should the ICC Profile be kept Type: boolean Default: true

Do avoid removing icc_profile, your images will look different on different types of screens.

Example

Fill an area of 200x200 pixels and strip all exif data so that the resulting image becomes fast to load and small in byte size. We also want to keep all the colors as they were made from the original.

config.yml

presets:
  fill_200x200:
    steps:
      - $fill:
          width: 200
          height: 200
      - $strip:
          icc_profile: jpeg