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.

ParamValueExampleDescription
cmode

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_topChange the size of the image to match the given width & height. All original image parts will be visible but might be stretched or shrunken.

fillFace_topCreate 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.

lfillFace_topSame as the 'fill' mode but doesn't expand the image if your requested dimensions are larger than the original image's.

fitFace_topChange 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.

mfitFace_topScale the image up to fit the given width & height while retaining original proportions.

limitFace_topUsed for creating an image that does not exceed the given width or height.

padFace_topResize 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.

lpadFace_topSame as the 'pad' mode but doesn't scale the image up if your requested dimensions are larger than the original image's.

mpadFace_topSame as the 'pad' mode but doesn't scale the original image.

cropFace_topUsed to extract a given width & height out of the original image. The original proportions are retained and so is the size of the graphics.

thumbFace_topGenerate a thumbnail using face detection in combination with the 'face' or 'faces' gravity.

wpixels or percents
The required width of a transformed image or an overlay. Can be specified separately or together with the height value.

80Face_topResize width to 80 pixels while maintaining aspect ratio.

0.2Face_topResize image to 20% of its original size.

hpixels or percents
The required height of a transformed image or an overlay. Can be specified separately or together with the width value.

40Face_topResize height to 40 pixels while maintaining aspect ratio.

0.3Face_topResize image to 30% of its original size.

ara: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:9Sized to width = 80, 16:9 ratio height

1.2Sized to width = 80, 1.2 ratio height

zpercent
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.2Cropped with face detection and zoom set to 120%.

.75Thumbnail with face detection and zoom set to 75%.

gdirection
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_westFashion_gravityNorth west corner (top left).

northFashion_gravityNorth center part (top center).

north_eastFashion_gravityNorth east corner (top right).

westFashion_gravityMiddle west part (left).

center(default)Fashion_gravityThe center of the image.

eastFashion_gravityMiddle east part (right).

south_westFashion_gravitySouth west corner (bottom left).

southFashion_gravitySouth center part (bottom center).

south_eastFashion_gravitySouth east corner (bottom right).

xy_centerFashion_gravitySet the crop's center of gravity to the given x & y coordinates"

faceFace_topAutomatically detects the largest face in an image and aim to make it the center of the cropped image.

face (thumb)Face_topAutomatically detects the largest face in an image and use it to generate a face thumbnail.

facesCoupleAutomatically detect multiple faces in an image and aim to make them the center of the cropped image.

face:centerFace_topSame as the 'face' gravity, but with fallback to 'center' gravity instead of 'north' if no face is detected.

faces:centerCoupleSame as the 'faces' gravity, but with fallback to 'center' gravity instead of 'north' if no face is detected.

xpixels
Horizontal position for custom-coordinates based cropping, overlay placement and certain region related effects.

130Face_topCrop image to an 80x80 square starting 130 pixels from the left.

ypixels
Vertical position for custom-coordinates based cropping and overlay placement.

340Face_topCrop image to an 80x80 square starting 340 pixels from the top.

qpercents
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.

100Face_topGenerate a thumbnail using highest image quality (9.15KB)

20Face_topGenerate a thumbnail using a low 20% quality (1.48KB)

rpixels or max
Round the corners of an image or make it completely circular or oval (ellipse).

20White_chickenGenerate a small image with rounded corners of 20 pixels radius.

maxWhite_chickenGenerate an image with a circular crop using the 'max' radius value.

adegrees 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.

90SheepRotate image by 90 degrees clockwise.

10SheepRotate image by 10 degrees clockwise.

-20SheepRotate image by 20 degrees counterclockwise.

auto_rightSheepRotate image 90 degrees clockwise only if the requested aspect ratio does not match the image's aspect ratio.

auto_leftSheepRotate image 90 degrees counterclockwise only if the requested aspect ratio does not match the image's aspect ratio.

autoSheepSame as auto_right. Rotate image 90 degrees clockwise only if the requested aspect ratio does not match the image's aspect ratio.

exifSheepAutomatically rotate the image according to the EXIF data stored by the camera when the image was taken.

vflipSheepVertical mirror flip of the image.

hflipSheepHorizontal mirror flip of the image.

ename 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.

grayscaleHorsesConvert image to gray-scale (multiple shades of gray).

blackwhiteHorsesCovert image to black and white.

oil_paintHorsesApply an oil painting effect.

negateHorsesNegate image colors (negative).

vignetteHorsesApply a vignette effect.

sepiaHorsesChange the color scheme of the image to sepia. (default level: 80).

sepia:50HorsesApply the sepia effect with strength of '50'.

