Support

Find answers, guides, and tutorials to supercharge your content delivery.

Image Processing

Updated on May 14, 2019
Image Processing

Our powerful real-time image processing feature transforms and optimizes your images with simple query parameters. Your image management workflow defines the user experience by transforming and optimizing the image delivery for any browser. Process images on the fly to create multiple variants and deliver them from our high performance CDN.

You can enable this on a per Pull Zone level. Simply set the Image Processing setting to enabled. It is possible to process images and deliver other content at the same time when this setting is enabled. When enabled the x-ip and x-ip-info response headers will be added. The x-ip response header indicates the status of the operation. If the value is 0 the request was not processed (e.g. CSS or JS). If the value is 1 the request was processed. The x-ip-info response header indicates the output of the processed request. The osz value indicates the output size, the odim value indicates the output dimensions, and the ofmt value indicates the output format.

Parameter Value Dependencies Default
trim
trim
0-100
int
crop=smart
crop={width,height}
crop={width,height,x,y}
crop
0-4000
int (pixels)
smart requires width and height
width
resize
0-10000
int (pixels)
height
resize
0-10000
int (pixels)
fit
resize
cover, contain, fill, inside, or outside
string
width and height
position
resize
top, right, bottom, or left
string
fit of cover or contain
enlarge
resize
0 or 1
boolean
width or height 1
bg={hex}
bg={r,g,b}
bg={r,g,b,a}
resize, extend
000000-ffffff
hex
0,0,0,0.0- 255,255,255,1.0
rgb with optional alpha
extend or fit of contain
extend={padding}
extend={top,right,bottom,left}
extend
0-1000
int (pixels)
rotate
compose
-359-359
int (degrees)
flip
compose
0 or 1
boolean
flop
compose
0 or 1
boolean
sharpen
compose
0-100
int
blur
compose
0.3-100
float
gamma
compose
0-3
float
negate
compose
0 or 1
boolean
normalize
compose
0 or 1
boolean
threshold
compose
0-255
int
tint
compose
000000-ffffff
hex
grayscale
compose
0 or 1
boolean
removealpha
compose
0 or 1
boolean
format
format
jpeg, png, or webp
string
quality
format
0-100
string
jpeg or webp 80
progressive
format
0 or 1
boolean
jpeg or png 0
compression
format
0-9
int
png 3
adaptive
format
0 or 1
boolean
png 0
alphaquality
format
0-100
int
webp 100
lossless
format
0 or 1
boolean
webp 0
nearlossless
format
0 or 1
boolean
webp 0
metadata
format
0 or 1
boolean
0

Order of Operations

The query parameters can be defined in any order but our system normalizes the transformation sequence to the following order:

  1. trim
  2. crop
  3. resize
  4. extend
  5. compose
  6. format

trim

Trims pixels from all edges that are similar to the top left pixel.

    
        https://ip.keycdn.com/example.jpg?trim=10
    

crop

Crops the image by smart, {width,height}, or {width,height,x,y} defined in pixels.

    
        https://ip.keycdn.com/example.jpg?crop=smart&width=600&height=400
    
    
        https://ip.keycdn.com/example.jpg?crop=600,400
    
    
        https://ip.keycdn.com/example.jpg?crop=600,400,100,0
    

width

Resizes the image width defined in pixels.

    
        https://ip.keycdn.com/example.jpg?width=600
    

height

Resizes the image height defined in pixels.

    
        https://ip.keycdn.com/example.jpg?height=400
    

fit

Defines how the image should fit within the provided width and height dimensions.

            
                https://ip.keycdn.com/example.jpg?width=400&height=400&fit=cover
            
        
            
                https://ip.keycdn.com/example.jpg?width=400&height=400&fit=contain
            
        
            
                https://ip.keycdn.com/example.jpg?width=400&height=400&fit=fill
            
        
            
                https://ip.keycdn.com/example.jpg?width=400&height=400&fit=inside
            
        
            
                https://ip.keycdn.com/example.jpg?width=400&height=400&fit=outside
            
        

position

Sets the position of the image in the canvas.

            
                https://ip.keycdn.com/example.jpg?width=400&height=200&fit=cover&position=top
            
        
            
                https://ip.keycdn.com/example.jpg?width=400&height=400&fit=contain&position=top
            
        
            
                https://ip.keycdn.com/example.jpg?width=400&height=400&fit=cover&position=right
            
        
            
                https://ip.keycdn.com/example.jpg?width=400&height=200&fit=cover&position=bottom
            
        
            
                https://ip.keycdn.com/example.jpg?width=400&height=400&fit=contain&position=bottom
            
        
            
                https://ip.keycdn.com/example.jpg?width=400&height=400&fit=cover&position=left
            
        

