Transformations
Brightness
Brightness transformation shifts all pixel values equally, making the entire image lighter or darker. Unlike gamma correction, brightness affects all tones uniformly.
- Range: -100 to 100
- Default: 0 (no change)
- Negative values: Make image darker
- Positive values: Make image brighter
- Extreme values: -100 = completely black, +100 = completely white
Darkened image - all pixels shifted down by 40 units (brightness=-40)
/cgi/images/tr:brightness=-40/image1.jpg
Brightened image - all pixels shifted up by 40 units (brightness=+40)
/cgi/images/tr:brightness=40/image1.jpgContrast
Contrast transformation adjusts the difference between light and dark areas, making lights lighter and darks darker (or vice versa). Unlike brightness, contrast affects the tonal range and separation between colors.
- Range: -100 to 100
- Default: 0 (no change)
- Negative values: Reduce contrast, flatten tonal range
- Positive values: Increase contrast, expand tonal range
- Extreme values: -100 = flat gray, +100 = maximum contrast
Reduced contrast - flattened tonal range, more washed out appearance (contrast=-40)
/cgi/images/tr:contrast=-40/image1.jpg
Enhanced contrast - expanded tonal range, more dramatic difference between lights and darks (contrast=+50)
/cgi/images/tr:contrast=50/image1.jpgFlip
Flip transformation mirrors the image along horizontal, vertical, or both axes. This is a lossless transformation that simply reorders pixels without quality loss.
- h: Horizontal flip (mirror left-right)
- v: Vertical flip (mirror top-bottom)
- hv or vh: Both horizontal and vertical flip (180° rotation)
- Quality: No quality loss - pixels are only repositioned
Blur
Blur transformation applies Gaussian blur to soften the image by reducing sharp transitions between pixels. This is commonly used for background effects or noise reduction.
- Range: 1 to 250
- Default: 1 (minimal blur)
- Low values (1-10): Subtle softening, noise reduction
- Medium values (11-50): Noticeable blur for artistic effects
- High values (51-250): Heavy blur for backgrounds or privacy
- Performance: Higher values require more processing time
Subtle blur - good for noise reduction while maintaining detail (blur=3)
/cgi/images/tr:blur=3/image1.jpg
Moderate blur - good for artistic effects and background softening (blur=10)
/cgi/images/tr:blur=10/image1.jpg
Heavy blur - ideal for privacy, backgrounds, or strong artistic effects (blur=25)
/cgi/images/tr:blur=25/image1.jpgGamma
Gamma correction applies a non-linear curve that affects midtones more than highlights and shadows. Unlike brightness, gamma preserves pure black and white while adjusting the middle gray values.
- Range: 0.1 to 2.0
- Default: 1.0 (no change)
- Values < 1.0 (0.1-0.9): Brighten midtones, lift shadows
- Values > 1.0 (1.1-2.0): Darken midtones, deepen shadows
- Best for: Adjusting exposure without clipping highlights/shadows
- Common values: 0.5 (brighten), 1.8 (darken)
Brightened midtones - shadows lifted while preserving highlights (gamma=0.5)
/cgi/images/tr:gamma=0.5/image1.jpg
Darkened midtones - shadows deepened while preserving highlights (gamma=1.8)
/cgi/images/tr:gamma=1.8/image1.jpgRotate
Rotate transformation rotates the image by a specified angle in degrees. Supports both numeric angles and convenient shortcuts for common rotations.
- Numeric values: Any angle in degrees (0-360)
- Shortcuts: 90/cw/right, 180/flip, 270/-90/ccw/left
- Quality: Best results with multiples of 90°
- Background: Transparent areas filled automatically
- Auto-normalize: Angles automatically adjusted to 0-360° range
90° clockwise rotation - can also use 'cw' or 'right' as shortcuts
/cgi/images/tr:rotate=90/image1.jpg
270° rotation (counter-clockwise) - can also use 'ccw', '-90', or 'left'
/cgi/images/tr:rotate=270/image1.jpg
45° custom rotation - non-90° multiples may have slight quality reduction
/cgi/images/tr:rotate=45/image1.jpgBorder Radius
Border radius transformation applies rounded corners to images, similar to the CSS border-radius property. Supports both pixel and percentage values for flexible corner rounding.
- Pixel values: Fixed radius in pixels (e.g., 10, 20px)
- Percentage values: Responsive radius based on image size (e.g., 15%, 25%)
- Multiple values: CSS-style syntax for different corners
- Anti-aliasing: Smooth edges for professional results
- Transparency: Areas outside radius become transparent
Saturation
Saturation transformation adjusts the intensity and vividness of colors in the image. This affects how vibrant colors appear without changing their hue or brightness.
- Range: -100 to 500
- Default: 0 (no change)
- -100: Complete grayscale (no color)
- Negative values (-99 to -1): Reduce color intensity, more muted
- Positive values (1-100): Increase color intensity, more vivid
- High values (101-500): Hyper-saturated colors for artistic effects
Complete grayscale - all color information removed (saturation=-100)
/cgi/images/tr:saturation=-100/image1.jpg
Enhanced colors - more vibrant and vivid appearance (saturation=+60)
/cgi/images/tr:saturation=60/image1.jpg
Hyper-saturated colors - extreme vividness for artistic effects (saturation=+150)
/cgi/images/tr:saturation=150/image1.jpgSharpen
Sharpen transformation enhances edge definition and image clarity using unsharp masking. This technique increases contrast along edges to make images appear more crisp.
- Range: 0.5 to 1.5
- Default: 0.5 (minimal sharpening)
- Low values (0.5-0.8): Subtle edge enhancement
- Medium values (0.9-1.2): Noticeable sharpening for photos
- High values (1.3-1.5): Strong sharpening, may introduce artifacts
- Best for: Slightly blurry or soft images
Subtle sharpening - gentle edge enhancement without artifacts (sharpen=0.8)
/cgi/images/tr:sharpen=0.8/image1.jpg
Strong sharpening - dramatic edge enhancement for very soft images (sharpen=1.3)
/cgi/images/tr:sharpen=1.3/image1.jpgWidth
Width transformation resizes the image to a specific width while automatically calculating height to maintain aspect ratio. This is useful for responsive design and consistent layouts.
- Range: 1 to 10,000 pixels
- Aspect ratio: Automatically preserved
- Height: Calculated automatically
- Common uses: Responsive images, thumbnails
- Quality: Uses high-quality Lanczos resampling
Height
Height transformation resizes the image to a specific height while automatically calculating width to maintain aspect ratio. Perfect for vertical layouts and consistent image heights.
- Range: 1 to 10,000 pixels
- Aspect ratio: Automatically preserved
- Width: Calculated automatically
- Common uses: Card layouts, galleries
- Quality: Uses high-quality Lanczos resampling
Background
Background transformation sets a background color for transparent areas, padding operations, or rotation fills. Essential for maintaining visual consistency when transforming images.
- Hex colors: #ff0000, #00ff00, #0000ff
- Named colors: red, green, blue, white, black
- RGB format: rgb(255,0,0)
- Special: transparent (default)
- Use cases: Padding, rotation fills, PNG transparency
Fit
Fit transformation controls how images are resized to fit specified dimensions. Each mode handles aspect ratio preservation and sizing behavior differently:
- contain: Scales image to fit within bounds while preserving aspect ratio (like CSS object-fit: contain)
- cover: Scales image to fill entire area while preserving aspect ratio, may crop parts (like CSS object-fit: cover)
- crop: Smart crop - scales down if source is smaller than target, otherwise behaves like cover
- pad: Scales to fit within bounds, then adds padding with background color to reach exact dimensions
- squeeze: Scales to exact dimensions without preserving aspect ratio (may distort image)
- scaledown: Like contain, but only scales down - never enlarges images smaller than target dimensions
Scales image to fit completely within 400x300 bounds while preserving aspect ratio. Image may be smaller than target dimensions.
/cgi/images/tr:width=400,height=300,fit=contain/image1.jpg
Scales image to completely fill 400x300 area while preserving aspect ratio. Parts of image may be cropped.
/cgi/images/tr:width=400,height=300,fit=cover/image1.jpg
Smart crop: if source is smaller than 400x300, scales down proportionally
/cgi/images/tr:width=400,height=300,fit=crop/image1.jpg
Scales to fit within bounds, then pads with background color to reach exact 400x300 dimensions.
/cgi/images/tr:width=400,height=300,background=blue,fit=pad/image1.jpg
Forces image to exact 400x200 dimensions without preserving aspect ratio. May cause distortion.
/cgi/images/tr:width=400,height=200,fit=squeeze/image1.jpg
Like contain, but only scales DOWN. If original is smaller than 800x600, keeps original size unchanged.
/cgi/images/tr:width=300,height=600,fit=scaledown/image1.jpgFormat
Format transformation converts images between different file formats. This allows you to change the output format of your processed image to optimize for different use cases.
- jpeg/jpg: Best for photographs with many colors. Smaller file sizes but lossy compression. Good web performance.
- png: Best for images with transparency, screenshots, or graphics with few colors. Lossless compression but larger files.
- webp: Modern format with excellent compression. Smaller than JPEG with better quality. Supports transparency like PNG.
Convert image to JPEG format with optimized compression for web use.
/cgi/images/tr:format=jpeg/image1.jpg
Convert image to PNG format with lossless compression and transparency support.
/cgi/images/tr:format=png/image1.jpg
Quality
For Lossy compressions i.e. JPEG & WebP, use this transformation which suggest the quality of image returned after encoding to the given format. Values must be between, 1 (lower quality) to 100 (higher quality, lossless for webp), both inclusive.
