Search


Search something to see results

ImageOptions

These options can be applied on images. See the image option for more information.

1.5.0

interface ImageOptions {
    avif?: boolean;
    crop?: string | false | CropSize;
    downscale?: boolean;
    format?: string;
    maxHeight?: number | false;
    maxWidth?: number | false;
    optimize?: string | false;
    overrideHeight?: string | false | string[];
    overrideWidth?: string | false | string[];
    pjpeg?: boolean;
    quality?: number | false;
    screenSizeFactor?: number;
    webp?: boolean;
}

Index

Properties

Properties

avif?: boolean

Converts images to the avif format.

If your user's browser supports the avif format, your images are automatically converted to this format.

false

2.15.0

crop?: string | false | CropSize

Crops images to the specified dimensions.

This option allows you to crop your images to specific sizes. If you specify a string, you can give an aspect ratio, e.g., "16:9", "4:3". Specify an array of two numbers to smartly crop the image to a specific width and height. If you specify an array of four numbers, the first two values are interpreted as X and Y coordinates and the last two values as width and height. To disable cropping, just specify false.

[20, 10, 200, 400]

Crops a 200 × 400 pixel area from 20 pixels on the X axis and 10 pixels on the Y axis.

false

1.5.0

downscale?: boolean

Downscales image dimensions to the user's screen.

This option helps to reduce image file sizes, especially for mobile. If your website delivers images that are larger than the user's display requires, they are automatically scaled down to the screen.

true

1.5.0

format?: string

Specifies the desired output encoding which would be used for the image optimization.

The format parameter enables the source image to be converted from one encoded format to another. This is useful when the source image has been saved in a sub-optimal file format that hinders performance.

E.g., you have an image that wants to be converted to PNG8 for example, therefore, the request format param will look like ?format=png8 or ?format=jpg&quality=95 for progressive JPEG with 95% quality.

null

2.11.0

maxHeight?: number | false

Downscales images to this maximum height.

If you happen to know the maximum height of an image, you can use this option to tell Speed Kit how much to downscale. This can help to reduce file sizes significantly. If this option is set to false (default), the max width is inferred from the devices screen size. Note: The downscale options must be enabled (default) for this option to take effect.

false

1.8.0

maxWidth?: number | false

Downscales images to this maximum width.

If you happen to know the maximum width of an image, you can use this option to tell Speed Kit how much to downscale. This can help to reduce file sizes significantly. If this option is set to false (default), the max width is inferred from the devices screen size. Note: The downscale options must be enabled (default) for this option to take effect.

false

1.8.0

optimize?: string | false

Automatically applies optimal quality compression to produce an output image with as much visual fidelity as possible, while minimizing the file size.

The following values are allowed:

Value Description
low Output image quality will be similar to the input image quality.
medium More optimization is allowed. Preserve the visual quality of the input image. – default.
high Minor visual artefacts may be visible. This produces the smallest file.

You can disable the feature completely by setting the option to false.

'medium'

2.4.0

overrideHeight?: string | false | string[]

Defines a query parameter which is used as the height setting for Speed Kit's image optimization.

If your website requests tailored images based on a query parameter describing the height of that image, you should set this option to the parameter, so Speed Kit can use it for optimization. With this setting, images are delivered in the right size and cache hit rate can be greatly improved.

E.g., you have an image delivered under https://www.example.org/my-image.png. Now, you link the image using https://www.example.org/my-image.png?height=512 to have it scaled down to a height of 512 pixels. Then, you can specify "height" for overrideHeight.

false will disable this functionality (default).

false

1.17.0

overrideWidth?: string | false | string[]

Defines a query parameter which is used as the width setting for Speed Kit's image optimization.

If your website requests tailored images based on a query parameter describing the width of that image, you should set this option to the parameter, so Speed Kit can use it for optimization. With this setting, images are delivered in the right size and cache hit rate can be greatly improved.

E.g., you have an image delivered under https://www.example.org/my-image.png. Now, you link the image using https://www.example.org/my-image.png?width=512 to have it scaled down to a width of 512 pixels. Then, you can specify "width" for overrideWidth.

false will disable this functionality (default).

false

1.17.0

pjpeg?: boolean

Converts JPEG images to the progressive format.

Progressive JPEG images have a smaller file size and are faster for the browser to load. The format achieves this by saving the image data in ascending quality so that a previous version of the image can be displayed at first. This improves the First Meaningful Paint of your website especially where large JPEG images are used.

true

1.5.0

quality?: number | false

The quality in which images should be returned by Speed Kit.

We are using a lossy compression to speed up the delivery of your images. Under normal circumstances, the default quality of 85% will still result in good looking images.

If you pass a number between 0 and 100 to the option, it will be interpreted as a percentage representing the quality. All images handled by Speed Kit will be delivered with this quality. A value of 100 means no loss in quality.

You can disable the feature completely by setting the option to false.

null

1.5.0

screenSizeFactor?: number

Multiplies screen dimensions with this factor to deliver smaller images.

Because modern mobile screens are massive, this options gives you the opportunity to multiply the screen size with a factor between 0 and 1. This way Speed Kit can request much smaller images and safe bandwidth. Note: The downscale options must be enabled (default) for this option to take effect.

1

1.8.0

webp?: boolean

Converts images to the WebP format.

If your user's browser supports the WebP format, your images are automatically converted to this format.

true

1.5.0