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
Optional
avif
Converts images to the avif format.
If your user's browser supports the avif format, your images are automatically converted to this format.
Optional
crop
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
.
Optional
downscale
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.
Optional
format
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.
Optional
max Height
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.
Optional
max Width
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.
Optional
optimize
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
.
Optional
override Height
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).
Optional
override Width
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).
Optional
pjpeg
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.
Optional
quality
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
.
Optional
screen Size Factor
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.
Optional
webp
Converts images to the WebP format.
If your user's browser supports the WebP format, your images are automatically converted to this format.
These options can be applied on images. See the image option for more information.
Since
1.5.0