Skip to main content

Media delivery reference

This page lists the parameters available to you for manipulating images on the fly using the features of Dynamic Media.

You can dynamically manipulate any image just by appending the parameters to the end of the URL. In the following example the image is rotated by 90 degrees.

https://cdn.media.amplience.net/i/ampproduct/twofriends?rotate=90

Image Transformation Features
Link copied!

Width
Link copied!

Parameter: w

Sets the width of the image. If you only provide the width, the height will be calculated to maintain the aspect ratio.

Parameter example
Link copied!

exampleimage?w = 200

Height
Link copied!

Parameter: h

Sets the height of the image. If you only provide the height, the width will be calculated to maintain the aspect ratio.

Parameter example
Link copied!

exampleimage?h=400

Quality
Link copied!

Parameter: qlt

Sets the compression quality of the image, this is a percentage 0-100. JPEGs are lossy, PNGs are lossless but are compressed with zlib.

Parameter example
Link copied!

exampleimage?qlt=80

Default format quality settings
Link copied!

Parameter: qlt=default

Specifies that the default quality should be used for the following formats: avif, webp,jp2,jpeg or png. Can be used with fmt=auto or on its own. See auto format for more details.

The default settings for each format are:

FormatDefault quality setting
jp240
avif55
webp80
jpeg75
png90

You can add your own quality settings in the root template for your account or transformation templates.

Note that to retrieve images in avif format requires Accelerated Media.

Parameter example
Link copied!

https://cdn.media.amplience.net/i/ampproduct/women-bright-colors.jpg?fmt=auto&qlt=default

Format quality settings
Link copied!

Parameters:

fmt.avif.qlt

fmt.webp.qlt

fmt.jp2.qlt

fmt.png.qlt

fmt.jpeg.qlt

Sets the compression quality used for the specified image format: avif, webp, jp2, jpeg or png. Can be used with fmt=auto. See auto format for more details.

Parameter example:
Link copied!

https://cdn.media.amplience.net/i/ampproduct/women-bright-colors.jpg?fmt=auto&fmt.webp.qlt=50

Scale mode
Link copied!

Parameter: sm

Indicates how to position the image if it does not fit exactly to the width and height specified.

Scale modeDescription
cCrop to Fit
sStretch
tlTop left
tcTop center
trTop right
mlMiddle left
mcMiddle center
mrMiddle right
blBottom left
bcBottom center
brBottom right
aspectAspect ratio

Parameter example
Link copied!

exampleimage?w=256&sm=aspect&aspect=16:9

Scale mode- resize edge
Link copied!

Parameter: sm=edge

Resizes the image to a specified width or height, or to the smallest or largest edge of the image.

resize.edge and resize.edge.length must be specified.

resize.edge = w, h, largest or smallest

rezize.edge.length= {value in pixels}

Parameter examples
Link copied!

exampleimage?sm=edge&resize.edge=w&resize.edge.length=250

Sets the width to the value of resize.edge.length and adjusts the height to maintain the aspect ratio.

exampleimage?sm=edge&resize.edge=h&resize.edge.length=250

Sets the height to resize.edge.length and adjusts the width to maintain the aspect ratio.

exampleimage?sm=edge&resize.edge=largest&resize.edge.length=375

Resize the image so that the largest side is set to the value of resize.edge.length and maintain the aspect ratio.

exampleimage?sm=edge&resize.edge=smallest&resize.edge.length=375

Resize the image so that the smallest side is set to the value of resize.edge.length and maintain the aspect ratio.

Scale mode- clamp
Link copied!

Given a width and height, will fit the image into the specified area and maintain the aspect ratio while ensuring that there is no padding.

Parameter: sm=clamp

Parameter example
Link copied!

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

Scale fit
Link copied!

Parameter: scaleFit

Specifies how to position the area to be cropped when using sm.

Scale fit modeDescription
center(default)
poiCrop using the specified point of interest focal point. See point of interest for an example

Point of interest
Link copied!

The focal point of an image to use when it is resized and cropped. Takes 4 parameters: x, y, w and h. x and y represent the top left of the focal point as a percentage of the image width and height. Width and height are the width and height of the focal point as a percentage of the image width and height

Parameter example
Link copied!

https://cdn.media.amplience.net/i/ampproduct/Hero-Banner-720-model2?w=320&h=480&sm=c&poi= 0.743636237250434,0.,0.32362459546925565, 0.1388888888888889 0&scaleFit=poi

Resize algorithm
Link copied!

Parameter: filter

The algorithm to use when the image is resized.

Resize valueDescription
qQuadratic
sSinc
lLanczos (default)
pPoint
cCubic
hHermite

Upscale
Link copied!

Parameter: upscale

Possible values: true, false or padd

Indicates if the system can scale the image to be bigger than the original input. If set to padd the image will be drawn on top of a canvas with the size given. The alignment of the image is set using sm. The background colour of the canvas is set using bg.

