URL Transformation API
The Transformation URL API is your friend when it comes to delivering media assets. You can do lots of amazing on-the-fly transformations simply by using URL parameters! This reference guide has got you covered on all the transformation parameters you need to know about, with syntax, value details, and even examples to help you out.
Also, please don't forget to rate the document at the end. It helps us improve the overall experience for You!
The delivery URL of the Front.Space asset has a default structure which goes like this:
This reference covers the parameters and corresponding options and values that can be used in the <transformations> element of the URL.
For information on other elements of the URL, see Transformation Basics
a (angle)
🖼️ - Image | 🎬 - Video This operation allows for the rotation or flipping of an asset based on a specific number of degrees or with automatic adjustments made according to its orientation or available metadata. Moreover, it also supports the application of multiple modes by concatenating their values with a dot.
Learn More at Rotating Images | Rotating Videos
<degrees>
🖼️ - Image | 🎬 - Video | Parameter: a_<degrees> Rotates an image or a video by the specified angle.
Syntax Details:
Value | Type | Description |
degrees | integer | The number of degrees to rotate the asset clockwise (positive value) or counter-clockwise (negative value). If the angle is not a multiple of 90, a rectangular bounding box is added containing the rotated asset. |
Examples:
1) Rotate an image by 45 degrees clock-wise (a_45):
2) Rotate an image by 90 degrees anti-clock-wise (a_-90):
<mode>
🖼️ - Image Only | Parameter: a_<mode> Rotates an image based on the specified mode.
Syntax Details:
Value | Type | Description |
mode | constant | Required. The rotation mode to apply. Possible values:
|
Examples:
1) Vertically mirror flip the image and then rotate it by another 50 degrees clockwise using the dot notation to apply more than one rotation option (a_vflip):
2) In the following example, the image is rotated counter-clockwise (a_auto_left) because the original image was a landscape (aspect ratio greater than 1), while the requested aspect ratio is portrait (aspect ratio = 0.7). If the requested aspect ratio had been 1.0 or larger, the same transformation would not result in rotation.
ar (aspect ratio)
🖼️ - Image | 🎬 - Video | Parameter: ar_<ratio value>
To achieve the desired aspect ratio, a qualifier can be applied to crop or resize the asset. The crop/resize mode determines how the asset is adjusted to fit the new dimensions.
Syntax Details:
Value | Type | Description |
ratio value | string | float | Required. The aspect ratio to apply. Can be set as either:
|
Examples:
1) Crop an image to an aspect ratio of 1.8 (ar_1.8,c_crop):
b (background)
🖼️ - Image | 🎬 - Video
Applies a background to empty or transparent areas.
<color value>
🖼️ - Image | 🎬 - Video | Parameter: b_<color_value> Applies the specified background color on transparent background areas in an image. Can also be used as a qualifier to override the default background color for padded cropping, text overlays and generated waveform images.
Syntax Details:
Value | Type | Description |
color value | string | Required. The background color to apply. It can be set as:
When specifying any RGB or RGBA value, always prefix the value in the URL with rgb: (without #). For example, b_rgb:FEB61FC2 or b_rgb:999. When using a named color, specify only the color name. For example b_blue. You may check out all the supported named Web colors here: Named Web Colors |
Examples:
1) Convert the transparent background of the iron_man.png image to a golden color (b_gold):
2) Scale to fit an image into a 300X300 square and pad any excess space with a pink background (b_pink):
3) Add a semi-transparent light blue background color to a text overlay (b_rgb:FEB61FC2,co_lightblue,l_text:Arial_100:Cat/fl_layer_apply):
auto
🖼️ - Image Only | Parameter: b_auto[:<mode>][:<number>][:<direction>][:palette_<color 1>[_..._<color n>]]ar_<ratio value>
Front.Space offers a qualifier that can automatically select the background color according to one or multiple predominant colors present in an image. This can be used in conjunction with our padding crop mode transformations to enhance the overall quality of the image.
Syntax Details:
Value | Type | Description |
mode | constant | The method to use for determining the solid or gradient color(s) to apply. Possible values: To automatically set the background to a single color:
To automatically apply a gradient fade to the background with multiple colors:
Default: border. |
number | integer | Relevant only when setting mode to one of the 'gradient' options. The number of predominant colors to select. Possible values: 2, 4. Default: 2. |
direction | constant | Relevant only when setting mode to one of the 'gradient' options and when 2 colors are selected for the number option. Specifies the direction to blend the 2 colors together. (If 4 colors are selected, each gets interpolated between the four corners and this parameter is ignored.) Possible values: horizontal, vertical, diagonal_desc, diagonal_asc. Default: horizontal. |
color 1 to color n | string | The palette of colors to use in the border. For each color, specify either:
|
Examples:
1) Pad an image to a width and height of 150 pixels, and with the background color set to the predominant color from that image (b_auto:predominant,c_pad,h_150,w_150):
2) Pad an image to a width and height of 150 pixels, and with the background color set to the 2 most predominant colors from that image, blended in a diagonally descending direction (b_auto:predominant_gradient:2:diagonal_desc,c_pad,h_150,w_150):
3) Pad an image to a width and height of 150 pixels, with a 4 color gradient fade in the auto colored padding, and limiting the possible colors to red, green, blue, and orange (b_auto:predominant_gradient:4:palette_red_green_blue_orange,c_pad,h_150,w_150):
blurred
🎬 - Video Only | Parameter: b_blurred[:<intensity>][:<brightness>] A qualifier that produces a blurred version of the video, which can then be used as the background along with the appropriate padding and cropping transformations.
Syntax Details:
Value | Type | Description |
intensity | integer | The amount of blurring. Range: 1 to 2000. Default: 100. |
brightness | integer | The brightness of the blurred background video. Range: -300 to 100. Default: 0. |
c (crop/resize)
🖼️ - Image | 🎬 - Video The size of the delivered asset will be adjusted as per the requested width and height dimensions. The selected <crop mode> may crop out certain parts of the original asset and may also cause resizing (scaling up or down) of the asset. In case of any mode that can potentially crop parts of the asset, the selected gravity parameter will determine the part of the original asset that will be retained in the delivered file.
Learn more: Resizing and Cropping Images
crop
🖼️ - Image | 🎬 - Video | Parameter: c_crop Extracts the specified size from the original image without distorting or scaling the delivered asset.
By default, the center of the image is kept (extracted) and the top/bottom and/or side edges are evenly cropped to achieve the requested dimensions. You can specify the gravity qualifier to control which part of the image to keep, either as a compass direction (such as south or north_east) or one of the special gravity positions (such as faces or ocr_text)
You can also specify a specific region of the original image to keep by specifying x and y qualifiers together with w (width) and h (height) qualifiers to define an exact bounding box. When using this method, and no gravity is specified, the x and y coordinates are relative to the top-left (north-west) corner of the original asset. You can also use percentage based numbers instead of the exact coordinates for x, y, w and h (e.g., 0.5 for 50%). Use this method only when you already have the required absolute cropping coordinates. For example, you might use this if your application allows a user to upload user-generated content, and your application allows the user to manually select a region to crop from the original image, and you pass those coordinates to build the crop URL.
Required Qualifiers:
Two of the following: w (width) | h (height) | ar (aspect ratio)
(In rare cases, you may choose to provide only one sizing qualifier)
Optional Qualifiers:
g (gravity) | x (x-coordinate) | y (y-coordinate)
Example:
1) Crop an image to a width of 1600 pixels, and a height of 1650 pixels, with northwest gravity (c_crop,g_north_west,h_1650,w_1600):
fill
🖼️ - Image | 🎬 - Video | Parameter: c_fill
To maintain the asset's original form, you can create an asset with the exact specified width and height. The process involves scaling the asset to fill both specified dimensions, as needed. If the requested aspect ratio is not the same as the original, cropping will occur on the exceeding dimension after scaling. To keep your preferred part of the original asset, you can adjust the gravity to specify which part to retain. By default, the gravity is set to 'center'.
Required Qualifiers:
At least one of the following: w (width) | h (height) | ar (aspect ratio)
Optional Qualifiers:
g (gravity)
Examples:
1) Fill to a width of 300 and height of 500 pixels (c_fill,h_500,w_500):
2) Fill to a width and height of 500 pixels with west gravity (c_fill,g_west,h_500,w_300):
fill_pad
🖼️ - Image | 🎬 - Video | Parameter: c_fill_pad Tries to prevent a "bad crop" by first attempting to use the fill mode, but adding some padding if the algorithm determines that more of the original image needs to be included in the final image, or if more content in specific frames in a video should be shown. Especially useful if the aspect ratio of the delivered asset is considerably different from the original's aspect ratio. Supported only in conjunction with g_auto.
Required Qualifiers:
g_auto and two of the following: w (width) | h (height) | ar (aspect ratio)
Optional Qualifiers:
b (background) - image only
Example:
1) Deliver an image as a 25x150 image using the fill_pad mode. (b_auto,c_fill_pad,g_auto,h_150,w_25). Compare this to the same image delivered using the regular fill mode (shown below on the right).
fit
🖼️ - Image | 🎬 - Video | Parameter: c_fit
The asset can be scaled up or down to occupy maximum space within a bounding box defined by the specified dimension parameters, without any cropping. The aspect ratio of the original image will be maintained and the entire original image will remain visible. This process can be done in a professional manner.
Required Qualifiers:
At least two of the following: w (width) | h (height) | ar (aspect ratio)
Example:
1) Fit to a width of 300 and height of 500 pixels (c_fit,h_500,w_300):
lfill
🖼️ - Image Only | Parameter: c_lfill
The lfill (limit fill) mode functions similarly to the fill mode, with the exception that it only applies if the original image surpasses the defined resolution limits. In such cases, the image is proportionately scaled down to meet the specified width and height parameters without any distortion. Next, the dimension that exceeds the request is cropped. In the event that the original image's dimensions are smaller than the requested size, no resizing occurs to prohibit upscaling. The cropping that occurs can be controlled by the gravity parameter. By default, gravity is set to center.
Required Qualifiers:
Two of the following: w (width) | h (height) | ar (aspect ratio)
Optional Qualifiers:
g (gravity)
Example:
1) Limit-fill an image to a width of 400 pixels and height of 500 pixels (c_lfill,h_500,w_400):
limit
🖼️ - Image | 🎬 - Video | Parameter: c_limit
In case the original asset is larger than the specified limit (width and height), the fit mode is applied but with a scaling down of the asset. This ensures that the asset occupies as much space as possible within a bounding box defined by the specified width and height parameters. By default, the original aspect ratio is retained and the complete asset is visible. However, kindly note that this mode doesn't scale up the asset if the requested dimensions exceed the original image size.
Required Qualifiers:
Two of the following: w (width) | h (height) | ar (aspect ratio)
Example:
1) Limit an image to a width of 400 pixels and height of 500 pixels (c_limit,h_500,w_400):
lpad
🖼️ - Image | 🎬 - Video | Parameter: c_lpad
The lpad (limit pad) mode functions similarly to the pad mode, but only in cases where the original asset is larger than the specified limit (width and height). In such cases, the asset is scaled down to occupy the specified width and height while preserving its original aspect ratio. Under no circumstance will the asset be scaled up if the requested dimensions exceed its original size. However, if the proportions of the original asset do not match the requested width and height, padding will be introduced to reach the required size. The gravity parameter (set to center by default) can be employed to determine where the asset is positioned. Additionally, you can determine the background color in case padding is introduced.
Required Qualifiers:
Two of the following: w (width) | h (height) | ar (aspect ratio)
Optional Qualifiers:
g_<gravity position> | b (background)
Example:
1) Limit-pad an image with a green background to a width of 400 pixels and height of 500 pixels (b_lightblue,c_lpad,h_500,w_400):
mfit
🖼️ - Image Only | Parameter: c_mfit
The mfit mode, which stands for minimum fit, functions similarly to fit mode. However, it only applies if the original image is smaller than the minimum dimensions specified (both width and height). In this case, the image is scaled up to fill as much of the specified bounding box as possible. The original aspect ratio is preserved by default, and the entire original image is visible. Notably, using this mode will not scale down the image if the requested dimensions are smaller than the original image's.
Required Qualifiers:
Two of the following: w (width) | h (height) | ar (aspect ratio)
Example:
1) Fit a large image to a minimum width of 400 pixels and height of 500 pixels while retaining the aspect ratio. This results in delivering the original image without resizing it (c_mfit,h_500,w_400):
mpad
🖼️ - Image Only | Parameter: c_mpad
The minimum pad (mpad) mode functions similarly to the pad mode, only differing in situations wherein the original image is smaller than the indicated minimum values for width and height. In such cases, the image retains its original size but gains padding to match the specified dimensions. If the requested dimensions are smaller than the original image's, the image will not undergo scaling. By default, the original image gravity is center, but you have the option to set the gravity parameter to place it elsewhere. You may also indicate the preferred background color for cases involving added padding.
Required Qualifiers:
Two of the following: w (width) | h (height) | ar (aspect ratio)
Optional Qualifiers:
g_<gravity position> | b (background)
Example:
1) Pad a large image to a minimum width of 400 pixels and height of 500 pixels while retaining the aspect ratio. This results in delivering the original larger image (c_mpad,h_500,w_400):
2) Pad with a green background, a 4032 x 3024 pixels -wide image to a minimum width and height of 1500 pixels while retaining the aspect ratio (b_green,c_mpad,h_4500,w_4500):
pad
🖼️ - Image | 🎬 - Video | Parameter: c_pad
Resizes the asset to fill the specified width and height while retaining the original aspect ratio (by default) and with all of the original asset visible. If the proportions of the original asset do not match the specified width and height, padding is added to the asset to reach the required size. You can also specify where the original asset is placed using the gravity parameter (set to center by default). Additionally, you can specify the color of the background in the case that padding is added.
Required Qualifiers:
Two of the following: w (width) | h (height) | ar (aspect ratio)
Optional Qualifiers:
g_<gravity position> | b (background)
Example:
1) Pad an image with a lightblue background to a width and height of 4500 pixels (b_black,c_pad,h_150,w_150):
scale
🖼️ - Image | 🎬 - Video | Parameter: c_scale The asset will be resized to the exact width and height specified while ensuring that all original parts of the asset remain visible. However, it is important to note that if the dimensions you request have a different aspect ratio than the original, then some parts of the asset might appear stretched or shrunk.
Required Qualifiers:
At least one of the following: w (width) | h (height) | ar (aspect ratio)
Optional Qualifiers:
fl_ignore_aspect_ratio | g_liquid
Example:
1) Scale to a width of 1500 pixels (maintains the aspect ratio by default) (c_scale,w_1500)
2) Scale to a width and height of 1500 pixels (does not maintain the aspect ratio) (c_scale,h_1500,w_1500)
thumb
🖼️ - Image Only | Parameter: c_thumb
Our image thumbnail creation feature allows for both face-detection and custom coordinate options. However, it is important to always include the "g (gravity)" parameter, either with a face detection or a g_custom value for accuracy. This cropping method results in a thumbnail with precise width and height dimensions while maintaining the original proportions. Please note that the resulting image may be scaled to fit within these dimensions. For further customization, you may include the "z (zoom)" parameter to adjust the zoom scale within the specified dimensions.
Required Qualifiers:
g (gravity) set to one of the face detection or custom special gravity positions. And Two of the following: w (width) | h (height) | ar (aspect ratio)
Optional Qualifiers:
z (zoom)
Example:
1) Crop an image to a 150x150 thumbnail using face detection (c_thumb,g_face,h_150,w_150):
co (color)
🖼️ - Image | 🎬 - Video | Parameter: co_<color value> A qualifier that specifies the color to use with the corresponding transformation.
Syntax Details:
Value | Type | Description |
color value | string | Required. The color to apply. It can be set as:
When specifying any RGB or RGBA value, always prefix the value in the URL with rgb: (without #). For example, co_rgb:FEB61FC2 or co_rgb:999. When using a named color, specify only the color name. For example co_blue. |
Example:
1) Apply a colorize effect to an image, using an RGB hex triplet to define the green color for the colorize effect (co_rgb:20a020,e_colorize:50)
2) Outline a transparent shape, using 'orange' as the outline color (co_brown,e_outline:50)
e (effects)
🖼️ - Image | 🎬 - Video Applies the specified effect to an asset.
background_removal
🖼️ - Image Only | Parameter: e_background_removal
Use this effect to make the background transparent.
Examples:
1) Remove the background from the image (rider_on_bike.jpg):
2) Remove the background of the product image (product1.png) and replace it on a background image (product_bg.jpg), shrink & place the product on the pink-platform and announce 50% off using text on top-right corner of the image with 50 pixel padding from the edges:
f (format)
🖼️ - Image | 🎬 - Video The asset will be converted, if needed, to its specified format and delivered regardless of the file extension used in the delivery URL. This is applicable for automatic format selection (f_auto) and when retrieving remote assets, while still retaining the original file extension of the delivery URL.
<supported format>
🖼️ - Image | 🎬 - Video | Parameter: f_<supported format> Converts and delivers an asset in the specified format.
Syntax Details:
Value | Type | Description |
supported format | string | Required. The format to use when delivering the asset. Possible values: Any supported delivery format as relevant for the file type you are delivering: |
Examples:
1) Convert and deliver a JPEG image into PNG format (f_png):
auto
🖼️ - Image | 🎬 - Video | Parameter: f_auto[ :media type]
Automatically generates and delivers the requested asset in the most optimal format for the browser in order to minimize file size. Additionally, you have the option to include a media type to ensure that the asset is delivered with the desired media type even when no file extension is provided. For instance, if you are delivering a video and no file extension is provided while using f_auto, the media type will default to an image unless you use f_auto:video
💡 Tip: When used in conjunction with automatic quality (q_auto), sometimes the selected format is not the one that minimizes file size, but rather the format that yields the optimal balance between smaller file size and good visual quality.
Syntax Details:
Value | Type | Description |
media type | string | The media type to use when delivering the asset. Possible values: image, video, animated. |
Examples:
1) Deliver the sample2.jpg image as a WebP, AVIF or JPEG-2000, depending on the browser (or as a regular JPEG to browsers that support none of the aforementioned formats):
fl (flag)
🖼️ - Image | 🎬 - Video Alters the regular behavior of another transformation or the overall delivery behavior.
💡 Tip: You can apply multiple flags by separating the individual flags with a dot (.)
layer_apply
🖼️ - Image | 🎬 - Video | Parameter: fl_layer_apply
The use of the qualifier fl_layer_apply permits the application of chained transformations to be overlaid on images or videos. When utilizing this qualifier, the first component of the overlay (l_<Origin_Name:Media_Path>) acts as the opening parenthesis of the transformation, and the fl_layer_apply component acts as the closing parenthesis. Any intermediate transformation components are applied as a series of chained transformations to the overlayed asset itself, rather than to the base asset.
<origin_name:media_path>
🖼️ - Image | 🎬 - Video | Parameter: l_<Origin_Name:Media_Path>
The <Origin_Name:Media_Path> comprises of two components:
1) Origin Name
2) Media Path Example: l_demo-origin:front_space_logo.png will select the front_space_logo.png image as an overlay layer defined at the origin named as demo-origin.
In addition, this flag is mandatory when concatenating images to videos or when concatenating videos that incorporate custom transitions.
Use with: l_<Origin_Name:Media_Path> | l_audio | l_video
Example:
1) The sample5 image scaled to a width of 500 pixels with a r (radius) defined as 250 pixels and added background color of yellow before adding the front_space_logo.png image as an overlay. The overlay image is automatically resized to only occupy 15% of the relative dimensions of the base image using fl_relative,w_0.15. Additionally, both the g (gravity) and offset parameters x and y are applied to the overlay to give space against the boundary. The fl_layer_apply flag ensures that all of these transformations are applied to an overlay image (l_demo-origin:front_space_logo.png,fl_relative,w_0.15/fl_layer_apply,g_south_east,y_5,x_5):
relative
🖼️ - Image | 🎬 - Video | Parameter: fl_relative
To ensure precise resizing of overlay and underlay image layers, Front.Space offers the Qualifier feature called "relative". By using percentage-based values (e.g. 0.8) with this feature, the values will be interpreted as relative to the size of the base image, rather than the original size of the specified overlay image. This allows for consistent and accurate application of overlays, regardless of the size of the base image.
Use with: l_ | u (underlay)
Examples:
1) Add a Front.Space logo overlay to the north-east corner of the sample image at 25% of the width of sample5 image:
g (gravity)
🖼️ - Image | 🎬 - Video
The 'g' (gravity) qualifier functions as a tool to specify the focal point of an asset and, consequently, which section of the asset should remain visible following cropping. When using overlays in conjunction with this setting, the placement of the overlay will be dependent on the specified focal point.
<compass position>
🖼️ - Image | 🎬 - Video | Parameter: g_<compass position> A qualifier that defines a fixed location within an asset to focus on.
Use with: c_crop | c_fill | c_lfill | c_lpad | c_mpad | c_pad | c_thumb | l_ | l_fetch | l_text | l_subtitles | l_video | u (underlay) | x, y (x & y coordinates)
Syntax Details:
Value | Type | Description |
compass position | constant | Required. The compass direction represents a location in the asset, for example, north_east represents the top right corner. Possible Values: north_east, north, north_west, west, south_west, south, south_east, east, or center. Default: center. |
Example:
1) Crop an image to 1500x1500 while focusing on the north west (top left) section (c_crop,g_north_west,h_1500,w_1500):
h (height)
🖼️ - Image | 🎬 - Video | Parameter: h_<height value> This qualifier helps in defining the height of an image or video
Use with: c (crop/resize) | l (layer) | u (underlay)
Syntax:
Value | Type | Description |
height value | integer | float | constant | Required. The height of the asset. Set to:
|
Examples:
1) Resize the image to a height of 150 pixels while maintaining aspect ratio (c_scale,h_150):
2) Resize the image to 30% of its original size (c_scale,h_0.3):
l (layer)
🖼️ - Image | 🎬 - Video
When working with a base asset, it is common to apply a layer over it, known as an overlay. This overlay can take the form of an image or video overlay, a text overlay, subtitles for a video, or a 3D lookup table for images or videos.
To customize the overlay, you can adjust its dimension and position. This can be done by using parameters such as w (width), h (height), x, y (x & y coordinates), and g (gravity) as part of the overlay transformation.
Moreover, you have the flexibility to apply any supported image or video transformation to the overlay. This includes the ability to apply chained transformations, by using the fl_layer_apply flag to indicate the end of the layer transformations.
<origin_name:media_path>
🖼️ - Image | 🎬 - Video | Parameter: l_<origin_name:media_path> Overlays an image or a video on the base image or video. You can adjust the dimensions and position of the overlay with the w (width), h (height), x, y (x & y coordinates) and g (gravity) parameters with the overlay transformation.
Optional Qualifiers:
bo (border) | du (duration) | fl_relative | g_<compass position> | h (height) | so (start offset) | w (width) | x, y (x & y coordinates)
Syntax Details:
Value | Type | Description |
origin_name:media_path | string | Required. origin_name: the Origin name set in the Origins where the image/video to be added as overlay is uploaded. media_path: The public path of the uploaded image or video to overlay. |
Example: l_demo-origin:front_space_logo.png will select the front_space_logo.png image as an overlay layer defined at the origin named as demo-origin.
audio
🖼️ - Image | 🎬 - Video | Parameter: l_audio<Origin_Name:Media_Path> Overlays the specified audio track on a base video, image or another audio track. If you specify a video to overlay, only the audio track will be applied. If you apply it on an image then it is rendered as a video comprising of a constant image and specified audio background. You can use this to mix multiple audio tracks together.
Optional Qualifiers: du (duration) | eo (end offset) | fl_layer_apply | fl_splice | so (start offset)
Syntax Details:
Value | Type | Description |
Origin_Name:Media_Path | string | Required. Origin_Name: the Origin name set in the Origins where the audio file to be added as overlay is uploaded. Media_Path: The public path of the uploaded audio or video to overlay. |
fetch
🖼️ - Image | 🎬 - Video | Parameter: l_fetch<base 64 encoded URL>
Overlays a remote image or video onto an image or video. Adjust the dimensions and position of the overlay with the w (width), h (height), x, y (x & y coordinates) and g (gravity) parameters with the overlay transformation.
Optional qualifiers:
bo (border) | du (duration) | eo (end offset) | fl_no_overflow | fl_region_relative | g_<compass position> | h (height) | so (start offset) | w (width) | x, y (x & y coordinates)
Syntax Details:
Value | Type | Description |
base64 encoded URL | string | Required. The base64 encoded URL of the remote image to use as an overlay. |
Examples:
1) Add a customised Front.Space image logo with URL: https://cdn-test.front.space/demo-project/e_sepia/demo-origin/front_space_logo.png (base 64 encoded as: aHR0cHM6Ly9jZG4tdGVzdC5mcm9udC5zcGFjZS9kZW1vLXByb2plY3QvZV9zZXBpYS9kZW1vLW9yaWdpbi9mcm9udF9zcGFjZV9sb2dvLnBuZw==), as an overlay, offset from the north west corner of the base image by (10, 10) pixels (l_fetch:aHR0cHM6Ly9jZG4tdGVzdC5mcm9udC5zcGFjZS9kZW1vLXByb2plY3QvZV9zZXBpYS9kZW1vLW9yaWdpbi9mcm9udF9zcGFjZV9sb2dvLnBuZw==,w_100/fl_layer_apply,g_north_west,x_10,y_10):
lut
🖼️ - Image | 🎬 - Video | Parameter: l_lut:<Origin_Name:Media_Path> Applies a 3D lookup table (3D LUT) to an image or video. LUTs are used to map one color space to another. The LUT file must first be uploaded to Front.Space as a raw file.
Syntax Details:
Value | Type | Description |
Origin_Name:Media_Path | string | Required. Origin_Name: the Origin name set in the Origins where the LUT file to be added as overlay is uploaded. Media_Path: The public path of the uploaded LUT file (which includes the .3dl extension) to overlay. |
text
🖼️ - Image | 🎬 - Video | Parameter: l_text:<Text Style>:<Text String> Adds a text overlay to an image or video.
You can customise the dimensions and position of the overlay with the w (width), h (height), x, y (x & y coordinates) and g (gravity) parameters with the overlay transformation.
Optional Qualifiers:
bo (border) | c_fit | co (color) | g_<compass position> | h (height) | w (width) | x, y (x & y coordinates)
Syntax Details:
Value | Type | Description |
text style | string | Required. The text styling parameters to use for the text overlay, separated by underscores. The parameters must include the font and size parameters, the rest are optional. See the table for a full listing of possible parameters (e.g.: Arial_50 or Helvetica_30_bold_underline_letter_spacing_20). |
text string | string | Required. The actual text to add as an overlay (e.g.: Hello world). Note: Text strings containing special characters need to be escaped. |
Styling Parameters:
Possible styling parameters for text overlays include:
Parameter | Description |
<font> | Required. The name of any universally available font or a custom font, specified as the public ID of a raw, authenticated font in your product environment. |
<size> | Required. The size of the text in pixels. |
<weight> | The font weight. Possible values:
|
<style> | The font style. Possible values:
|
<decoration> | The font decoration type. Possible values:
|
<alignment> | The text alignment. Possible values:
|
<stroke> | Whether to include an outline stroke. Set the color and weight of the stroke with the bo (border) parameter. Possible values:
|
letter_spacing_<value> | The spacing between the letters, in pixels. |
line_spacing_<value> | The spacing between multiple lines in pixels. |
antialias_<value> | The antialias setting to apply to the text. When this parameter is not specified, the default antialiasing for the subsystem and target device are applied. Possible values:
|
hinting_<value> | The outline hinting style to apply to the text. When this parameter is not specified, the default hint style for the font and target device are applied. Possible values:
|
Examples:
1) Add a text overlay stating "Elephant" using a 200 pixel Arial font (l_text:Arial_200:Elephant/fl_layer_apply,g_south_east):
2) Add a text overlay stating "Jungle Book!" (! = %21 escaped, ' ' (space) = %20 escaped) in Brown color in Arial font of 300 pixels (co_brown,l_text:Arial_300_bold_italic:Jungle%20Book%21/fl_layer_apply,g_south_east,x_100,y_100):
video
🎬 - Video Only | Parameter: l_video:<Origin_Name:Media_Path> Overlays the specified video on a base video.
You can customise the dimensions and position of the overlay with the w (width), h (height), x, y (x & y coordinates) and g (gravity) parameters with the overlay transformation.
Optional Qualifiers:
bo (border) | du (duration) | eo (end offset) | fl_layer_apply | fl_splice | g_<compass position> | h (height) | so (start offset) | w (width) | x, y (x & y coordinates)
Syntax Details:
Value | Type | Description |
Origin_Name:Media_Path | string | Required. Origin_Name: the Origin name set in the Origins where the video file to be added as overlay is uploaded. Media_Path: The public path of the uploaded video to overlay. |
o (opacity)
🖼️ - Image | 🎬 - Video | Parameter: o_<opacity level>
Adjusts the opacity of an asset and makes it semi-transparent.
💡 Tip: If the image format does not support transparency, the background color is used as a base instead (white by default). The color can be modified using the background parameter.
Syntax Details:
Value | Type | Description |
opacity level | integer | Required. The level of opacity. 100 means opaque, while 0 is completely transparent. Range: 0 to 100. |
Examples:
1) Reduce image opacity to 30% (o_30):
q (quality)
🖼️ - Image | 🎬 - Video | Parameter: q_<Quality Value>
Controls the quality of the delivered asset. Increasing the quality is a trade-off between enhancing visual quality and decreasing the file size of a media.
<quality level>
🖼️ - Image | 🎬 - Video | Parameter: q_<quality level>[:qmax_<quant value>][:<chroma>]
Sets the quality to the specified level.
⚠️ Caution: A quality level of 100 can increase the file size significantly, particularly for video, as it is delivered lossless and uncompressed. As a result, a video with a quality level of 100 isn't playable on every browser.
Syntax Details:
Value | Type | Description |
quality level | integer | Required. The level of quality. Range: 1 to 100. |
quant value | integer | Videos only. The maximum quantization value, used when transcoding to WebM (VP8/9). Helps to ensure that the video is not over-quantized, see Control the quality of WebM transcoding for details. Range: 1 to 100. Default: 100. |
chroma | constant | The chroma subsampling setting. Possible values:
|
Examples:
1) Deliver an image of the highest quality (q_100):
2) Deliver an image with low quality (q_20):
auto
🖼️ - Image | 🎬 - Video | Parameter: q_auto[:<quality type>]
Delivers an asset with an automatically determined appropriate level of quality that can be rendered seamlessly across browsers.
Syntax Details:
Value | Type | Description |
quality type | constant | The type of automatic quality. Possible values:
Default: good. |
Examples:
1) Automatically deliver a high quality image (q_auto:best):
2) Automatically deliver the optimal quality for an image: the smallest file size without affecting its visual quality (q_auto:good):
r (round corners)
🖼️ - Image | 🎬 - Video
This function can be used to round the corners of both images and videos.
r (radius)
🖼️ - Image | 🎬 - Video | Parameter: r_<pixel value>
Rounds all four corners of the asset using the same pixel radius.
Syntax Details:
Value | Type | Description |
pixel value | integer | Required. The radius value to apply to all four corners of the asset. |
Examples:
1) Generate an image with rounded edges of 200 pixels (r_200):
<selected corners>
🖼️ - Image | 🎬 - Video | Parameter: r_<pixel value1>[:<pixel value2>][:<pixel value3>][:<pixel value4>]
Rounds selected corners of an image or a video, based on the number of values specified
Syntax Details:
# of values | Type | Description |
2 values | integers |
|
3 values | integers |
|
4 values | integers | The pixel radius of each corner is defined separately, where the values represent the corners in clockwise order, starting with the top-left. |
Examples:
1) Generate an image with three rounded corners of varying radii (r_250:10:470:660):
2) Generate an image with two rounded corners of 200 pixels in radius, and two rounded corners of 800 pixels in radius (r_200:800):
max
🖼️ - Image | 🎬 - Video | Parameter: r_max
Delivers the asset as a rounded circle if the aspect ratio of asset is 1:1 or oval shape (for all other aspect ratios of asset)
Examples:
1) Generate an image with an oval crop using the 'max' radius value (r_max):
2) Generate an image with a circular crop by resizing it to a square and then using the 'max' radius value (ar_1.0,w_2000,c_fill/r_max):
w (width)
🖼️ - Image | 🎬 - Video
A qualifier that establishes the preferred width of an asset either by a given value or by automatically adapting to the available width.
<width value>
🖼️ - Image | 🎬 - Video | Parameter: w_<width value>
It determines the width of an asset on whom it is applied.
Use with: c (crop/resize) | l (layer) | u (underlay)
Syntax Details:
Value | Type | Description |
width value | integer | float | constant | Required. The width of the asset. Set to:
|
Examples
1) Resize the image to a width of 100 pixels while maintaining aspect ratio (c_scale,w_100):
2) Resize the image to 33% of its original width (c_scale,w_0.3):
x, y (x & y coordinates)
🖼️ - Image | 🎬 - Video | Parameter: x_<coordinate value> | y_<coordinate value>
It adjusts the starting location or offset of the corresponding transformation action.
Use with: c_crop | g_<compass position> | l_layer | u (underlay)
Syntax Details:
Value | Type | Description |
coordinate value | pixels | float (percentage) | The starting location or offset for custom-coordinates based cropping, overlay placement and certain region related effects. Specify as a number of pixels or as a float value corresponding to a percentage in relation to 1.0. For example 0.8 is equal to a 80%. Default: 0. If x & y coordinates are used without g (gravity):
If x & y coordinates are used with g (gravity), then it moves opposite to the defined gravity parameters. |
Examples:
1) Crop the image using x and y coordinates to define the starting location (c_crop,h_1000,w_1000,x_300,y_200):
2) Position an overlay that is offset horizontally and vertically by 150 pixels from the north east corner (l_demo-origin:front_space_logo.png/fl_layer_apply,g_north_east,x_150,y_150)
