Transforming Image FilesĀ 

Overview

Salsify supports an extensive library of digital asset transformations as part of configuring your channel or catalog's digital asset export. You can resize and crop images, apply watermarks, and much more.  You can also apply transformations to video files.  Click here for more information on video transformations.

How Image Transformations Work

The image URL contains the instructions for the transformation.  They are combined in a comma-delimited string as part of the URL. In this example, the transformation section is /w_100,h_150,c_scale.

Each transformation has two parts, the parameter and the value, separated by an underscore, and each pair is separated by a comma. So in our example, we are applying three transformations.  The width is being changed to 100, the height is being changed to 150, and a basic default scale is applied.  You can see in the example, the original image was more wide than square, so it's being distorted horizontally with the transformation.

Transformations are combined into a comma-delimited string of transformation codes. For example, scaling the sample image (originally 864x576) to 100x150: http://a1.images.salsify.com/image/upload/w_100,h_150,c_scale/sample.jpg

The w_100,h_150,c_scale instructs the system to set the width to 100, height to 150, and use scale as the crop mode. You can modify the URL (as above) or click 'Download a Sample' to test our your transformation.

For example, if you remove the transformation string from the URL and paste the resulting URL into your browser, you'll see the original size.

http://a1.images.salsify.com/image/upload/sample.jpg

 You can apply the transformations in the table below to the example image to see how it changes.

See the Reference section below for all of the available options, and Common Transformation Examples for other examples of uses.

Image Transformations Reference

Click on the examples to open the image in a new window and view the image URL transformations that have been applied.

Param Value Example Description
c mode

A crop mode that determines how to transform the image for fitting into the desired width & height dimensions.

Extract a region of the given width and height out of the original image. The original proportions are retained and so is the size of the graphics. You can specify the gravity parameter to select which part of the image to extract, or use fixed coordinates cropping.