Max width
Link copied!

Parameter: maxW

Sets the maximum width for the image returned. Can be specified at the account level.

Max height
Link copied!

Parameter: maxH

Sets the maximum height for the image returned. Can be specified at the account level.

Cropping and rotating
Link copied!

Crop
Link copied!

Parameter: crop

Cuts out a section of the image, the coordinates are specified as x,y,w,h.

x is the offset from the top left of the image.

y is the offset from the top of the image.

w is the width of the selection.

h is the height of the selection.

Parameter example
Link copied!

https://cdn.media.amplience.net/i/ampproduct/man-with-bag-city-skyline?crop=2000,1000,2000,2500

This will crop the image 2000 pixels from the top left and 1000 pixels from the top of the image, with a selection 2000 pixels wide and a height of 2500 pixels. The crop is applied after any resize so the coordinates are relative to the resized image.

Each of the cropping parameters can also take percentages as parameters. For example:

https://cdn.media.amplience.net/i/ampproduct/man-with-bag-city-skyline?crop=33%,25%,33%,62%

Edge crop
Link copied!

Parameter: ecrop

Takes 4 parameters: left, top, right, bottom to crop from each edge of the image. ecrop is applied after any resize so the coordinates are relative to the resized image.

Parameter example
Link copied!

https://cdn.media.amplience.net/i/ampproduct/man-with-bag-city-skyline?ecrop=1000,250,1000,250

The example above will crop 1000 pixels from the left and right of the image and 250 pixels from the top and bottom.

You can also specify the parameters as percentages. The following example will crop 25% from the left and top edges of the image and 5% from the top and bottom:

https://cdn.media.amplience.net/i/ampproduct/man-with-bag-city-skyline?ecrop=25%,5%,25%,5%

Pre crop
Link copied!

Parameter: pcrop

This is the same as crop except it does the crop before any resize event and therefore the coordinates are relative to the original image size. As with crop, you can also provide the parameters as percentages.

Parameter example
Link copied!

This example combines the prop with a resize of the image:

https://cdn.media.amplience.net/i/ampproduct/man-with-bag-city-skyline?pcrop=2000,1000,2000,2500&w=200

Pre edge crop
Link copied!

Parameter: pecrop

Same as ecrop but crops from the edge of the image before any resize event and therefore the coordinates are relative to the original image size. As with ecrop, you can also provide the parameters as percentages.

Parameter example
Link copied!

This example combines the pecrop with a resize of the image:

https://cdn.media.amplience.net/i/ampproduct/man-with-bag-city-skyline?pecrop=25%,5%,25%,5%

Rotate
Link copied!

Parameter: rotate

Rotate an image by a specified number of degrees. The rotate is applied after the effect of any resize parameters.

Optional parameter: rgb

Rotating by an angle that is not a multiple of 90 degrees will expose some pixels underneath the image. You can specify a color for the exposed pixels.

Parameter examples
Link copied!

https://cdn.media.amplience.net/i/ampproduct/twofriends?rotate=90
https://cdn.media.amplience.net/i/ampproduct/twofriends?rotate=80,rgb(30,50,90)

Pre rotate
Link copied!

Parameter: protate

The same as rotate, except that the rotation is applied before any resize parameters.

Parameter example
Link copied!

https://cdn.media.amplience.net/i/ampproduct/twofriends?protate=270&w=500

Flip
Link copied!

Parameter: flip

Flips the image horizontally, vertically or both.

Parameter examples
Link copied!

https://cdn.media.amplience.net/i/ampproduct/twofriends?fliph=true
https://cdn.media.amplience.net/i/ampproduct/twofriends?fliph=true&flipv=true

File manipulation
Link copied!

Format
Link copied!

Parameter: fmt

Sets the format of the image, if this is not specified the format will be the same as the original. Setting the image extension will also change the format.

Supported formats include:jpg,png, gif, bmp, webp, avif and jp2. Note that webp is not supported on certain browsers.

  • jp2 is currently only supported in Safari for iOS and macOS.
  • avif requires Accelerated Media to be enabled on your account. Images greater than 2.5 megapixels will be returned in jpeg format or png (if the image contains transparency).

Parameter example
Link copied!

myimage?fmt=png

myimage.png

Auto format
Link copied!

Parameter: fmt = auto

Specifies that the image should be returned in the most efficient format for the browser. Note that this feature and support for the AVIF format requires Accelerated Media.

The image format will be chosen according to the following rules:

  • avif if it is enabled on your account and the browser supports it.

  • webp for Safari, Chrome, Firefox and other browsers that support it and don't support avif.

  • jp2 for versions of Safari that don't support webp but do support jp2

  • For other browsers, or earlier versions of Chrome, Firefox or Safari, the image is returned in jpg format.

  • If the original image contains transparency, then the image will be returned in PNG format in Safari.

For more information see the Amplience Smart Images page.

