Skip to main content

Sizing and scaling

The Media Delivery API lets you resize an image by setting a width, a height, or an upper bound on either, then control how it fills the space you have asked for. Scale mode decides what happens when the source and target aspect ratios differ, and point of interest decides which part of the image survives a crop.

Base URL pattern

The parameters on this page are appended to a Dynamic Media image URL. For the URL pattern and how parameters chain together, see the Media Delivery API guide.

Sizing
Link copied!

The parameters here work in two pairs. w and h set an exact output size, while maxW and maxH set a ceiling that only applies when a request exceeds it. Both pairs preserve the aspect ratio - changing the shape of an image is the job of scale mode.

Tip

These parameters resize at delivery time without altering the master asset. To resize the asset itself as part of an automated workflow, use the Adjust image size action in Workforce flows.

w - Width
Link copied!

Sets the output width in pixels. If only w is specified, height is calculated automatically to preserve the aspect ratio. See the height example below.

https://cdn.media.amplience.net/i/ampproduct/woman-checked-skirt-striped-bag?w=400
Try it...
400

h - Height
Link copied!

Sets the output height in pixels. If only h is specified, width is calculated automatically to preserve the aspect ratio. Set a width below to override the automatic calculation; clear it to return to aspect-ratio scaling.

https://cdn.media.amplience.net/i/ampproduct/woman-checked-skirt-striped-bag?h=400
Try it...
400
Tip

Add a width above and see how the URL updates - a width parameter is appended, chained with a &.

maxW - Maximum width
Link copied!

Sets the maximum width for the returned image. Requests above it are clamped, with the height then following the aspect ratio from the clamped width. Can also be configured at the account level.

Example
Link copied!

Requests 2000px from the 6000×4000 source; the output is clamped to 1200px wide, with the height following the aspect ratio:

https://cdn.media.amplience.net/i/ampproduct/man-with-bag-city-skyline?w=2000&maxW=1200

maxH - Maximum height
Link copied!

Sets the maximum height for the returned image. Requests above it are clamped, with the width then following the aspect ratio from the clamped height. Can also be configured at the account level.

Example
Link copied!

Requests 2000px tall; the output is clamped to 1200px, and the width follows the aspect ratio (1800px for this source):

https://cdn.media.amplience.net/i/ampproduct/man-with-bag-city-skyline?h=2000&maxH=1200

Scale mode
Link copied!

If you ask for a width and height that don't match the shape of the original image - for example, a square from a landscape photo - the image can't fill that space exactly. These parameters let you choose what happens - whether it's cropped or stretched to fit, which part of it is kept, and how it's redrawn at the new size.

Tip

These parameters crop at delivery time without altering the master asset. To crop or trim the asset itself as part of an automated workflow, use the Crop or Trim actions in Workforce flows.

sm - Scale mode
Link copied!

Controls how the image is positioned or cropped when it does not fit exactly to the requested width and height.

ValueDescription
cCrop to fit
sStretch
tlTop left
tcTop center
trTop right
mlMiddle left
mcMiddle center
mrMiddle right
blBottom left
bcBottom center
brBottom right
aspectMaintain aspect ratio - ratio needs to be specified for example sm=aspect&aspect=16:9
edgeResize to a specified edge - see sm=edge
clampFit within area without padding - see sm=clamp

This example requests a portrait window from a landscape scene, so every mode must crop or stretch - switch between the corner values to watch the crop move across the scene:

https://cdn.media.amplience.net/i/ampproduct/man-with-bag-city-skyline?w=300&h=400&sm=c
Try it...

Example - maintain aspect ratio
Link copied!

https://cdn.media.amplience.net/i/ampproduct/blur-brass-bronze-timepiece?w=256&sm=aspect&aspect=16:9

sm=edge - Resize to edge
Link copied!

Resizes the image so that a specific edge matches a target length. Requires resize.edge and resize.edge.length.

ParameterValuesDescription
resize.edgew, h, largest, smallestWhich edge to target
resize.edge.lengthInteger (pixels)Target length in pixels
https://cdn.media.amplience.net/i/ampproduct/blur-brass-bronze-timepiece?sm=edge&resize.edge=w&resize.edge.length=250
Try it...
250

sm=clamp - Clamp to bounds
Link copied!

Fits the image into the specified width and height while maintaining the aspect ratio and avoiding any padding.

https://cdn.media.amplience.net/i/ampproduct/blur-brass-bronze-timepiece?w=400&h=1000&sm=clamp
Try it...
400
1000

scaleFit - Scale fit mode
Link copied!

Specifies how to position the crop area when using sm.

ValueDescription
centerDefault
poiCrop using the point of interest focal point

See scaleFit=poi in action in the poi example below.

poi - Point of interest
Link copied!

Defines a focal point for cropping. Takes four comma-separated values representing the focal region as percentages of the image dimensions.

ComponentDescription
xLeft edge of the focal point as a percentage of image width
yTop edge of the focal point as a percentage of image height
wWidth of the focal point as a percentage of image width
hHeight of the focal point as a percentage of image height
https://cdn.media.amplience.net/i/ampproduct/Hero-Banner-720-model2?w=320&h=480&sm=c&poi=0.74,0.0,0.32,0.14&scaleFit=poi
Try it...
Tip

The source image is 1028 x 685 pixels - try playing with scaleFit at these settings too.

filter - Resize algorithm
Link copied!

The resampling algorithm used when resizing the image.

ValueDescription
qQuadratic
sSinc
lLanczos (default)
pPoint
cCubic
hHermite

Resampling differences are most visible when fine patterns are downscaled hard - compare the algorithms on the checked and striped fabric:

https://cdn.media.amplience.net/i/ampproduct/woman-checked-skirt-striped-bag?w=250&filter=l
Try it...
250

upscale - Upscale behaviour
Link copied!

Controls whether the image can be scaled larger than the original.

ValueDescription
trueAllow upscaling
falseDo not upscale
paddDraw the image, unscaled, on a canvas of the requested size. Specify both w and h to define the canvas - with one dimension the canvas matches the image and no padding appears. Alignment is set via sm; background colour via bg
https://cdn.media.amplience.net/i/ampproduct/woman-coat-blue-scarf?w=1500&upscale=true
Try it...
1500

Example - padd with a defined canvas
Link copied!

Both dimensions define the canvas; the 1280×853 original is drawn unscaled and centred, with the background colour filling the remainder:

https://cdn.media.amplience.net/i/ampproduct/woman-coat-blue-scarf?w=1500&h=1500&upscale=padd&bg=rgb(228,239,101)&sm=mc