enlarge

Defines if the image should be enlarged beyond the original dimensions.

    
        https://ip.keycdn.com/example.jpg?width=730&enlarge=0
    

bg

Sets the background color of the image.

    
        https://ip.keycdn.com/example.jpg?width=400&height=400&fit=contain&bg=2e3234
    
    
        https://ip.keycdn.com/example.jpg?width=400&height=400&fit=contain&bg=46,50,52
    

extend

Extend the image by {padding} or {top,right,bottom,left} defined in pixels.

    
        https://ip.keycdn.com/example.jpg?extend=100
    
    
        https://ip.keycdn.com/example.jpg?extend=100,50,100,50
    

rotate

Rotates the output image by a positive or negative degree.

    
        https://ip.keycdn.com/example.jpg?rotate=90
    

flip

Flips the image vertically (y axis).

    
        https://ip.keycdn.com/example.jpg?flip=1
    

flop

Flops the image horizontally (x axis).

    
        https://ip.keycdn.com/example.jpg?flop=1
    

sharpen

Sharpens the image. A higher sharpen value will increase the processing latency.

    
        https://ip.keycdn.com/example.jpg?sharpen=10
    

blur

Blurs the image. A higher blur value will increase the processing latency.

    
        https://ip.keycdn.com/example.jpg?blur=5
    

gamma

Performs a gamma correction by reducing the encoding pre-resize at a factor of 1/gamma then increasing the encoding post-resize at a factor of gamma.

    
        https://ip.keycdn.com/example.jpg?gamma=1.5
    

negate

Creates the negative of the image.

    
        https://ip.keycdn.com/example.jpg?negate=1
    

normalize

Improves output image contrast by lengthening its luminance to cover the full dynamic range.

    
        https://ip.keycdn.com/example.jpg?normalize=1
    

threshold

Changes any pixel value greater than or equal to the threshold value to 255, otherwise to 0.

    
        https://ip.keycdn.com/example.jpg?threshold=100
    

tint

Tints the image using tint hex color value while preserving the image luminance.

    
        https://ip.keycdn.com/example.jpg?tint=047aed
    

grayscale

Converts the image to a 8-bit grayscale with 256 shades of gray. If the input image is in a non-linear color space (e.g. sRGB), use gamma together with grayscale for optimal results.

    
        https://ip.keycdn.com/example.jpg?grayscale=1
    

removealpha

Removes the alpha channel from the image, if any.

    
        https://ip.keycdn.com/example.jpg?removealpha=1
    

format

Specifies the output format of the image.

            
                https://ip.keycdn.com/example.jpg?format=jpeg
            
        
            
                https://ip.keycdn.com/example.jpg?format=png
            
        
            
                https://ip.keycdn.com/example.jpg?format=webp
            
        

quality

Sets the quality level of the image.

    
        https://ip.keycdn.com/example.jpg?quality=70
    
    
        https://ip.keycdn.com/example.jpg?format=webp&quality=70
    

progressive

Specifies to use progressive (interlace) scan of the image.

    
        https://ip.keycdn.com/example.jpg?progressive=1
    
    
        https://ip.keycdn.com/example.jpg?format=png&progressive=1
    

compression

Defines the zlib compression level of the PNG image.

    
        https://ip.keycdn.com/example.jpg?format=png&compression=5
    

adaptive

Enables adaptive row filtering on PNG images.

    
        https://ip.keycdn.com/example.jpg?format=png&adaptive=1
    

alphaquality

Specifies the quality of the alpha layer.

    
        https://ip.keycdn.com/example.jpg?format=webp&alphaquality=20
    

lossless

This option encodes the WebP image without any loss.

    
        https://ip.keycdn.com/example.jpg?format=webp&lossless=1
    

nearlossless

This option adjusts WebP pixel values to help compressibility, but has minimal impact on the visual quality. It is linked to the quality parameter.

    
        https://ip.keycdn.com/example.jpg?format=webp&nearlossless=1
    

metadata

Keeps the image metadata (EXIF, IPTC, XMP).

    
        https://ip.keycdn.com/example.jpg?metadata=1