Note that it is possible to remove images from use by Amplience Smart Image. For example, you could ensure that images are never returned in jp2 format by removing that format from the list.

Dots per inch
Link copied!

Parameter: dpi

Changes the image resolution. If this param is not specified the image will be returned in the DPI it was originally created in.

DPI algorithm
Link copied!

Parameter: dpiFilter

Specifies the resampling algorithm to use when changing the DPI.

ParameterDescription
qQuadratic
sSinc
lLanczos (Default)
pPoint
cCubic

Parameter example
Link copied!

https://cdn.media.amplience.net/i/ampproduct/signature-hat-german?dpi=120&dpiFilter=q&w=200

Strip
Link copied!

Parameter: strip

Removes commands and meta data from the image. true or false.

This is false by default.

Image adjustments
Link copied!

Chroma subsampling
Link copied!

Parameter: fmt.jpeg.chroma

Chroma subsampling is a process which bases image sampling on brightness rather than colour to take advantage of how the human eye works. Generally this affects colours and contrasts such as red and black.

Dynamic Media has chroma subsampling turned on by default to enhance performance and lower file size media.

On is: fmt.jpeg.chroma=2,1,1.

This can be turned off with the following setting: fmt.jpeg.chroma=1,1,1.

Note that turning this off will result in your media being served at a larger file size, so you may wish to adjust the quality setting to compensate

Color space
Link copied!

Parameter: cs

Changes the colorspace used for the image.

Supported values:

Color space valueDescription
rgbRGB
rgbaRGBA
srgbSRGB
grayGray
cmykCMYK
ohtaOHTA
labLAB
xyzXYZ
hsbHue, saturation, brightness
hslHue, saturation, lightness

Sharpen
Link copied!

Parameter: unsharp

unsharp={radius},{sigma},{amount},{threshold}

Sharpens the image with an unsharp mask.

ParameterDescription
RadiusGaussian filter radius.(0 – 5). If 0 the system will select an appropriate value.
SigmaGaussian standard deviation. (0.01 – 5)
AmountThe percentage difference. Can be greater than 100%.(1-300)
ThresholdThe threshold used to changed the brightness levels (0 to 255)

Parameter example
Link copied!

myImage?unsharp=2,1,160,0

Composite mode
Link copied!

Parameter: cm

When an image is applied on top of a background colour this defines the composite operator.

Supported parameters:

  • over (default)
  • colo
  • dark
  • diff
  • light
  • multi
  • cout
  • cover

Image background
Link copied!

Parameter: bg

This will set the background color of the image. It only has an effect when the image is padded or the original image is transparent.

Parameter example
Link copied!

https://cdn.media.amplience.net/i/ampproduct/shoe-image?bg=rgb(0,0,255)

Indexed png
Link copied!

Parameter: fmt.png.indexed

true or false. The default is false.

Specify if the PNG image should be indexed. Indexed PNGs have a color palette rather than storing color information with the pixel data.

Palette size
Link copied!

Parameter: fmt.png.palettesize

Sets the color palette size for a png image. The value must be between 1 and 256. Requires fmt.png.indexed=true

The default palette size is 256. Note the image has to be served in png format. Should notably reduce the file size of an asset.

Dither
Link copied!

Parameter: fmt.png.dither. fmt.png.dither=false (set to true by default).

Disables dithering. Dithering helps smooth out the color banding when dealing with a reduced colour palette. Dithering may increase file size due to increased difficulty when compressing.

Blur
Link copied!

Parameter: blur

Applies a Gaussian blur to the image. The format of blur is as follows:

image?blur={radius},{sigma}

Parameter (value)Description
RadiusThe accuracy of the blur. Should generally be 2 to 3 times sigma.
SigmaThe strength of the blur. Both radius and sigma are between 0 to 100.

Parameter example
Link copied!

https://cdn.media.amplience.net/i/ampproduct/shoe-image?blur=30,60

Reduce noise
Link copied!

Parameter: noiser

Removes noise from an image. The value is between 0 and 5. The higher the value the more noise is removed.

Parameter example
Link copied!

https://cdn.media.amplience.net/i/ampproduct/twofriends?noiser=5

Gamma
Link copied!

Parameter: gamma

Adjusts the gamma correction of an image. gamma is specified as a floating point value. A value of less than 1 will make the image darker and greater than 1 will make the image lighter.

Parameter example
Link copied!

https://cdn.media.amplience.net/i/ampproduct/twofriends?gamma=0.5

Hue, saturation, brightness
Link copied!

Parameters: hue, sat, bri

Each of these parameters can be specified separately. Each value is between -100 to 100.

ParameterDescription
hueAdjust the color of the image. The color change is based on the hue scale.
satAdjust the amount of gray in the image
briAdjust the brightness of the image.]

Parameter example
Link copied!

https://cdn.media.amplience.net/i/ampproduct/shoe-image?hue=40&sat=10&bri=55

Progressive JPEG
Link copied!

