Automatic image resizing and cropping

Introduction

The engine allows you to resize and crop images on the fly.

Resize - The source image will be resized to the specified height and width. This action makes it possible to create several variants of different sizes for each specific use, and this from the same source image.

Cropping - The source image will be resized to a new size that does not retain the original aspect ratio and part of the image will be deleted. This can be particularly useful for product images where different formats need to be obtained while retaining only part of the image.

Our optimization engine resizes your images via URL parameters. The images are resized in real time and then served directly by our CDN.

Examples

//resize the image to a maximum width of 1000px. The height of the image is calculated to constrain proportions.

  http://www.domain.com/image.png?frz-w=1000

// resize the image to a maximum height of "00px. The width of the image is calculated to constrain proportions.

  http://www.domain.com/image.png?frz-h=300


// crop the image to a 100px height and 400 px width. The cropped zone is automatically detected to select the most important element of the image.
http://www.domain.com/image.png?frz-height=100&frz-width=400


// crop the image to a 100px height and 400 px width, from the center of image

http://www.domain.com/image.png?frz-height=100&frz-width=400&frz-gravity=center

// resize the image to a 100px height and 400 px width containing the whole image (image is not cropped)

http://www.domain.com/image.png?frz-height=100&frz-width=400&frz-fit=contain

Original image

w=250	h=100	w=250, h=100	w=250, h=100, fit=inside
w=250, h=100, fit=contain	w=250, h=100, fit=fill	w=250, h=100, fit=outside

Parameters

frz-resizeimgs=true

If the option is not enabled in your configuration, forces the use of the feature for the requested resource with this parameter.

frz-height=x or frz-h=x

Specifies the maximum height of the image in pixels. The exact behavior depends on the fit mode (described below).

frz-width=x or frz-w=x

Specifies the maximum width of the image in pixels. The exact behavior depends on the fit mode (described below).

frz-fit mode=

Affects the interpretation of `frz-width` and` frz-height`. The available modes are:

• cover: Crop to cover both provided dimensions (the default).
• contain: Embed within both provided dimensions.
• fill: Ignore the aspect ratio of the input and stretch to both provided dimensions.
• inside: Preserving aspect ratio, resize the image to be as large as possible while ensuring its dimensions are less than or equal to both those specified.
• outside: Preserving aspect ratio, resize the image to be as small as possible while ensuring its dimensions are greater than or equal to both those specified. Some of these values are based on the object-fit CSS property.

frz-gravity=position

The different possible values are: north, northeast, east, southeast, southwest, west, northwest, center, entropy, attention.

The entropy and attention values use an algorithm for detecting the most interesting area of the image.

The entropy value is used by default.

From a technical point of view,

• entropy: targets the region with the highest entropy (in the sense of Shannon).
• attention: targets the region with the highest luminance frequency, color saturation and the presence of skin tones.

frz-enlarge=false

Specifies accepting to enlarge an image after resizing. By default, the engine does not magnify images.

Impacts

The expected impact is a drastic decrease in the weight of the image. It is downloaded faster by the browser. In addition, the browser does not need to resize the image which saves CPU cycles.

Limits

The feature is supported for JPEG and PNG images. GIF and SVG formats are not supported.
PNG images may have a higher image weight if they were in PNG8. We recommend activating the option "aggressive optimization (PNG24 to PNG8)" to reduce the weight of the image.