ImageKit.io Docs
PricingService statusDashboardWe are hiring 🤓
Search…
⌃K
Links

Imgix

ImageKit can translate transformations written in Imgix's syntax to ImageKit's syntax. Learn how to use a URL-rewriter on this page.
Beta feature This feature is currently in beta. As a result, some transformations may work differently than expected.

Supported Transformations

The following Imgix transformations are supported for translation:
Imgix transform
Example translation
Remarks
width
  • w=100 => w-100
​
height
  • h=100 => h-100
​
aspect ratio
  • ar=2:3 => ar-2-3
  • ar=3:1 => ar=3-1
  • ar=2:4 => ar=2-4
  • Aspect ratio will only work when we provide either width or height (not both) and fit
crop
  • crop=top => fo-top
  • crop=top,left => fo-top_left
  • crop=left,top => fo-top_left
  • crop=faces => fo-auto
  • Supported values:
  • ​
    • top
    • left
    • right
    • bottom
    • top,left
    • top,right
    • bottom,right
    • bottom,left
    • left,top
    • right,top
    • right,bottom
    • left,bottom
    • faces
fit
  • fit=clip => c-at_max_enlarge
  • fit=fill => cm-pad_resize
  • fit=scale => c-force
  • fit=crop => no mapping required
  • fit=fillmax => cm-pad_resize
  • fit=max => c-at_max
  • fit=facearea => fo-face
  • Supported values:
  • ​
    • clip
    • crop
    • fill
    • fillmax
    • max
    • scale
    • facearea
  • For fit=fillmax, if the requested dimensions are greater than the original dimensions, then padding will be added along either one of the dimensions (height or width), not both
fill
​
  • Supported values:
  • ​
    • solid
  • blur will fallback to solid
format
  • fm=jpg => f-jpg
  • Supported values:
  • ​
    • jpeg->jpeg
    • jpg->jpg
    • jp2->jpg
    • png->png
    • webp->webp
    • gif->gif
    • avif->avif
    • png8->png
    • png32->png
quality
  • q=60 => q-60
​
orient
​
  • Supported values:
  • ​
    • 1->0
    • 6->90
    • 3->180
    • 8->270
    • 0->0
    • 90->90
    • 180->180
    • 270->270
  • Counterclockwise rotation via orient is not supported
fill-color
  • fill-color=red => bg-red
  • fill-color=BLUE => bg-blue
  • fill-color=AAAA54 => bg-AAAA54
  • fill-color=A9AAAA54 => bg-AAAA5466
  • fill-color=B4F => bg-BB44FF
  • fill-color=9B4F => bg-BB44FF60
  1. 1.
    Color values are case insensitive
  2. 2.
    Alpha values in RGB codes are accepted in the range [00-FF] and translated to a value in the range [00-99]
bg
  • bg=red => bg-red
  • bg=BLUE => bg-blue
  • bg=AAAA54 => bg-AAAA54
  • bg=A9AAAA54 => bg=AAAA5466
  • bg=B4F => bg-BB44FF
  • bg=9B4F => bg-BB44FF60
  1. 1.
    Color values are case insensitive
  2. 2.
    Alpha values in RGB codes are accepted in the range [00-FF] and translated to a value in the range [00-99]
dpr
  • dpr=3.0 => dpr-3.0
​
sharp
  • sharp=10 => e-sharpen-200
  • sharp=100 => e-sharpen-2000
  • Final output from ImageKit may vary from output from Imgix
con
  • con=30 => e-contrast
  • con=-50 => e-contrast
  • Final output from ImageKit may vary from output from Imgix
usm
  • usm=40 => e-usm-2.5-8.00-1-0.05
  • Final output from ImageKit may vary from output from Imgix
usmrad
  • usm=-50&usmrad=2 => e-usm-2-0.00-1-0.05
  • usmrad only works in conjunction with usm
  • Final output from ImageKit may vary from output from Imgix
blur
  • blur=100 => bl-5.00
  • blur=90 => bl-4.50
  • Final output from ImageKit may vary from output from Imgix
trim
  • trim=auto => t-true
  • trim=color => t-true
  • Final output from ImageKit may vary from output from Imgix
Note: The rewriter will silently ignore any transformation with a valid key but an invalid value. For example, h=100&w=<invalid>&blur=100 will be translated to h-100,blur-5.00. Refer to the table to see what constitutes a valid value for different transforms.
Previous
Cloudinary
Next - ✨Features
Session management
Last modified 5mo ago