Parameter: fmt.jpeg.interlaced=true

Requesting a progressive JPEG asset downloads a lower quality version initially, and then increases the quality the more data that is downloaded.

Further information can be found on the progressive Images page.

Parameter example
Link copied!

https://cdn.media.amplience.net/i/support/Tiger1?fmt.jpeg.interlaced=true

Layers
Link copied!

Layering allows you to composite multiple images one on top of the other. When using layers, the base layer will always be layer 0. You can specify additional layers on top: layer 1, layer2 and so on.

Parameters for each layer are enclosed in "[]" and include the image manipulation parameters shown on this page. Parameters specific to managing images in layers are shown below.

To try out examples of using layers see the layers and roundels section of the Dynamic Media playground.

In the example below the blue dress image is layer0 and the exampleRoundel image is layer1.

https://cdn.media.amplience.net/i/ampproduct/blue-dress-outside?layer1=[src=/i//exampleRoundel]

If you wanted to specify parameters for layer0, as well as other layers, you would use the following format:

https://cdn.media.amplience.net/i/ampproduct/blue-dress-outside?layer0=[w=800]&layer1=[src=/i//exampleRoundel&w=150]

You can also specify an empty template and add the URL for each layer:

https://cdn.media.amplience.net/i/ampproduct/?layer0=[src=/i//blue-dress-outside]&layer1=[src=/i//exampleRoundel]

Layering parameters
Link copied!

Image src
Link copied!

Parameter: src

The URL for the image in the specified layer. If you start the image URL with "/i//" then it will use the same partial domain as layer0 or the template you specified at the start of the URL.

Parameter examples
Link copied!

https://cdn.media.amplience.net/i/ampproduct/blue-dress-outside?layer1=[src=/i//exampleRoundel]

In this example the URL for the layer1 image is https://cdn.media.amplience.net/i/ampproduct/exampleRoundel

Positioning
Link copied!

Parameters: top, left, bottom, right

A layer can be positioned relative to the previous layer (for example layer1 is positioned relative to layer0). By default a layer is positioned in the top left of the previous layer. The top, left, bottom and right position of a layer are specified in pixels or as a percentage of the distance from the specified edge.

To further refine layer positioning you can use anchors.

Parameter example
Link copied!

The example below positions layer1 50% from the top and left of layer0:

https://cdn.media.amplience.net/i/ampproduct/blue-dress-outside?layer1=[src=/i//exampleRoundel&top=50%&left=50%]

Anchor
Link copied!

Parameter: anchor

Anchors are used to select which edge of the image that you want to align against. Combine anchors with positioning to further control the position of a layer within the previous layer.

Anchor positions are as follows:

Anchor parameterDescription
TLTop left
TCTop center
TRTop right
MLMiddle left
MCMiddle center
MRMiddle right
BLBottom left
BCBottom center
BRBottom right

Parameter example
Link copied!

The example below positions the middle centre of layer one 50% from the top left of layer0:

https://cdn.media.amplience.net/i/ampproduct/blue-dress-outside?layer1=[src=/i//exampleRoundel&anchor=MC&top=50%&left=50%]

Opacity
Link copied!

Parameter: opacity

A value between 0 and 100 that specifies the transparency of an image. 0 is fully transparent, 100 is solid.

Parameter example
Link copied!

https://cdn.media.amplience.net/i/ampproduct/blue-dress-outside?layer1=[src=/i//exampleRoundel&opacity=50]

Visibility
Link copied!

Parameter: visible

Specifies the visibility of a layer. 0 is invisible, 1 is visible. Layers are visible by default.

Parameter example
Link copied!

https://cdn.media.amplience.net/i/ampproduct/blue-dress-outside?layer1=[src=/i//exampleRoundel&visible=0]

Canvas
Link copied!

Parameter: canvas

Provides the ability to draw a quadrilateral shape on a layer that other layers can draw onto. You can optionally specify a background color. The default background color is white.

Parameter example
Link copied!

https://cdn.media.amplience.net/i/ampproduct/?layer0=[canvas=700,400&bg=rgb(0,0,255)]&layer1=[src=/i//exampleRoundel]

Text layers
Link copied!

Text can be layered on top of an image by adding it in a layer as shown in the following example:

https://cdn.media.amplience.net/i/ampproduct/girlwithballoons?layer1=[text=Time%20to%20celebrate&fontSize=48&textColor=white]

Text
Link copied!

Parameter: text

The text to show in the layer. You can add a new line character by including by including \n in the string.

Font size
Link copied!

Parameter: fontSize

The font size to use for the text. If no font size is specified it will default to 10.

Font family
Link copied!

Parameter: fontFamily

The font family to use for the text. If you don't specify a font family, or specify a font that is not installed on your account, then it will default to Helevetica.

Font style
Link copied!

Parameter: fontStyle

Which style of font to use: normal, italic or oblique.

Font style selection follows CSS rules.

Font weight
Link copied!

