Skip to main content

How-to

Crisp API - Convert and resize images​

Welcome to Squoosh API!

We’ll use a free sample image to test and see the differences in the output vs. original side by side.

Image resizing​

To resize an image, simply send one of the desired width or height option, or both. We would suggest to send either width or height and let the API calculate the ratio. You can choose to send both.

Note: Image resizing only works in tandem with an output_format.

Change the number of colors used in an image​

A great way to reduce an image’s size is to reduce the number of colors. This can be done using the num_colors parameter. num_colors can be any integer value between 1 and 255.

Dithering​

Mozjpeg​

Sample request to convert an image to Mozjpeg​

{"output_format": "mozjpeg", "quality":65, "smoothing": 10, "width": 450, "color_space": "grayscale"}

Mozjpeg is a modern lossless jpeg encoder that works with the vast majority of jpeg decoders out there. Supported parameters:

  • quality - not required, between 0 and 100, default: 75
  • smoothing - not required, between 0 and 100, default: 0
  • color_space - not required, values: ["grayscale", "rgb", "ycbcr"] default ycbcr
  • width - not required, default: original
  • heightnot required, default: original
  • num_colors - not required, default: 255
  • dithering - not required, default: 1

Mozjpeg quality setting​

  • Min value: 0
  • Max value: 100
  • Default: 75

The quality parameter is by default set to 75. We recommend starting with 75 as it yields the best quality to compression ratio. During testing, we found out converting jpegs or pngs to mozjpeg with "quality":75 reduced file size by up to 90%, while the difference in quality between the original and the mozjpeg version were negligible.

Mozjpeg smoothing​

  • Min value: 0
  • Max value: 100
  • Default: 0 Image smoothing is used to remove noise and sharpness from an image. Smoothing is recommended to counter balance the image degradation from heavy compression.

By default, the smoothing is set to 0 but we encourage at least "smoothing": 10 if quality is lower than 75.

Mozjpeg colorspace​

  • Values: ["grayscale", "rgb", "ycbcr"]
  • Default: "ycbcr"

Convert any image to WebP​

WebP has been around since 2010 but it has become extremely popular recently , with 70% of browser supporting it as of 2022. WebP is 30% smaller on average than its jpeg counterpart, but the biggest advantage is using it as a replacement for PNG's, with WebP supporting lossless transparency (also known as the alpha channel) with just 20% increase in size. If you do intend to use it in production, best practice is to use the <picture> tag for backwards compatibility with browsers that don't yet support WebP.

WebP conversion can be lossless or lossy, each coming with different parameters:

Lossless parameters, when the lossless parameter is set to true

  • effort, not required, can be an integer between 0 and 9, default 5
  • near_lossless can be an integer between 0 and 100, default 75
  • discrete_tone can be a boolean, default false
  • preserve_alpha can be a boolean, default false

Example request:

{"output_format": "webp", "lossless": true, "effort":4, "near_lossless": 80, "width": 350}

Lossy parameters, when the lossless parameter is set to false or not set (default is false)

  • quality - not required, between 0 and 100, default: 75
  • effort - not required, between 0 and 6, default 75

Example request:

{"output_format": "webp", "lossless": false, "effort":6, "width": 350}

Convert any image to Oxipng​

PNG’s can be losslessly optimized in order to reduce their file size with oxipng, a modern way to represent PNG's, with savings up to 50%

Limitations and future improvements​

Cristian Berceanu