­čÜÇ We're launching Video Optimization in beta! Read the announcement.

Parameters

The complete reference of transformation parameters recognized by the TwicPics API.

For consistency, transformations use the same format for parameters that represent similar underlying concepts.

anchor

An anchor represents a border or a corner of an image.

The following literals are accepted:

  • bottom
  • bottom-left
  • bottom-right
  • left
  • top
  • top-left
  • top-right
  • right

angle

An angle represents... an angle.

It can be a number in which case it is rounded to the nearest multiple of 90 and represents an angle expressed in degrees.

The following literals are also accepted:

LiteralAngle
anticlockwise-90┬░
clockwise90┬░
counterclockwise-90┬░
flip180┬░
left-90┬░
reverse180┬░
right90┬░

axis

An axis represents the horizontal axis, the vertical axis or both.

The following literals are accepted:

LiteralAxis
bothboth
hhorizontal
horizontalhorizontal
vvertical
verticalvertical
xhorizontal
yvertical

boolean

A boolean represents... a boolean value (true or false).

The following literals are accepted:

LiteralBoolean
falsefalse
nofalse
offfalse
ontrue
truetrue
yestrue

color

A color represents... a color! It can be specified as:

  • a color name like red or green (see the comprehensive list further down this section)
  • a three character hexadecimal value like 76E for RGB colors with no alpha,
  • a four character hexadecimal value like 76E8 for RGB colors with alpha,
  • a six character hexadecimal value like A68040 for RGB colors with no alpha,
  • a eight character hexadecimal value like A6804080 for RGB colors with alpha,
  • a CSS-like RGB expression: rgb(<red>,<green>,<blue>),
  • a CSS-like RGBA expression: rgba(<red>,<green>,<blue>,<alpha>),
  • a CSS-like HSL expression: hsl(<hue>,<saturation>,<lightness>),
  • a CSS like HSLA expression: hsla(<hue>,<saturation>,<lightness>,<alpha>).

TwicPics also adds transparent so that you can easily create an invisible placeholder using placeholder:transparent.

Finally, you also have the possibility to add an alpha value to color names, three character hexadecimal colors, and six character hexadecimal color. Simply append the decimal part of the alpha component to the color expression.

ExampleResult
violet.25placeholder:50x50:transparentviolet.25
008.75placeholder:50x50:transparent/008.75
808080.3placeholder:50x50:transparent/808080.3

Finally, here is the list of all supported color names:

NamePreview
alice-bluealice-blue
antique-whiteantique-white
aquaaqua
aquamarineaquamarine
azureazure
beigebeige
bisquebisque
blackblack
blanched-almondblanched-almond
blueblue
blue-violetblue-violet
brownbrown
burlywoodburlywood
cadet-bluecadet-blue
chartreusechartreuse
chocolatechocolate
coralcoral
cornflower-bluecornflower-blue
cornsilkcornsilk
crimsoncrimson
cyancyan
dark-bluedark-blue
dark-cyandark-cyan
dark-goldenroddark-goldenrod
dark-graydark-gray
dark-greendark-green
dark-khakidark-khaki
dark-magentadark-magenta
dark-olive-greendark-olive-green
dark-orangedark-orange
dark-orchiddark-orchid
dark-reddark-red
dark-salmondark-salmon
dark-sea-greendark-sea-green
dark-slate-bluedark-slate-blue
dark-slate-graydark-slate-gray
dark-turquoisedark-turquoise
dark-violetdark-violet
deep-pinkdeep-pink
deep-sky-bluedeep-sky-blue
dim-graydim-gray
dodger-bluedodger-blue
firebrickfirebrick
floral-whitefloral-white
forest-greenforest-green
fuchsiafuchsia
gainsborogainsboro
ghost-whiteghost-white
goldgold
goldenrodgoldenrod
graygray
greengreen
green-yellowgreen-yellow
honeydewhoneydew
hot-pinkhot-pink
indian-redindian-red
indigoindigo
ivoryivory
khakikhaki
lavenderlavender
lavender-blushlavender-blush
lawn-greenlawn-green
lemon-chiffonlemon-chiffon
light-bluelight-blue
light-corallight-coral
light-cyanlight-cyan
light-goldenrod-yellowlight-goldenrod-yellow
light-graylight-gray
light-greenlight-green
light-pinklight-pink
light-salmonlight-salmon
light-sea-greenlight-sea-green
light-sky-bluelight-sky-blue
light-slate-graylight-slate-gray
light-steel-bluelight-steel-blue
light-yellowlight-yellow
limelime
lime-greenlime-green
linenlinen
magentamagenta
maroonmaroon
medium-aquamarinemedium-aquamarine
medium-bluemedium-blue
medium-orchidmedium-orchid
medium-purplemedium-purple
medium-sea-greenmedium-sea-green
medium-slate-bluemedium-slate-blue
medium-spring-greenmedium-spring-green
medium-turquoisemedium-turquoise
medium-violet-redmedium-violet-red
midnight-bluemidnight-blue
mint-creammint-cream
misty-rosemisty-rose
moccasinmoccasin
navajo-whitenavajo-white
navynavy
old-laceold-lace
oliveolive
olive-drabolive-drab
orangeorange
orange-redorange-red
orchidorchid
pale-goldenrodpale-goldenrod
pale-greenpale-green
pale-turquoisepale-turquoise
pale-violet-redpale-violet-red
papaya-whippapaya-whip
peach-puffpeach-puff
peruperu
pinkpink
plumplum
powder-bluepowder-blue
purplepurple
rebecca-purplerebecca-purple
redred
rosy-brownrosy-brown
royal-blueroyal-blue
saddle-brownsaddle-brown
salmonsalmon
sandy-brownsandy-brown
sea-greensea-green
seashellseashell
siennasienna
silversilver
sky-bluesky-blue
slate-blueslate-blue
slate-grayslate-gray
snowsnow
spring-greenspring-green
steel-bluesteel-blue
tantan
tealteal
thistlethistle
tomatotomato
turquoiseturquoise
violetviolet
wheatwheat
whitewhite
white-smokewhite-smoke
yellowyellow
yellow-greenyellow-green