Parameter: fontWeight

Sets the thickness of the text. Valid values are from 100 to 900 in multiples of 100. You can also specify normal (400) or bold (700).

Font stretch
Link copied!

Parameter: fontStretch

Makes text wider or narrower if the font family has appropriate variants. Font selection will follow the CSS rules.

Supported values:

  • ultra-condensed
  • extra-condensed
  • condensed
  • semi-condensed
  • normal
  • semi-expanded
  • expanded
  • extra-expanded
  • ultra-expanded

Text color
Link copied!

Parameter: textColor

The color of the text. If no color is specified the text will be black. Values can be hex, rgb or colour names.

Parameter example
Link copied!

https://cdn.media.amplience.net/i/ampproduct/girlwithballoons?layer1=[text=Time%20to%20celebrate&textColor=rgb(255,255,255)]

Text decoration
Link copied!

Parameter: textDecoration

The decoration added to the text.

Supported values are:

  • underline
  • overline
  • linethrough

Text alignment
Link copied!

Parameter: textAlign

How the text is aligned within its layer. If no alignment is specified the text will be default to left aligned.

Alignment will be used when text is divided over more than one line by using the newline "\n" character.

Parameter example
Link copied!

https://cdn.media.amplience.net/i/ampproduct/girlwithballoons?layer1=[text=Time%20for\ncelebration&fontSize=48&textColor=white&textAlign=center]

Metadata
Link copied!

This section shows how to retrieve metadata associated with images. For sets see the Sets API section.

Retrieve all metadata
Link copied!

Parameter: metadata=true

Returns all the metadata associated with an image.

Supported types:

TypeDescription
jsReturns the data in JSON format wrapped in a JSONP wrapper
json Returns the data in JSON format
xmlReturns the data in XML format

Parameter example
Link copied!

https://cdn.media.amplience.net/i/ampproduct/Hero-Banner-720-model2.json?metadata=true

Return specified metadata
Link copied!

Parameter: metadata=true&metaFilter={name}

Returns the specified of the specified type.

metaFilter=* will return metadata for all types.

Parameter example
Link copied!

This example retrieves the POI focal point metadata associated with the image. Note that the "image" metadata is always included:

https://cdn.media.amplience.net/i/ampproduct/Hero-Banner-720-model2.json?metadata=true&metaFilter=pointOfInterest

Referencing metadata in a query
Link copied!

You can reference metadata within a query. To reference metadata in the same layer, use {$this.metadata}.

When working with images with multiple layers, you can use $root to refer to the root layer and $parent to refer to the parent layer. See the metadata playground page for more details.

Parameter examples
Link copied!

To crop an image using the POI metadata associated with an image, you can use the following query:

https://cdn.media.amplience.net/i/ampproduct/Hero-Banner-720-model2?w=320&h=480&sm=c&poi={$this.metadata.pointOfInterest.x}, {$this.metadata.pointOfInterest.y}, {$this.metadata.pointOfInterest.w}, {$this.metadata.pointOfInterest.h}&scaleFit=poi

Other features
Link copied!

Missing image
Link copied!

Parameter: img404

The filename of the fallback image to display if an image cannot be found. The specified fallback image must be a published image on the same account. You can specify img404 as a parameter in a query string or transformation template or Amplience can apply this at the account level.

Parameter example
Link copied!

?img404=yourcompanyimagenotfound

Variables
Link copied!

Parameter: ${variable}=

Variables, prefixed with "$", can be included in a query string, set to hold specified values and used throughout the query.

Parameter example
Link copied!

The following example sets the variable imageheight to 300 and then uses this variable to set the height of the image to 300 px.

exampleimage?imageheight=300&h=$imageheight

The following scales the image by the inverse of the scalefactor.

https://cdn.media.amplience.net/i/ampproduct/party-fashion?w={(1/$scalefactor)*100%}&scalefactor=2

Conditionals
Link copied!

Parameters: ==,>,<, >=, <=,!=

Format: {($variable==value)?true:false}

Supported types are number, string and boolean. Strings must be assigned to variables before being used in comparisons.

Parameter example
Link copied!

In the following example if $value1 and $value2 are equal, this will set the width of the image to 200 px, otherwise the image will be set to 400 px. Because in this case the values are different, the image will be set to 400 px.

https://cdn.media.amplience.net/i/ampproduct/Hero-Banner-720-model2?w={($value1==$value2)?200:400}&value1=1&value2=5

Expressions
Link copied!

Parameters: +, -, /, *

Expressions can be included in queries and must be wrapped in {}. The expressions engine supports addition, subtraction, division and multiplication. Variables can also be used.

Parameter example
Link copied!

In this example the width of the image is set to 300.

myimage?w={$firstValue+$secondValue}&firstValue=100&secondValue=200

You can also use percentages. This following sets the image to 25% of its size.

myimage?w={25%}

Sets
Link copied!

Sets are named groupings of assets that can be manipulated using Dynamic Media.

