Automatic Image Optimization

In this section, we describe how automatic image optimization can be used for Baqend Platform. For details on the corresponding feature in Speed Kit, read the Speed Kit docs on image optimization.

What does it do?

Baqend's automatic image optimization can transcode hosted images to the most efficient formats and even rescale them to just fit the requesting client’s screen and device pixel ratio (dpr):

To minimize page size, a user with a high-resolution display will receive high-resolution images, while a users with an old mobile phone will receive a smaller version that is natively scaled to the smaller screen dimensions.
While imperceptible for the user, these optimizations lead to significant load time improvements when bandwidth is scarce, e.g. on mobile connections.

Sandbox

Option List

In this section, we list the available optimization parameters and explain what they can be used for.

width & height: Specifying Output Dimensions

By specifying the desired output dimensions of your image, you can make sure that your image is delivered pixel-perfect for the devices of your users. If only one dimension is provided, the other one will be scaled proportionally. If both are provided, you prescribe the aspect ratio of your optimized image.

Possible Values

pixels (e.g. 500): absolute dimension as an integer

fraction (e.g. 0.25): desired output width/height in relation to the original image width/height

Examples

width=0.5 (sandbox): scale image to 50% of the original width, scaling height proportionally

width=0.5;height=0.2 (sandbox): scale image to 50% of the original width and 20% of the original height; might distort image proportions, depending on the original aspect ratio

quality: Lossy Compression

By specifying the output quality, you can recompress an image to save bandwidth for your losers. Please note that quality can be adjusted for lossy formats only. Therefore, you have to specify a lossy destination format as well, if your image is stored in a lossless format.

Possible Values

percentage: any number between 1 (poor quality) and 100 (best quality)

Examples

crop: Select a Cutout

By cropping your image, you can select a subregion as output (thus removing the rest). You can specify the output dimensions/proportions by providing absolute pixel values (e.g. crop=500,200), relative values (e.g. crop=0.5,0.2), or the destination aspect ratio (e.g. crop=51:2).

Additionally, you can position the output area in the source image by providing destination offsets (e.g. offset-x20,offset-y60) or source coordinates for the upper left corner of your cutout (e.g. x200,y500, not available for aspect ratios).

fraction (e.g. 0.25): destination width/height in relation to the original image dimensions

<offset>:

percentage: any integer between 1 (left/top) and 100 (right/bottom)

Examples

cropping to centered cutout:

crop=100,200 (sandbox): gives you the center of the image, trimmed to 100px by 200px

crop=0.5,0.3 (sandbox): gives you the center of the image, trimmed to 50% of original width and 30% of original height

crop=4:3 (sandbox): gives you the center of the image, trimmed to achieve an aspect ratio of 4:3

cropping to positioned cutout:

crop=100,200,offset-x0.1,offset-y0.2 (sandbox): moves the cutout 10% right and 20% downwards from the image center

crop=100,200,x50,y40 (sandbox): moves the cutout 50 pixels right and 40 pixels down (seen from the top-left corner of the original image)

format: Specify File Type

By specifying a format, you choose the file type in which your image should be served. Works for JPEG, PNG, GIF, and WebP images.

Consider Browser Support:
Not all formats are supported by every browser at the moment. For example, Firefox will not display images served as WebP. Therefore, be careful with the format you choose. For WebP, consider using the auto option.

Examples

format=jpg (sandbox): specifies that your image will be output as a lossy JPEG file

auto: Enable WebP Where Available

Auto-tuning automatically transcodes the optimized image toThe WebP form it, if supported by the requesting browser. There is only one possible value:

Possible Values

webp: enables automatic WebP transcoding

Examples

auto=webp (sandbox): scale and crop the image to completely fill the bounding box

fit: Fill a Given Bounding Box

With the fitting option, you can you can fill a specified bounding box (see above), either by scaling and cropping the image to completely fill the bounding box (crop) or by rescaling the image to entirely fit into the bounding box (bounds).
There are only two possible values:

fit=crop (sandbox): scale and crop the image to completely fill the bounding box