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)		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		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		Same as the 'fill' mode but doesn't expand the image if your requested dimensions are larger than the original image's.
	fit		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		Scale the image up to fit the given width & height while retaining original proportions.
	limit		Used for creating an image that does not exceed the given width or height.
	pad		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		Same as the 'pad' mode but doesn't scale the image up if your requested dimensions are larger than the original image's.
	mpad		Same as the 'pad' mode but doesn't scale the original image.
	crop		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		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		Resize width to 80 pixels while maintaining aspect ratio.
	0.2		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		Resize height to 40 pixels while maintaining aspect ratio.
	0.3		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		North west corner (top left).
	north		North center part (top center).
	north_east		North east corner (top right).
	west		Middle west part (left).
	center(default)		The center of the image.
	east		Middle east part (right).
	south_west		South west corner (bottom left).
	south		South center part (bottom center).
	south_east		South east corner (bottom right).
	xy_center		Set the crop's center of gravity to the given x & y coordinates"
	face		Automatically detects the largest face in an image and aim to make it the center of the cropped image.
	face (thumb)		Automatically detects the largest face in an image and use it to generate a face thumbnail.
	faces		Automatically detect multiple faces in an image and aim to make them the center of the cropped image.
	face:center		Same as the 'face' gravity, but with fallback to 'center' gravity instead of 'north' if no face is detected.
	faces:center		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		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		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		Generate a thumbnail using highest image quality (9.15KB)
	20		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		Generate a small image with rounded corners of 20 pixels radius.
	max		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		Rotate image by 90 degrees clockwise.
	10		Rotate image by 10 degrees clockwise.
	-20		Rotate image by 20 degrees counterclockwise.
	auto_right		Rotate image 90 degrees clockwise only if the requested aspect ratio does not match the image's aspect ratio.
	auto_left		Rotate image 90 degrees counterclockwise only if the requested aspect ratio does not match the image's aspect ratio.
	auto		Same as auto_right. Rotate image 90 degrees clockwise only if the requested aspect ratio does not match the image's aspect ratio.
	exif		Automatically rotate the image according to the EXIF data stored by the camera when the image was taken.
	vflip		Vertical mirror flip of the image.
	hflip		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		Convert image to gray-scale (multiple shades of gray).
	blackwhite		Covert image to black and white.
	oil_paint		Apply an oil painting effect.
	negate		Negate image colors (negative).
	vignette		Apply a vignette effect.
	sepia		Change the color scheme of the image to sepia. (default level: 80).
	sepia:50		Apply the sepia effect with strength of '50'.
	brightness:60		Increase image brightness by 60% (default: 80)
	brightness:-40		Decrease image brightness by 40%.
	auto_brightness		Automatically adjust brightness.
	fill_light		Adjust the fill light of an image. (level range: -100-100, default value: 0)
	saturation:70		Increase the image's color saturation by 70% (default: 80).
	saturation:-50		Decrease the image's color saturation by 50%.
	hue:40		Alter the image's hue by 40 (default: 80).
	shadow:50		Add a green shadow with a strength of 50 and with an offset specified by x:-3 & y:3.
	pixelate		Apply a pixelate effect on the image.
	pixelate:3		Apply a pixelate effect using 3 pixels wide pixelation squares.
	pixelate_region		Pixelate only a certain region of the image based on the given x, y, width and height.
	pixelate_region:20		Pixelate only a certain region of the image using 20 pixels wide pixelation squares.
	pixelate_faces		Automatically pixelate all detected faces in the image.
	pixelate_faces:3		Automatically pixelate all detected faces in the image using 3 pixels wide pixelation squares.
	redeye		Automatically remove red eyes in an image.
	gradient_fade		Apply a gradient fade effect on the image.
	blur		Apply a blurring filter on the image. (level range: 1-2000, default level: 100)
	blur:300		Apply a strong blurring filter of level 300 on the image.
	blur_region		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		Automatically blur all detected faces in the image. (level range: 1-2000, default level: 100)
	distort		Distorts the image to a new shape with coordinates 5:34:70:10:70:75:5:55
	sheer:20:0		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		Sharpen the image. (level range: 1-2000, default level: 100)
	sharpen:400		Apply a strong sharpening filter of level 400.
	unsharp_mask		Sharpen the image using the unsharp mask filter. (level range: 1-2000, default level: 100)
	unsharp_mask:400		Apply a strong unsharp mask filter of level 400.
	contrast:90		Increase image contrast by 90%.
	contrast:-70		Decrease image contrast by 70%.
	auto_contrast		Automatically adjust contrast.
	vibrance		Apply a vibrance filter on the image. (level range: -100-100, default level: 20)
	vibrance:70		Apply a strong vibrance filter of level 70 on the image.
	red:50		Strengthen the image's red channel by 50%.
	green:50		Strengthen the image's green channel by 50%.
	blue:90		Strengthen the image's blue channel by 90%.
	auto_color		Automatically adjust color balance.
	improve		Automatically adjust image colors, contrast and lightness.
	screen		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		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		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		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		Trim solid pixels from image edges. (level range: 0-100, default level: 10)
	ordered_dither		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		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		Add a 5 pixels wide black border to the image.
	4px_solid_rgb:00390b		Add a 4 pixels wide border of the color #00390b.
	5px_solid_rgb:00390b60		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		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.