The available parameters for manipulating sets are shown below. You can try out the Set API with real examples on the playground.

Set images
Link copied!

You can return the specified element of a set as an image:

  • The first element of a set
  • The nth element of a set
  • The nested nth element of a set

The following example shows how to return the second element of a set:

https://cdn.media.amplience.net/s/ampproduct/mytestset/2

Return image
Link copied!

Supported parameters:

/s/{account}/{setName}

/s/{account}/{setName}?{param}

/s/{account}/{setName}/seoFilename

Returns the first element of the set as an image. For a video the thumbnail will be returned.

The following example will return the first element of the set "mytestset" as an image.

https://cdn.media.amplience.net/s/ampproduct/mytestset?w=400

Image manipulation parameters may also be applied to the image:

https://cdn.media.amplience.net/s/ampproduct/mytestset?w=300

Return nth image
Link copied!

Supported parameters:

/s/{account}/{set}/{n}

/s/{account}/{set}/{n}?{param}

Returns the nth element of the set. Note that 1 is the first element.

The following example shows how to return element 3 of the set "mytestset":

https://cdn.media.amplience.net/s/ampproduct/mytestset/3

Return nested nth image
Link copied!

Parameter: /s/{account}/{set}/{n}/{n}

Returns the nested nth image.

Set metadata
Link copied!

The Set Metadata API returns the elements of a set in the requested format. For each format you can specify additional parameters to manipulate the result.

You can retrieve metadata in JSONP, JSON, XML, text and HTML format.

The following example shows how to retrieve metadata in JSON format:

https://cdn.media.amplience.net/s/ampproduct/mytestset.json

Additional information for each format is shown below.

JSONP format
Link copied!

Parameter: /s/{account}/{setName}.js

Returns the data in JSON format wrapped in a JSONP wrapper. This allows data to be loaded without cross site scripting problems.

You can use the following additional parameters to manipulate the response:

ParameterDescription
qualSpecifies if the image URL returned is fully qualified. The default is true
qryThe query string appended to all set elements. You can also specify a transformation template. Example: https://cdn.media.amplience.net/s/ampproduct/mytestset.js?qry=$exampletemplate$
deeptrue if the structured of nested sets will be returned. The default is false
funcThe name of the JSONP callback function
arg Optional argument sent to the callback function

JSON format
Link copied!

Parameter: /s/{account}/{setName}.json

Returns the data in JSON format.

You can use the following additional parameters to manipulate the response.

ParameterDescription
qualSpecifies if the image URL returned is fully qualified. The default is true
qryThe query string appended to all set elements. You can also specify a transformation template. Example: https://cdn.media.amplience.net/s/ampproduct/mytestset.js?qry=$exampletemplate$
deeptrue if the structured of nested sets will be returned. The default is false

XML format
Link copied!

Parameter: /s/{account}/{setName}.xml

Returns the set elements in XML format. You can use the following additional parameters to manipulate the response:

ParameterDescription
qualSpecifies if the image URL returned is fully qualified. The default is true
qryThe query string appended to all set elements. You can also specify a transformation template. Example: https://cdn.media.amplience.net/s/ampproduct/mytestset.js?qry=$exampletemplate$
deeptrue if the structured of nested sets will be returned. The default is false

Text format
Link copied!

Parameter: /s/{account}/{setName}.txt

Returns the set elements in plain text format.

You can use the following additional parameters to manipulate the response:

ParameterDescription
qualSpecifies if the image URL returned is fully qualified. The default is true
qryThe query string appended to all set elements. You can also specify a transformation template. Example: https://cdn.media.amplience.net/s/ampproduct/mytestset.js?qry=$exampletemplate$
deeptrue if the structured of nested sets will be returned. The default is false

HTML format
Link copied!

Parameter: /s/{account}/{setName}.html

Returns the set elements in HTML format within a ul tag. Each element is returned within li tags.

You can use the following parameters to manipulate the response:

ParameterDescription
qualSpecifies if the image URL returned is fully qualified. The default is true
qryThe query string appended to all set elements. You can also specify a transformation template. Example: https://cdn.media.amplience.net/s/ampproduct/mytestset.js?qry=$exampletemplate$
deeptrue if the structured of nested sets will be returned. The default is false
ulClsA CSS class that will be added to all ul tags in the response
liClsA CSS class that will be added to all li tags in the response
sizeIf true the original width and height of the image will be added to the img tag

SEO
Link copied!

You can add SEO text to a URL so that it is included in image requests and search engine results. This is designed to help improve the page score and drive search engine traffic. Adding SEO text to the URL is particularly useful in the cases where you use a naming convention using product codes and you want to provide a friendly name to be searched for.

For example if an image of a red dress is named:

https://cdn.media.amplience.net/i/ampproduct/1377455-collection-spring

You can add the SEO text womens/spring/red-dress as follows:

https://cdn.media.amplience.net/i/ampproduct/1377455-collection-spring/womens/spring/red-dress

The SEO text would then be included in the search engine results when someone is searching for a red dress for spring.

Sets and SEO
Link copied!

You need to be careful when adding SEO text to a set and the SEO text starts with a number. For example the following will return a "file not found" error because Dynamic Media is looking for the 3rd item in the set. In this case the set contains 2 items, so the 3rd item cannot be found.

https://cdn.media.amplience.net/s/ampproduct/spring-collection-set/3-red-dress/womens/spring

To get around this problem you can just add a non numeric character to the start of the SEO name. In the example below first item in the set will be returned.

https://cdn.media.amplience.net/s/ampproduct/spring-collection-set/_3-red-dress/womens/spring

Video
Link copied!

You can access video encoded using a particular profile by including the profile in the URL. For example, using the following URL will return the winter-coat video encoded using the mp4_720p profile.

https://cdn.media.amplience.net/v/ampproduct/winter-coat/mp4_720p

The HTML <video> tag can include multiple src attributes, so you can specify the URL for a video encoded using each of the profiles you support and the browser will choose which video to use.

In the example shown below, Chrome and Firefox will look for the WebM format video. If the WebM file does not exist at the specified URL then the next available MP4 file will be used. Safari does not support WebM and so would choose the first available MP4 file in the source list.

 <video controls>
<source src="https://cdn.media.amplience.net/v/ampproduct/winter-coat/webm720p" type="video/webm" codecs="vp8, vorbis">
<source src="https://cdn.media.amplience.net/v/ampproduct/winter-coat/mp4_720p" type="video/mp4" codecs="h264, aac">
<source src="https://cdn.media.amplience.net/v/ampproduct/winter-coat/mp4_480p" type="video/mp4" codecs="h264, aac">
</video>

Accessing the video URL without including a profile returns the video's poster frame, or the first frame of the video if no poster frame has been set.

https://cdn.media.amplience.net/v/ampproduct/winter-coat

Serving video over HTTPS
Link copied!

In order to serve video over HTTPS you need to add protocol=https to the end of the video URL:

https://cdn.media.amplience.net/v/ampproduct/ski-collection/mp4_720p?protocol=https

protocol=https can also be specified in the root template for your account.

Video thumbnails
Link copied!

When video is ingested, 100 thumbnails are generated from frames at regular intervals throughout the video.

The following parameters can be applied to return the poster frame or the specified thumbnail.

Return poster frame
Link copied!

Parameter: /v/{account}/{videoname}

Returns the poster frame for the video. If this is not set it will return the first thumbnail generated. The poster frame can be manipulated using standard parameters.

Parameter examples
Link copied!

https://cdn.media.amplience.net/v/ampproduct/ski-collection.png
https://cdn.media.amplience.net/v/ampproduct/ski-collection.jpg?h=400

Return specified thumbnail
Link copied!

Parameter: /v/{account}/{videoname}/thumbs/{thumb}

Return the thumbnail with the specified index. The thumbnail can be manipulated using standard parameters.

Parameter examples
Link copied!

https://cdn.media.amplience.net/v/ampproduct/ski-collection/thumbs/frame_0020.png
https://cdn.media.amplience.net/v/ampproduct/ski-collection/thumbs/frame_0020.jpg?h=400

Video metadata
Link copied!

Video metadata will include information about all, or one specified profile and each frame.

The metadata can be returned in JSONP, JSON, XML and text formats. A sitemap can also be generated from the video metadata.

JSONP format
Link copied!

Parameter: /v/{account}/{videoname}.js

Returns the data in JSON format wrapped in a JSONP wrapper. This allows data to be loaded without cross site scripting problems.

You can use the following additional parameters to manipulate the response:

ParameterDescription
qualSpecifies if the video URL returned is fully qualified. The default is true.
profileReturn data only for the specified profile name.
funcThe name of the JSONP callback function.
arg Optional argument sent to the callback function.
Parameter example
Link copied!

The following example returns the video metadata for the "web-720p" profile of the "ski-collection" video:

https://cdn.media.amplience.net/v/ampproduct/ski-collection.js?profile=webm-720p

JSON format
Link copied!

Parameter: /v/{account}/{videoname}.json

Returns the data in JSON format.

You can use the following parameters to manipulate the response:

ParameterDescription
qualSpecifies if the video URL returned is fully qualified. The default is true.
profileReturn data only for the specified profile name.
Parameter example
Link copied!

The following example returns the video metadata for the "web-720p" profile of the "ski-collection" video:

https://cdn.media.amplience.net/v/ampproduct/ski-collection.json?profile=webm-720p

XML format
Link copied!

Parameter: /v/{account}/{videoname}.xml

Returns the video metadata XML format. You can use the following arguments to manipulate the response:

ParameterDescription
qualSpecifies if the video URL returned is fully qualified. The default is true.
profileReturn data only for the specified profile name.
Parameter example
Link copied!

