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
| Parameter | Type | Modification | Description |
|---|---|---|---|
| h | number | Height | You can resize the image to the desired height. The maximum allowed value is 4000 pixels. The default is the original image height. |
| w | number | Width | You can resize the image to the desired width. The maximum allowed value is 4000 pixels. The default is the original image width. |
fit | complex | Fit | By 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. |
| f | string | Focus | You 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. |
| r | number/string | Rounded Corners | You 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. |
| q | number | Quality | You 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. |
| fm | string | Format | You can convert the image to a different format. Possible values: jpgpngwebpgifThe 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 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 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 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 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