brightness:60HorsesIncrease image brightness by 60% (default: 80)

brightness:-40HorsesDecrease image brightness by 40%.

auto_brightnessHorsesAutomatically adjust brightness.

fill_lightHorsesAdjust the fill light of an image. (level range: -100-100, default value: 0)

saturation:70HorsesIncrease the image's color saturation by 70% (default: 80).

saturation:-50HorsesDecrease the image's color saturation by 50%.

hue:40HorsesAlter the image's hue by 40 (default: 80).

shadow:50HorsesAdd a green shadow with a strength of 50 and with an offset specified by x:-3 & y:3.

pixelateHorsesApply a pixelate effect on the image.

pixelate:3HorsesApply a pixelate effect using 3 pixels wide pixelation squares.

pixelate_regionHorsesPixelate only a certain region of the image based on the given x, y, width and height.

pixelate_region:20HorsesPixelate only a certain region of the image using 20 pixels wide pixelation squares.

pixelate_facesCoupleAutomatically pixelate all detected faces in the image.

pixelate_faces:3CoupleAutomatically pixelate all detected faces in the image using 3 pixels wide pixelation squares.

redeyeCoupleAutomatically remove red eyes in an image.

gradient_fadeHorsesApply a gradient fade effect on the image.

blurHorsesApply a blurring filter on the image. (level range: 1-2000, default level: 100)

blur:300HorsesApply a strong blurring filter of level 300 on the image.

blur_regionHorsesApply 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_facesCoupleAutomatically blur all detected faces in the image. (level range: 1-2000, default level: 100)

distortHorsesDistorts the image to a new shape with coordinates 5:34:70:10:70:75:5:55

sheer:20:0Horses 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.

sharpenHorsesSharpen the image. (level range: 1-2000, default level: 100)

sharpen:400HorsesApply a strong sharpening filter of level 400.

unsharp_maskHorsesSharpen the image using the unsharp mask filter. (level range: 1-2000, default level: 100)

unsharp_mask:400HorsesApply a strong unsharp mask filter of level 400.

contrast:90HorsesIncrease image contrast by 90%.

contrast:-70HorsesDecrease image contrast by 70%.

auto_contrastHorsesAutomatically adjust contrast.

vibranceHorsesApply a vibrance filter on the image. (level range: -100-100, default level: 20)

vibrance:70HorsesApply a strong vibrance filter of level 70 on the image.

red:50HorsesStrengthen the image's red channel by 50%.

green:50HorsesStrengthen the image's green channel by 50%.

blue:90HorsesStrengthen the image's blue channel by 90%.

auto_colorHorsesAutomatically adjust color balance.

improveHorsesAutomatically adjust image colors, contrast and lightness.

screenHorsesAdd 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.

multiplyHorsesAdd 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.

overlayHorsesAdd 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_transparentFashion_gravityMake 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)

trimFashion_gravityTrim solid pixels from image edges. (level range: 0-100, default level: 10)

ordered_ditherFashion_gravityApply an ordered dither filter on the image. Possible levels described below (Default 0): 
0Threshold 1x1 (non-dither)
1Checkerboard 2x1 (dither)
2Ordered 2x2 (dispersed)
3Ordered 3x3 (dispersed)
4Ordered 4x4 (dispersed)
5Ordered 8x8 (dispersed)
6Halftone 4x4 (angled)
7Halftone 6x6 (angled)
8Halftone 8x8 (angled)
9Halftone 4x4 (orthogonal)
10Halftone 6x6 (orthogonal)
11Halftone 8x8 (orthogonal)
12Halftone 16x16 (orthogonal)
13Circles 5x5 (black)
14Circles 5x5 (white)
15Circles 6x6 (black)
16Circles 6x6 (white)
17Circles 7x7 (black)
18Circles 7x7 (white)

opercents
Adjust the opacity of the image and make it semi-transparent. 100 means opaque, while 0 is completely transparent.

40Autumn_leavesReduce image opacity to 40%.

bostyle
Add a solid border around the image. The value has a CSS-like format: width_style_color.

5px_solid_blackAutumn_leavesAdd a 5 pixels wide black border to the image.

4px_solid_rgb:00390bAutumn_leavesAdd a 4 pixels wide border of the color #00390b.

5px_solid_rgb:00390b60Autumn_leavesAdd a 5 pixels wide border of a semi transparent RGB color. The last 2 digits are the hex value of the alpha channel.

bcolor
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').

ifcondition
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.

cscolor 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.

lidentifier
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.

tbadgeFace_topAdd 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.