coordinates

Coordinates represent a point in an image, specified as a couple of positive lengths separated by the character x:

  • the first length is the coordinate along the x-axis (following the width of the image)
  • the second length is the coordinate along the y-axis (following the height of the image)

TwicPics uses the same coordinate system as CSS: zero-based, left-to-right and top-to-bottom.

If we take the example of an image that is 640 pixel-wide and 480 pixel-high:

  • 0x0 points to the top-left corner pixel
  • 639x479 points to the bottom-right corner pixel.
It is perfectly fine to mix lengths of different units in the same coordinates . For instance, in the context of yet another 640 per 480 sample image, coordinates 100x50p actually translate to 100x240 .

crop size

A crop size is a size where omitted dimensions are assumed to be the same as the input image.

For instance:

  • 320 and 320x- are equivalent to 320x1s
  • -x240 is equivalent to 1sx240

length

TwicPics lengths are equivalent to CSS length values. They consist of a number eventually followed by a unit specifier:

  • when no unit is specified, the length is in pixels, for instance 50 is a pixel length that can be read as "50 pixels"
  • with the unit specifier "s", the length is a scale, for instance (1/3)s is a scale length that can be read as "one third"
  • with the unit specifier "p", the length is a percentage, for instance 4.5p is a percentage length representing "4.5%"

number

TwicPics numbers can be JSON-encoded number literals or expressions that, when computed, result in an actual number. Expressions are embedded in parenthesis. Operators +, -, * and / are supported for additions, subtractions, multiplications and divisions respectively. Classic algebraic precedence is respected and parenthesis can be used to circumvent it.

For instance, 50, 7.2, (1/3), (5*(7+2)/3) are all valid numbers.

ratio

A ratio represents the proportional relationship between a width and a height. It is specified as a couple of strictly positive numbers separated by the character ::

  • the first number is the number of length units contained in the width
  • the second number is the number of length units contained in the height

For instance, the ratio 9:3 indicates that the width is 9-units long while the height is 3-units long. In terms of proportions, the width is (9/3=)3 times longer than the height.

size

A size represents a 2D area, specified as a couple of strictly positive lengths separated by the character x:

  • the first length is the width of the area
  • the second length is the height of the area

For instance 640x480 is 640 pixel-wide per 480 pixel-high.

It is possible to omit one of the dimensions using the character -. In that case, TwicPics will automatically compute the missing dimension so that the size respects the aspect ratio of the source image. For instance, if the source image is 640 pixel-wide per 480 pixel-high, then sizes 320x- and -x240 are both equivalent to 320x240.

As a shortcut, it is possible to omit the height by specifying just a width. For instance, the size 320 is equivalent to 320x-.

It is totally legal to mix lengths of different units in the same size . For instance, 10px150 is a perfectly valid size.
responsive images

The All-In-One Toolbox For Your Medias

The simplest, most powerful way to tackle responsive images & videos