The following example returns the video metadata for the "web-720p" profile of the "ski-collection" video in XML format:

https://cdn.media.amplience.net/v/ampproduct/ski-collection.xml?profile=webm-720p

Text format
Link copied!

Parameter: /v/{account}/{videoname}.txt

Returns the set elements in plain text format. You can use the following arguments to manipulate the response:

ParameterDescription
qualSpecifies if the video URL returned is fully qualified. The default is true.
profileReturn data only for the specified profile name.
Parameter example
Link copied!

The following example returns the video metadata for the "web-720p" profile of the "ski-collection" video in text format:

https://cdn.media.amplience.net/v/ampproduct/ski-collection.txt?profile=webm-720p

Sitemap
Link copied!

Parameter: /v/{account}/{videoname}.sitemap

Generates a sitemap from the video metadata.

Parameter example
Link copied!
https://cdn.media.amplience.net/v/ampproduct/ski-collection.sitemap

Generating HTML to embed video
Link copied!

Adding ".html" to the video URL will return HTML with URL of each profile for a video enclosed within <video> tags on a HTML page.

Example:

https://cdn.media.amplience.net/v/ampproduct/winter-coat.html

The generated HTML is shown below:

<html>
<head>
<title>winter-coat</title>
</head>

<body style="background: rgb(0,0,0); margin:0px; padding:0px;">
<video
id="video"
width="100%"
height="100%"
style="background: rgb(0,0,0); width:100%; height:100%;"
controls=""
preload="auto"
poster="https://cdn.media.amplience.net/v/ampproduct/winter-coat"
>
<source
data-quality-label="High"
data-bitrate="1998"
src="https://cdn.media.amplience.net/v/ampproduct/winter-coat/mp4_720p"
type="video/mp4"
codecs="h264, aac"
/>
<source
data-quality-label="medium"
data-bitrate="586"
src="https://cdn.media.amplience.net/v/ampproduct/winter-coat/webm480p"
type="video/webm"
codecs="vp8, vorbis"
/>
<source
data-quality-label="Medium"
data-bitrate="606"
src="https://cdn.media.amplience.net/v/ampproduct/winter-coat/mp4_480p"
type="video/mp4"
codecs="h264, aac"
/>
<source
data-quality-label="high"
data-bitrate="1910"
src="https://cdn.media.amplience.net/v/ampproduct/winter-coat/webm720p"
type="video/webm"
codecs="vp8, vorbis"
/>
<source
data-quality-label="Low"
data-bitrate="326"
src="https://cdn.media.amplience.net/v/ampproduct/winter-coat/mp4_240p"
type="video/mp4"
codecs="h264, aac"
/>
</video>
</body>
</html>

Query parameters
Link copied!

The following query parameters may be specified and will be included in the generated HTML.

Example:

https://cdn.media.amplience.net/v/ampproduct/winter-coat.html?loop=true

Preload
Link copied!

Parameter: preload

Sets the preload attribute in the video tag. This provides a hint to the browsers about whether the video should be loaded when the page loads. Browsers may ignore this value.

Supported values:

ValueDescription
autoPreload the entire video
metadataOnly load the video metadata
noneDo not preload the video

Loop
Link copied!

Parameter: loop. true or false

Specifies if the video play continuously. The default is false.

Controls
Link copied!

Parameter: controls. true or false

Should the player controls be displayed. The default is true.

Video tag style attributes
Link copied!

Parameter: css

Style attributes to apply to the video tag.

Example:

https://cdn.media.amplience.net/v/ampproduct/winter-coat.html?css=background-color:red

Body tag style attributes
Link copied!

Parameter: bodyCSS

Style attributes that are applied to the body tag.

Example:

https://cdn.media.amplience.net/v/ampproduct/winter-coat.html?bodyCSS=background-color:red

Generate snippet
Link copied!

Parameter: snippet. true or false

If true only the video tag is returned rather than the HTML page. If this is not specified the default is false.

Bit rate
Link copied!

Parameter: bitrate

The required bitrate. The video profile with the bitrate closest to one specified will be chosen.

Example:

https://cdn.media.amplience.net/v/ampproduct/winter-coat.html?bitrate=400

Resize
Link copied!

Parameter: resize. true or false

Specifies whether the video will be resized to fit the screen. If this is not specified the default is true.

Auto play
Link copied!

Parameter: autoplay. true or false.

Specifies whether the video should start playing when the page loads. The default is false.

Width
Link copied!

Parameter: width

Set the width of the video in pixels.

Height
Link copied!

Parameter: height

Set the height of the video in pixels.

Accelerated Media
Link copied!

Accelerated Media includes the following features:

  • Amplience Smart Images
  • AVIF format support
  • Support for the VP9 and HEVC video codecs

To purchase Accelerated Media and have it enabled on your account, contact your Account Manager.

Media cache settings

Dynamic Media playground

Video transcode profiles

Working with video