Images

So you can get images tailored to you, the content service can automatically perform a range of manipulations to an image indicated through specific query string parameters.

Manipulations

ParameterTypeModificationDescription
hnumberHeightYou can resize the image to the desired height. The maximum allowed value is 4000 pixels. The default is the original image height.
wnumberWidthYou can resize the image to the desired width. The maximum allowed value is 4000 pixels. The default is the original image width.
fitcomplexFitBy default, images are resized to fit into the specified dimensions. You can request a different behavior using the fit parameter.

Possible values:

pad: Resize the image to the specified dimensions, padding the image if needed.

fill: Resize the image to the specified dimensions, cropping the image if needed.

scale: Resize the image to the specified dimensions, changing the original aspect ratio if needed.

crop: Crop a part of the original image to fit into the specified dimensions.

thumb: Create a thumbnail from the image.
fstringFocusYou can choose the focus area for resizing when using fit type pad, fill, crop or thumb. Focus area has no effect on the default or scale fit type.

Possible values:

center, top, right, left, bottom.

top_right, top_left, bottom_right, bottom_left.

face for the largest face detected.

`faces for all the faces detected.

The default is center.
rnumber/stringRounded CornersYou can add rounded corners to your image or crop to a circle/ellipse.

Possible values:

The size of the corner radius in pixels.

max keyword for a full circle/ellipse.

The default is 0.

Rounded corners use background color as padding color, unless the format is jpg and resizing behavior is pad, then default to white.
qnumberQualityYou can alter the quality of the image, expressed as a percentage value between 1 and 100. Quality value is only ignored for 8-bit PNGs.
fmstringFormatYou can convert the image to a different format.

Possible values:

jpg
png
webp
gif

The default is the original image format.

Examples

The following examples demonstrate how the content service can be used to deliver manipulations to a base image 'on the fly'.

Example 1: Pixel width resize
Resize the width to 200px.
https://images.ctfassets.net/6pezt69ih962/27Qn5BjKtbtNUdokaAErJx/fc5a73acf0226545d6d3a1e91933fb2b/1471272744575_480x720_Poster__281_29.jpg?w=200
Example 1: Resize the width to 200px

Example 2: Pixel hight resize
Resize the hight to 200px
https://images.ctfassets.net/6pezt69ih962/27Qn5BjKtbtNUdokaAErJx/fc5a73acf0226545d6d3a1e91933fb2b/1471272744575_480x720_Poster__281_29.jpg?h=200
Example 2: Resize the hight to 200px

Example 3: Scale image
Scale image with fit parameter and size parameters.
https://images.ctfassets.net/6pezt69ih962/27Qn5BjKtbtNUdokaAErJx/fc5a73acf0226545d6d3a1e91933fb2b/1471272744575_480x720_Poster__281_29.jpg?h=200&w=200&fit=scale
Example 3: Scale image with fit parameter and size parameters

Example 4: Round image and change format
Add rounded corners with 20px and changed format to webp
https://images.ctfassets.net/6pezt69ih962/27Qn5BjKtbtNUdokaAErJx/fc5a73acf0226545d6d3a1e91933fb2b/1471272744575_480x720_Poster__281_29.jpg?w=200&r=25&fm=webp
Example 4: Add rounded corners with 20px and changed format to webp

Example 5: Square image and change format
Square image changed format to webp
https://images.ctfassets.net/6pezt69ih962/27Qn5BjKtbtNUdokaAErJx/fc5a73acf0226545d6d3a1e91933fb2b/1471272744575_480x720_Poster__281_29.jpg?h=480&w=480&fit=crop&f=top&fm=webp

Example 4: Add rounded corners with 20px and changed format to webp