scale(default) Face_top Change the size of the image to match the given width & height. All original image parts will be visible but might be stretched or shrunken.
fill Face_top Create an image with the exact given width and height while retaining original proportions. Uses only a portion of the original image that fills the given dimensions.
lfill Face_top Same as the 'fill' mode but doesn't expand the image if your requested dimensions are larger than the original image's.
fit Face_top Change image size to fit in the given width & height while retaining original proportions. All original image parts are visible. Both width and height dimensions of the transformed image must not exceed the specified width & height.
mfit Face_top Scale the image up to fit the given width & height while retaining original proportions.
limit Face_top Used for creating an image that does not exceed the given width or height.
pad Face_top Resize the image to fill the given width & height while retaining original proportions. Padding will be added if the original image proportions do not match the required ones.
lpad Face_top Same as the 'pad' mode but doesn't scale the image up if your requested dimensions are larger than the original image's.
mpad Face_top Same as the 'pad' mode but doesn't scale the original image.
crop Face_top Used to extract a given width & height out of the original image. The original proportions are retained and so is the size of the graphics.
thumb Face_top Generate a thumbnail using face detection in combination with the 'face' or 'faces' gravity.
w pixels or percents The required width of a transformed image or an overlay. Can be specified separately or together with the height value.
80 Face_top Resize width to 80 pixels while maintaining aspect ratio.
0.2 Face_top Resize image to 20% of its original size.
h pixels or percents The required height of a transformed image or an overlay. Can be specified separately or together with the width value.
40 Face_top Resize height to 40 pixels while maintaining aspect ratio.
0.3 Face_top Resize image to 30% of its original size.
ar a:b ratio (eg 16:9)  or decimal representing the ratio of the width divided by the height (e.g., 1.33 or 2.5) Used with a crop mode (scale, fill, lfill, pad, lpad, mpad or crop) to determine how the image is adjusted to the new dimensions. Can also be used with either width or height to create a proportional transform.  The other dimension is then automatically updated to maintain the given aspect ratio.
16:9 Sized to width = 80, 16:9 ratio height
1.2 Sized to width = 80, 1.2 ratio height
z percent Control how much of the original image surrounding the face to keep when using either the 'crop' or 'thumb' cropping modes with face detection (Default: 1.0).
1.2 Cropped with face detection and zoom set to 120%.
.75 Thumbnail with face detection and zoom set to 75%.
g direction Decides which part of the image to keep while 'crop', 'pad' and 'fill' crop modes are used. For overlays, this decides where to place the overlay.
north_west Fashion_gravity North west corner (top left).
north Fashion_gravity North center part (top center).
north_east Fashion_gravity North east corner (top right).
west Fashion_gravity Middle west part (left).
center(default) Fashion_gravity The center of the image.
east Fashion_gravity Middle east part (right).
south_west Fashion_gravity South west corner (bottom left).
south Fashion_gravity South center part (bottom center).
south_east Fashion_gravity South east corner (bottom right).
xy_center Fashion_gravity Set the crop's center of gravity to the given x & y coordinates"
face Face_top Automatically detects the largest face in an image and aim to make it the center of the cropped image.
face (thumb) Face_top Automatically detects the largest face in an image and use it to generate a face thumbnail.
faces Couple Automatically detect multiple faces in an image and aim to make them the center of the cropped image.
face:center Face_top Same as the 'face' gravity, but with fallback to 'center' gravity instead of 'north' if no face is detected.
faces:center Couple Same as the 'faces' gravity, but with fallback to 'center' gravity instead of 'north' if no face is detected.
x pixels Horizontal position for custom-coordinates based cropping, overlay placement and certain region related effects.
130 Face_top Crop image to an 80x80 square starting 130 pixels from the left.
y pixels Vertical position for custom-coordinates based cropping and overlay placement.
340 Face_top Crop image to an 80x80 square starting 340 pixels from the top.
q percents Control the JPG compression quality. 1 is the lowest quality and 100 is the highest. The default is the original image's quality or 90% if not available. Reducing quality generates JPG images much smaller in file size.
100 Face_top Generate a thumbnail using highest image quality (9.15KB)
20 Face_top Generate a thumbnail using a low 20% quality (1.48KB)
r pixels or max Round the corners of an image or make it completely circular or oval (ellipse).
20 White_chicken Generate a small image with rounded corners of 20 pixels radius.
max White_chicken Generate an image with a circular crop using the 'max' radius value.
a degrees or mode Rotate or flip an image by the given degrees or automatically according to its orientation or available meta-data. Multiple modes can be applied by concatenating their names with a dot.
90 Sheep Rotate image by 90 degrees clockwise.
10 Sheep Rotate image by 10 degrees clockwise.
-20 Sheep Rotate image by 20 degrees counterclockwise.
auto_right Sheep Rotate image 90 degrees clockwise only if the requested aspect ratio does not match the image's aspect ratio.
auto_left Sheep Rotate image 90 degrees counterclockwise only if the requested aspect ratio does not match the image's aspect ratio.
auto Sheep Same as auto_right. Rotate image 90 degrees clockwise only if the requested aspect ratio does not match the image's aspect ratio.
exif Sheep Automatically rotate the image according to the EXIF data stored by the camera when the image was taken.
vflip Sheep Vertical mirror flip of the image.
hflip Sheep Horizontal mirror flip of the image.
e name and value Apply a filter or an effect on an image. The value includes the name of the effect and an additional parameter that controls the behavior of the specific effect.
grayscale Horses Convert image to gray-scale (multiple shades of gray).
blackwhite Horses Covert image to black and white.
oil_paint Horses Apply an oil painting effect.
negate Horses Negate image colors (negative).
vignette Horses Apply a vignette effect.
sepia Horses Change the color scheme of the image to sepia. (default level: 80).
sepia:50 Horses Apply the sepia effect with strength of '50'.
brightness:60 Horses Increase image brightness by 60% (default: 80)
brightness:-40 Horses Decrease image brightness by 40%.
auto_brightness Horses Automatically adjust brightness.
fill_light Horses Adjust the fill light of an image. (level range: -100-100, default value: 0)
saturation:70 Horses Increase the image's color saturation by 70% (default: 80).
saturation:-50 Horses Decrease the image's color saturation by 50%.
hue:40 Horses Alter the image's hue by 40 (default: 80).
shadow:50 Horses Add a green shadow with a strength of 50 and with an offset specified by x:-3 & y:3.
pixelate Horses Apply a pixelate effect on the image.
pixelate:3 Horses Apply a pixelate effect using 3 pixels wide pixelation squares.
pixelate_region Horses Pixelate only a certain region of the image based on the given x, y, width and height.
pixelate_region:20 Horses Pixelate only a certain region of the image using 20 pixels wide pixelation squares.
pixelate_faces Couple Automatically pixelate all detected faces in the image.
pixelate_faces:3 Couple Automatically pixelate all detected faces in the image using 3 pixels wide pixelation squares.
redeye Couple Automatically remove red eyes in an image.
gradient_fade Horses Apply a gradient fade effect on the image.
blur Horses Apply a blurring filter on the image. (level range: 1-2000, default level: 100)
blur:300 Horses Apply a strong blurring filter of level 300 on the image.
blur_region Horses Apply a blurring filter on a certain region of an image, specified by x, y, width and height. (level range: 1-2000, default level: 100)
blur_faces Couple Automatically blur all detected faces in the image. (level range: 1-2000, default level: 100)
distort Horses Distorts the image to a new shape with coordinates 5:34:70:10:70:75:5:55
sheer:20:0 Horses  Skews the image according to two specified values in degrees separated by a colon (:), representing how much to skew the image on the x-axis and y-axis respectively. Negative values skew the image in the opposite direction. Skews the image on the x-axis by 20 degrees.
sharpen Horses Sharpen the image. (level range: 1-2000, default level: 100)
sharpen:400 Horses Apply a strong sharpening filter of level 400.
unsharp_mask Horses Sharpen the image using the unsharp mask filter. (level range: 1-2000, default level: 100)
unsharp_mask:400 Horses Apply a strong unsharp mask filter of level 400.
contrast:90 Horses Increase image contrast by 90%.
contrast:-70 Horses Decrease image contrast by 70%.
auto_contrast Horses Automatically adjust contrast.
vibrance Horses Apply a vibrance filter on the image. (level range: -100-100, default level: 20)
vibrance:70 Horses Apply a strong vibrance filter of level 70 on the image.
red:50 Horses Strengthen the image's red channel by 50%.
green:50 Horses Strengthen the image's green channel by 50%.
blue:90 Horses Strengthen the image's blue channel by 90%.
auto_color Horses Automatically adjust color balance.
improve Horses Automatically adjust image colors, contrast and lightness.
screen Horses Add an overlay image blended using the 'screen' blend mode. In this mode, each pixel of the image is made brighter according to the pixel value of the overlayed image.
multiply Horses Add an overlay image blended using the 'screen' blend mode. In this mode, each pixel of the image is made darker according to the pixel value of the overlayed image.
overlay Horses Add an overlay image blended using the 'overlay' blend mode. In this mode, each pixel of the image is made darker or brighter according to the pixel value of the overlayed image.
make_transparent Fashion_gravity Make the background of the image transparent (or solid white for JPGs). The background is determined as all pixels that resemble the pixels in the image's edges. (level range: 0-100, default leve: 10)
trim Fashion_gravity Trim solid pixels from image edges. (level range: 0-100, default level: 10)
ordered_dither Fashion_gravity Apply an ordered dither filter on the image. Possible levels described below (Default 0): 
0 Threshold 1x1 (non-dither)
1 Checkerboard 2x1 (dither)
2 Ordered 2x2 (dispersed)
3 Ordered 3x3 (dispersed)
4 Ordered 4x4 (dispersed)
5 Ordered 8x8 (dispersed)
6 Halftone 4x4 (angled)
7 Halftone 6x6 (angled)
8 Halftone 8x8 (angled)
9 Halftone 4x4 (orthogonal)
10 Halftone 6x6 (orthogonal)
11 Halftone 8x8 (orthogonal)
12 Halftone 16x16 (orthogonal)
13 Circles 5x5 (black)
14 Circles 5x5 (white)
15 Circles 6x6 (black)
16 Circles 6x6 (white)
17 Circles 7x7 (black)
18 Circles 7x7 (white)
o percents Adjust the opacity of the image and make it semi-transparent. 100 means opaque, while 0 is completely transparent.
40 Autumn_leaves Reduce image opacity to 40%.
bo style Add a solid border around the image. The value has a CSS-like format: width_style_color.
5px_solid_black Autumn_leaves Add a 5 pixels wide black border to the image.
4px_solid_rgb:00390b Autumn_leaves Add a 4 pixels wide border of the color #00390b.
5px_solid_rgb:00390b60 Autumn_leaves Add a 5 pixels wide border of a semi transparent RGB color. The last 2 digits are the hex value of the alpha channel.
b color Sets the background color to use instead of transparent background areas when converting to JPG format or using the pad crop mode. The background color can be set as an RGB hex triplet (e.g. 'b_rgb:3e2222'), a 3 character RGB hex (e.g. 'b_rgb:777') or a named color (e.g. 'b_green').
if condition Apply a transformation only if a specified condition is met. For use in combination with other transformations.
if_else Add to specify transformation where if_ condition is not met.
cs color space Sets the color space for an image to change it to or from web-friendly sRGB or print-standard CMYK.
rgb Changes to sRGB color space.
cmyk Changes to CMYK color space.
l identifier Add an overlay image over the base image. You can control the dimension and position of the overlay using the width, height, x, y and gravity parameters. Please contact us for more details on adding an overlay image.
tbadge Face_top Add the overlay with the ID 'tbadge' 10, 20 pixels from the south east corner of the base image while resizing the overlay to have a width of 30 pixels.

Common Transformation Examples

dn_300,cs_srgb Convert to 300dpi and ensure web-friendly color space

c_fit,w_3500,h_3500,dn_300,cs_srgb Fit to 3500x3500 while maintaining aspect ratio, convert to 300dpi and web-friendly color space

c_pad,w_2000,h_2000,dn_300,cs_srgb Pad to fit 2000x2000 while maintaining aspect ratio and converting to web-friendly color space

c_fill,ar_1:1 Crop image to fit a 1x1 box, will take the center of the image unless you add gravity

if_w_lt_1000,c_mfit,dn_300,w_1000,h_1000/if_else,c_fit,w_2000,h_2000 If image is less than 1000px wide, upscale to 1000x1000, otherwise fit to 2000x2000

e_clip Trim pixels according to a clipping path included in the original image metadata (e.g., manually created using software such as Adobe PhotoShop).

e_trim Trim pixels from the border of your image. Helpful to add a specific border size.

q_50 Significantly reduces the quality of your imagery for smaller files, often without compromising the visual on a webpage.  Default is 90, resulting in a larger file.  Test and reduce for web use to reduce image load times.