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 transformExample translationRemarks

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. Color values are case insensitive

  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. Color values are case insensitive

  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

  • The final result produced by ImageKit could differ from the result obtained from Imgix.

con

  • con=30 => e-contrast

  • con=-50 => e-contrast

  • The final result produced by ImageKit could differ from the result obtained from Imgix.

usm

  • usm=40 => e-usm-2.5-8.00-1-0.05

  • The final result produced by ImageKit could differ from the result obtained from Imgix.

usmrad

  • usm=-50&usmrad=2 => e-usm-2-0.00-1-0.05

  • usmrad only works in conjunction with usm

  • The final result produced by ImageKit could differ from the result obtained from Imgix.

blur

  • blur=100 => bl-5.00

  • blur=90 => bl-4.50

  • The final result produced by ImageKit could differ from the result obtained from Imgix.

trim

  • trim=auto => t-true

  • trim=color => t-true

  • The final result produced by ImageKit could differ from the result obtained 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.

Last updated