#### Table of Contents * [Image Files](#image-files) * [Size](#size) * [Rotation](#rotation) * [Adjustments](#adjustments) * [Effects](#effects) * [Optimizations](#optimizations) ## Image Files ### Supported formats Image formats that support all transformation parameters: * PNG - Full support for 8-bit, 24-bit, and 32-bit formats. * JPEG - Full support for standard and progressive (PJPEG) formats. ### Limitations Presently, transformations are limited to images with a dimensional area (width x height) of 20,000,000 pixels or fewer and a file size no greater than 20 MB. ## Size #### Width `w` Sets the image width in pixels. ```html

```

**Original:** 2000x1600 • 709 KB **Modified:** 500x400 • 45 KB #### Height `h` Sets the image height in pixels. ```html

```

**Original:** 2000x1600 • 709 KB **Modified:** 375x300 • 28 KB #### Fit `fit` Controls how the image is fitted to its target dimensions. Use one of the following values: * `contain` (default): Resizes the image to fit within the specified width and height boundaries without cropping or altering the aspect ratio. * `max`: Same as `contain`, but will not upscale the image if it is smaller than the output dimensions. * `crop`: Resizes the image proportionally to fill the target dimensions and crops any excess image data. The default behavior is to crop relative to the image's center point. To override this, append a crop position: * `-top-left` * `-top` * `-top-right` * `-right` * `-bottom-right` * `-bottom` * `-bottom-left` * `-left` ```html

```

**Original:** 2000x1600 • 709 KB **Modified:** 300x500 • 30 KB #### Device pixel ratio `dpr` Sets the device pixel ratio to apply when resizing. The device pixel ratio is used to convert easily between [device independent pixels](https://en.wikipedia.org/wiki/Device_independent_pixel) and device pixels. Use this parameter to display images at optimal size on high-DPI displays. Requires `w` and/or `h` parameters. Use values between `1` and `8`. Note: The `srcset` attribute is presently one of the best ways to take advantage of this parameter on the web. It's quick to implement and has a [polyfill](https://github.com/scottjehl/picturefill) for backward compatibility. ```html

```

**Original:** 2000x1600 • 709 KB **Modified:** 400x320 • 30 KB • @1x 800x640 • 97 KB • @2x 1200x960 • 191 KB • @3x #### Crop `crop` Cuts out a rectangular portion of the image prior to any other resize operations. The value provided should be a set of comma-separated integers in the following format: `{width},{height},{x},{y}`. The `x` and `y` coordinate values (both optional) allow precise control over where the top-left corner of the rectangular cutout is positioned. A value of `0` for both `x` and `y`, for instance, would position the cutout at the upper-left corner of the source image. By default, the cutout will be horizontally and vertically centered. ```html

```

**Original:** 2000x1600 • 709 KB **Modified:** 500x500 • 31 KB ## Rotation #### Flip `flip` Reflects the image horizontally and/or vertically. Use a value of `x` , `y` , or `xy` to flip the image horizontally, vertically, or on both axes, respectively. Note that images get flipped *before* they get cropped, when both transformations are requested. ```html

```

**Original:** 2000x1600 • 709 KB **Modified:** 700x560 • 79 KB • flipped horizontally #### Rotate `rot` Rotates the image counter-clockwise by a given angle in degrees. Use values between `0` and `360` or a value of `auto` to adjust the image orientation automatically based in its exif data, if available. Note that images get rotated *before* they get cropped, when both transformations are requested. ```html

```

**Original:** 2000x1600 • 709 KB **Modified:** 700x700 • 70 KB • rotated 45° ## Adjustments #### Brightness `bri` Adjust the brightness of the image. Use values between `-100` and `100`. ```html

```

**Original:** 2000x1600 • 709 KB **Modified:** 700x560 • 78 KB • darkened 10% #### Contrast `con` Adjust the contrast of the image. Use values between `-100` and `100`. ```html

```

**Original:** 2000x1600 • 709 KB **Modified:** 700x560 • 85 KB • contrast reduced 10% #### Sharpness `sharp` Adjust the sharpness of the image. Use values between `0` and `100`. ```html

```

**Original:** 2000x1600 • 709 KB **Modified:** 700x560 • 103 KB • sharpened 10% ## Effects #### Pixelate `pix` Applies a pixelation effect to the image. Use values between `0` and `100` to control the block size. ```html

```

**Original:** 2000x1600 • 709 KB **Modified:** 700x560 • 59 KB • pixelated with 15px block size #### Color `col` Applies a color filter to the image. The following values are supported: * `gray` or `grey` * `sepia` ```html

```

**Original:** 2000x1600 • 709 KB **Modified:** 700x560 • 69 KB • grayscale filter ## Optimizations #### Quality `q` Defines the output quality of the image (only works on JPEGs). Use values between `0` and `100`. Lower values yield smaller file sizes at the expense of image quality. By default, a setting of `90` will be used if any transformations are performed. Original source images are never compressed. Note: JPEG files can only have their quality decreased. A low quality source image will not be improved by setting a high value (e.g. `100`) for this parameter. For best results, always upload images to a Project at maximum quality and use this parameter in websites or applications to optimize them for fast delivery. ```html

```

**Original:** 2000x1600 • 709 KB **Modified:** 2000x1600 • 185 KB • 50% quality #### Interlacing `i` Determines whether the image should be output in interlaced or standard encoding mode. If the image is a JPEG and interlaced mode is enabled (default behavior when transformations are performed), it will be encoded as a progressive JPEG. Use a value of `true` to enable interlaced mode or `false` to use standard encoding. Note: Progressive JPEGs provide a number of advantages over traditional JPEGs including potentially smaller file sizes and faster perceived load times. When a progressive JPEG is rendered, only 15% of the image needs to be downloaded before a preview can be displayed. As the remainder of the image data is downloaded, the image fills in and becomes progressively sharper, giving an impression of much quicker loading. ```html

```

**Original:** 2000x1600 • 709 KB **Modified:** 2000x1600 • 459 KB • progressive

File Tools